[Plugin] MegaMenu – A scalable menu for your wiki!

[jc-ose]

I want to introduce a plugin I’ve been working on called MegaMenu. It provides a macro that generates a menu you can use for navigating your wiki. It is inspired by "megamenu’s" used by websites that have very large catalogues and/or many pages that you can navigate to. My hope is that as your wiki grows, you can continue to use this menu and it should scale well without making navigation any more difficult. At its core, it captures relationships between tiddlers (through tags) similarly to how the built-in tableofcontents macro works. However it does this in a neat interface and goes one step further by attempting to group links together that have multiple tags in common.

 

It shows three levels of links at any time with the possibility to dive deeper using various controls.

This is my first public plugin I’ve written for the community, so I’m very interested in what you think and if you have ideas for how it could potentially be improved. My hope is that this is intuitive to use. Also, just keep in mind that this uses functionality in TW version 5.1.23, so you will need that version (or later) for the menu to work correctly.

I recommend giving it a try first on TiddlyWiki.com to see it in action!

Github Repo:  https://github.com/jc-ose/MegaMenu

Demo: https://jc-ose.github.io/MegaMenu/

Some final thoughts: I am not a developer, so it’s possible that I’ve missed some cross-browser compatibility bits to the css, but in my limited testing it seems to work well. It should work on mobile too.

Let me know what you think!

[History Buff]

While I haven't played with it as much as I'd like, so far I like it a lot and it's giving me a lot of ideas on how I might possibly use it. Excellent work. 

One thing I've done is to use a tiddler with a prefix of $:/temp for the state tiddler. This enables one to navigate through various tiddlers and tags without the save button getting "dirty" or thinking the wiki needs to be saved.

I'll play with it some more and let you know if I find any bugs or have further suggestions.

[Mat]

This is very interesting. A main wiki of mine is my "household wiki" which is very scattered in topics (shopping lists, reference lists, emergency stuff etc etc) and your creation might make it easier to navigate within one such space at a time.

Two thoughts:

1) After clicking a menu item (e.g Tiddler A) I don't find a way to go back to primary Tag level. I was expecting that clicking "Primary Tag" in the menu would trigger the view just like clicking "Tiddler A" in the menu. Also the breadcrumb "Primary Tag" does not bring back that view, which I also expected.

2) This is a case where the default tiddler frame is a visually redundant, even distracting. Below is a mockup image of an alternative view. This is possible by styling backgrounds etc to be transparent, e.g conditionally for tiddlers tagged, say, MegaMenu.

<:-)

 

[jc-ose]

History Buff, 

That's a very good point about using $:/temp for the state tiddler. When I get a chance I think I'll update the default state tiddler to use that prefix, because the save button constantly lighting up is not ideal. 

Mat, 

To your first point, I completely understand where you are coming from. I wasn't sure if it would make it confusing if that were also a clickable option, but it probably makes more sense for it to be. I'll experiment with that some and make an update in the near future. 

To your second point, I like the look of that! I don't think changing the styling of the tiddler containing the menu is within the scope of this plugin, but I can consider taking away some of the outer borders like you did to reduce the number of boxes. I'll consider that a bit as well. 

Thanks for checking it out and for the feedback!

[History Buff]

I echo Mat's points as well. Showing the right panes for the primary tag would be very useful for me. I envision having this in a template tiddler where it would use the current tiddler as the primary tag.

I played around some more with it. I have a primary tag that has 1813 tiddlers tagged to it. There was some performance slow down, but a simple filter in the advanced search tab does performs similarly. I had no way to precisely time it, but it did seem a tad slower than putting a filter in the advanced search tab to list all 1813 tiddlers.

I was able to play around with the speed of the animation and had some fun with that. I think it would also be helpful to have a tooltip show the meaning of the buttons when you hover over them.

Cheers!

[History Buff]

I just started using simplemenu this morning and I like it. It does exactly what I want when I put it in a template tidder and use the current tiddler as the main tag. I don't have quite as much time on it as I do megamenu so will continue to play around and comment further.

[History Buff]

I have a suggestion as far as scrolling goes. When using megamenu and the list of tiddlers is long, it would be nice to see individual scrollbars for each box on the right side instead of a single scroll bar and then have the "title" of each box "sticky" so that it is always on the top like you have on the left pane. This applies to simplemenu as well. I'm not sure how difficult that would be to implement, but thought I'd mention it.

[jc-ose]

Hi guys, 

Thanks again for the feedback. I've finally got around to updating the plugin to incorporate several of your suggestions. Hopefully this helps make the plugin more useful! I'm open to more ideas if anyone has any. 

[Plugin Update to 1.0.8] 

1. Made the "root tag" select-able to populate the right side of the menu.
2. The height of grouped links on the right side of the menu is now limited. If there are more links then the vertical space of the menu allows for, a scrollbar will appear in that group to prevent them from growing overly large.
3. Added sorting to all the lists by title.
   • Note that in the right portion of the menu, the group name that matches the current selection (which is for tiddlers tagged with only that tag) will still always be the last.
4. Changed the default state tiddler to be prefixed by $:\temp to prevent the save button from lighting up while navigating the menu. 

Github Repo:  https://github.com/jc-ose/MegaMenu

Demo: https://jc-ose.github.io/MegaMenu/