You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using the .is-active class on a nested menu inside an accordion-menu, it should remain open.
What happens instead?
I am noticing that the .is-active class is removed if you click the accordion-menu closed, than re-open it. This in turn closes all nested menues and does not retain the is-active state.
Possible Solution
Perhaps custom Javascript will be needed to force the .is-active class to remain even after an accordion menu is closed?
Notice the Nested Menu that was once OPEN is now CLOSED
Context
This is a secondary navigation for me and I would like to open the menu and display a marker as to the page the visitor is currently on. This is why I was hoping to use the active class to help the UI and highlight it in a menu once it is opened.
Your Environment
Foundation version(s) used: 6.3.1
Browser(s) name and version(s): Chrome Version 68.0.3440.10
Device, Operating System and version: Mac Mini, Mac OS High Siera
An Accordion Menu item, like in all Foundation menus, is considered as "opened" becauseis-active is set. If all sub-menus should be closed when the main menu is closed, then those with is-active initially set are treated like others and should be closed too.
So this is not a bug, this is the expected behavior. However, we could add an option to keep the sub-menu opened when the main menu is closed.
Ah - I see. Thanks guys for the info and potential work around.
Whats strange is that I was able to get that menu to stay open, but only on the initial click. I am also using data-multi-open="false" in the example menu so not sure that needs to be factored?
@DanielRuf appreciate the reference and will look into that solution though I usually get jammed up when it comes to working out the needed custom JS. It would be awesome if there could be a solution to retain an open state for situations like this.
What should happen?
When using the .is-active class on a nested menu inside an accordion-menu, it should remain open.
What happens instead?
I am noticing that the .is-active class is removed if you click the accordion-menu closed, than re-open it. This in turn closes all nested menues and does not retain the is-active state.
Possible Solution
Perhaps custom Javascript will be needed to force the .is-active class to remain even after an accordion menu is closed?
Test Case and/or Steps to Reproduce (for bugs)
Test Case: https://codepen.io/jinch/pen/aamzYa?editors=1010
How to reproduce:
Context
This is a secondary navigation for me and I would like to open the menu and display a marker as to the page the visitor is currently on. This is why I was hoping to use the active class to help the UI and highlight it in a menu once it is opened.
Your Environment
Checklist
The text was updated successfully, but these errors were encountered: