Hello everyone,
I've been working hard at a Sugarcube 2.1 game that I finally launched and now we guesstimate that the userbase would prefer a top/down menu. I've tried my darndest to move the menu to the top without breaking my game but have had no luck. I also tried changing the icon for the menu from "<" to Close Menu/Open Menu but can't get the spacing correct so that the words Open Menu (or even Menu) show properly while the tw-sidebar element is stowed.
Can you guys help with an example of how to structure the side menu as a top/down menu? Please! Thank you.
Comments
Beyond that, you've confused the UI bar with the menus is contains, at least in your description, and it's not a tw-sidebar element—AFAIK, that's Harlowe specific.
The UI bar's default styles patch the core styles to emplace itself. Additionally, it is designed to be responsive, which includes more patches to the core styles. While it's possible to relocate it, it would likely be far, far less work to completely remove the UI bar and its styles with a tiny bit of JavaScript and then write your own top bar/menu. Virtually everything offered by the UI bar is available separately as an API—in particular, all of the core menu items and the history controls.
So I know how to remove the bar, but I'm a bit lost on how to relocate it using the API. Is there anywhere that would document that? I've seen the documentation on the API in the official documentation but moving it via Javascript might be something I'll need my developer on. Thanks for your help.
In particular:
Hmm. Now that I think about it, I suppose another alternative would be to simply remove the UI bar's default styles. You'd then have total control over its styling and layout, so you could do whatever you wanted with it. In that case, I'd suggest looking at the following:
Also, to be clear about what I meant before about completely removing it and its styles. The code is: To simply remove its styles, you'd only need the second line there. In other words:
Then grab the CSS from here (didn't fit in the forum post)
Google Docs File
There's two big chunks of code in that document. The first moves the ui-bar to the top, but also changes a bunch of other styles/colors. If you don't like the new colors, just paste in the second chunk of code after the first. If you're using Twine 1.4, put both code chunks in the same stylesheet passage.
Here's a small piece of code to cause the ui-bar to stow/unstow on double click. I don't know if you'll need it, but it might be better than trying to change the button around or whatever you were trying to do. It also goes in your scripts.
The new ui-bar handles everything pretty well, but has a bit of trouble with story banners. I'll attach a demo of it in both styles.
Let me know if I messed anything up inadvertently.
Edit: This is a work in progress, and I'll wind up making the code way more efficient and such (i.e. not including things I'm not editing) and making more/better changes (the goal is to get something that works very well on mobile without having to rewrite the whole thing into columns), but you seemed like you were in a hurry.
It may' help others find the solution again later and gives people a descriptive title to link to in future threads that reference that it.
Sounds like a good idea. I'll do that.