Intuitive navigation is key to a good user experience, and creating navigation menus in TiddlyWiki just got a whole lot easier!
The DropDownMenuPlugin allows you to turn a bulleted list into a drop-down menu, by placing <<dropMenu>> on the line after the list. It comes with two CSS themes, for horizontal and vertical menus. You can however style it to your heart’s content and come up with limitless variations.
The AccordionMenuPlugin also allows you to use lists as a basis for menus, by turning them into accordion style menus which are divided into different sections. Clicking on a section expands it and displays its contents, while collapsing the other sections. Once again, using it is as simple as placing <<accordion>> on the line after the list.
Both plugins are extremely easy to use and consist of a bare minimum of JavaScript — relying primarily on CSS — which results in a small size and no performance concerns. Feedback and suggestions are welcome, as always.
7 comments ↓
Very nice. I have two tiny suggestions. Firstly minor cosmetic fix with the horizontal drop down menu would be to put a transparent border on the non-hovered link. At the moment mousing over the links causes them to jump down one pixel because of the border. Secondly if you click an already opened accordion control then it would be nice to close the open panel. Some may argue against this but I think it makes it feel more responsive giving a more pleasing user experience.
Simon: Terrific feedback as always, thank you. I noticed the issue with the horizontal drop-down menu and the one pixel jump. However, this is caused by the theme that I am using at Lewcid TW, and does not happen with the default TiddlyWiki theme. My aim was to have it work well with the default theme, as anyone using a different theme would need to tweak the CSS styles anyway. That said, I will tweak it to make it appear as it should with my own theme as well.
As for the accordion, that thought occurred to me too. I’m leaning towards adding that feature in the next version, but perhaps allowing it to be disabled for those that do not want it. What do you think? Thanks again Simon.
This finally gives me a reason to restructure my old TWs - getting a nice navigation really was a pain until now!
As for the accordion’s toggling, I don’t see why anyone might dislike that…
Yet another milestone for the Saqster! Great menus.
Nice! And real useful for me as I’ve been playing with a side and top menu system, and yours looks much nicer then what I had worked up.
Gets me closer to recreating this interface: http://extjswordpress.net/
First - nice work - thank you!
Then, the only additional comment I had has already been covered (the accordion closing), but I did want to mention it so you knew that there are others looking for it.
Again - thanks so much for this.
Hi Saq,
You’ve done it again, beautifully! One question. My fav theme is Haemoglobin. How does one integrate the DropDownMenu in the horizontal MainMenu without spoiling the layout?
I did put the list in the MainMenu tiddler, and it works as expected, but the looks are no good. Menu #1 sits a bit lower and menu @ 1-1 etc. are also dark red and not transparent. Between menu #1 and menu #2 there is a black thin line and they do not connect like in the examples.
Thanks in advance, Saq!
Leave a Comment