Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

The definitive drop down header in harlowe...or give up :-)

edited August 2016 in Help! with 2.0
First, you guys rock. I've learned so much in this forum and have gotten about 30k words into my first novel. The more I looked at my Choice of games, the more I realized I can do 90% of what they do except one thing, I can't figure out how to make a header dropdown in JS or CSS.

I've seen others ask questions about this, and the answer is it's very complicated. To me, this is what makes Choice of Games art very gamified. The links on the drop down are all very simple, but that drop down seems simple. I thought it can be down with some sort of icon macro, and then a reveal once the icon is tapped that would overlap over text but I'm not sure.

I would switch over to sugarcube, but I'd have to relearn JS for that system which is, for me, essentially starting over. #lesigh

Any advice or articles that show how to do this would be greatly appreciated.

Thank you!


  • You are assuming that the members of this forum know what a Choice of Games header dropdown is and what it looks like, searching the CoG forum for "header dropdown" returns no results.

    Could you supply either a link to the relevant CoG header dropdown documentation or an image of what a header dropdown looks like.
  • HA! Yes. Sorry about that. I've actually gotten halfway through the question using another example of what you posted in answer. One moment, let me grab a screenshot.
  • Ok. Here is a screenshot of the layout of a Choice of Games game, the#1 IF publisher in the app store. Their menu is pretty simple, it consists of a series of links separated by lines (which can be done in Html). It disappears and reappears when the triple dot is touched. This is accomplished utilizing your three passage technique discussed in the discussion entitled: "Replacing Text Back and Forth without Refreshing passage..."

    Finally, I think the overlapping is accomplished using the z-index mentioned here in the description of CSS: I'm not sure how Harlowe will handle having an overlapping header but we will see once I get that far.

    Mr. Elf, you sir are a legend. Thanks for all your hard work. Any further notes you give would be greatly appreciated for all of us here trying to build empires with matchsticks.

  • At first glance I think the main question is:
    Do you want the links in that menu to be able to easily update the contents of the main passage area?

    Assuming that the answer is Yes then I think I would use two header tagged passages to implement it:

    1. The first one to display status bar containing the three dots icon and to handle the opening/closing (showing/hiding using CSS) of the menu.

    2. The second one to display the contents of the menu and to handle what happens when a menu item is clicked.
  • Yes. I was able to implement a version of the menu using a three step method you mentioned before. But I cannot get the header to overlap the passage. Is that possible in Harlowe? My z-index was not correct since the Header and Passage are both under the same CSS rules. I'm now trying to figure out how/if I can have one passage overlap the other. If not, I'm happy with the current solution that just moves down the passage to make room for the "Drop down" menu.

    Thanks for your responses!
  • Got it ! Use the "
    " CSS tag for your passage style and that should do it. Hope this helps everyone.
  • Still not perfect. Not elegant yet. Overlap still moves the text (so no overlap should be used). Considering ways to circumvent.
Sign In or Register to comment.