Keep menu expanded when different sub-menu option is selected?

[straygoat]

Hello all.

I’m using Smartmenus to create a multi-level menu inside a documentation product called MadCap Flare. I have it working fine, apart from one issue and could use some help.

The issue:

Let’s say I have this menu:

Top level 1 (links to topic)
Top level 2 (links to topic and opens sub menu)
….Sub Option 1 (links to topic)
….Sub Option 2 (links to topic)
Top level 3

If I select Top level 2, the sub-menu opens. Good.

If I select Sub Option 1, the topic opens, the menu stays expanded. Good.

If I then select Sub Option 2, the menu collapses but shows that Top level 2 is selected. If I then expand Top level 2, there is also a highlight on Sub Option 2 to show it is selected. BAD.

I need the menu to stay expanded when Sub Option 1 is the currently selected menu and then Sub Option 2 is selected.

Is it possible? How would I do that?

I’m a writer, not a web dev, but am reasonably technical.

Advice appreciated. Thanks.

[admin]

Are you using real links or page anchors? From what you describe, it’s strange that when you click Sub Option 1 the menu does not collapse but when you click Sub Option 2, it does collapse.

Anyway, to solve the issue(s) I will need to look at/test your code, so if possible please post an URL to some kind of live demo.

[straygoat]

After some investigation over the weekend, I discovered that the smartmenu only stops working when the MadCap output uses a ‘skin’. So there must be a conflict with the skin and the expand/collapse script. I can’t post the URL because of client confidentiality, but I will try and make a blank project that has the same issue.

[lhguillory-flare]

I’m also interested in this topic, as I’m experiencing the same problem using smartmenus and Flare. If I define a skin, then the expand/collapse doesn’t work consistently (though it works on some topics and I have not figured out why it works sometimes and not others).
By not defining a skin, the TOC remains expanded when clicked unless the destination page contains mid-topic jump (links to a location within that topic). When a page contains a mid-topic jump, the table of contents collapses. TOC destinations to pages that do not contain mid-topic jumps work just fine (i.e., the TOC remains expanded to display the location from which I clicked within the TOC).
I like the look of smartmenus; I just need to iron out these last few quirks.

[straygoat]

lhguillory-flare – I think we need to get a sample up so that people can see what is going on.

[straygoat]

I have put a small sample project up here:

http://straygoat-technicalauthor.co.uk/smartmenutest/TestingMenuFix/Content/Doors.htm

I’ll explain what is in place:

Everything in the page is created in MadCap Flare, which lets us create topic htm files, a toc file, and associate them with a skin. The skin uses Foundation, and if you reduce the browser size, you will see that eventually, a hamburger icon appears and this brings in a slide-in menu (this is a Foundation menu).

Everything above the search bar is defined in the skin, and everything from the space bar down is laid out using a master page and CSS. In the master page, I have used a menu proxy which provides Flare’s table of contents as a regular ul, li list. With a little help from a script and an XSLT transform (both supplied by someone else), the menu proxy is converted into a list that will work with smartmenus.

The main content is loaded in from the htm topics I create in Flare and the footer is just some images I added in a div at the bottom of the master page.

If you experiment with the Doors menu and its sub-menus, you will see that the expand doesn’t work right.

I suspect the problem with the expand is some sort of clash with the foundation menu. It only seems to occur when the skin is used (it is possible to create the project without a skin, but I need to keep that in place for the foundation menu). I was unaware of the problem occurring when the topic contains a link elsewhere, but have added links to the topics just in case.

Maybe someone can shed some light on what is going wrong?

[admin]

Hi guys, sorry for this late reply! I’ve, unfortunately, been very busy lately and wasn’t able to look at the forums often..

@straygoat From what I can see, the menu seems to work as intended (apart from the styling which needs some tweaking):

http://straygoat-technicalauthor.co.uk/smartmenutest/TestingMenuFix/Content/Doors.htm

I guess what bothers you is that when a new page is loaded, the menu is not expanded automatically to show the current selected item. To fix that, you would need to change the following code in “Resources/smartmenus-1.0.0-beta1/initialise-accordion.js”:

				/* Automatically open the accordion to show the current item */
				$('#smartmenu-accordion>ul.sm').smartmenus('itemActivate', $('a.selected'));

to something like this:

				/* Automatically open the accordion to show the current item */
				$('#smartmenu-accordion>ul.sm').smartmenus('itemActivate', $('#smartmenu-accordion>ul.sm a.current'));

Please let me know if that still doesn’t solve the issue.

[straygoat]

Thanks. I will give it a go later this week and see how it works. Yes, it was just the expanding menus issue that was a problem. Oh, and the menu appearing without formatting (FOUC) when the page first loads, but I think setting ‘display’ in the css can cure that.

I’ve since found another way of doing it with foundation menus, but it is good to have the smartmenus solution too, as your solution allows the top-level menu items to link to content as well.

[straygoat]

Hi admin and everyone else.

I have just tried the solution posted and can confirm it works when used with MadCap Flare. Thanks a lot.

[straygoat]

Hi Admin,

I still have a couple of issues.

When I have a level 3 sub menu (so that’s menu>sub-menu>sub-menu), the level 3 menu doesn’t expand automatically, only level 1 and level 2 do.

Also, is there a way to get only the lowest level currently selected page to be highlighted in the menu? At the moment, if I select a level 3 menu, it highlights the level 1, level 2, and level 3 menu options.

[Author]

Posts