Keeping left nav menu expanded

[Anand_99]

Hello,

I am developing the new site using WordPress. It’s a class project to develop school website. So I am referring to http://rgs.usu.edu/graduateschool/
On this website, if you click on “Tuition, Finances and Support” and then on “Tuition and Residency”, the new page opens up. How can I get the functionality to keep that menu expanded?

I am a newbie, so it will be great if anyone can explain this in detail.

[I.m.learning]

What exactly are you looking for? Menus will keep expanding as long as the code provides.

From what i understand, once you add an anchor link with an href is when things change. This is regardless if the href leads to a link on that page or a separate page.

The only thing that comes to mind is you’re looking for a side menu to let users know where they are in your site.

[Anand_99]

What I want is left menu to be remain expanded after clicking the option in submenu.

For examples, after clicking on “Tuition, Finances and Support” and then “Tuition and Residency”, the previously opened menu of “Tuition, Finances and Support” goe closed. How can I keep that open/expanded? So that user can get clear idea of what menu->sub menu->page they are on to.

[Shikkediel]

This is tricky because you’re actually going to another page. Most appropriate “tool” I can think of would be to use a session cookie with web storage.

Localstorage

With this you could save which menu is opened, read that info when landing on the new page and reopen the menu in question.

[deb]

I think you should use jquery like:

jQuery(‘.sub-menu li a’).click( function() {
jQuery(this).parent().parent().addClass(‘open’);
});

and through css, you should do
ul.open { display: block !important; }

I have not checked it, but I think it should work :)

Cheers !!!

[Shikkediel]

I believe that particular functionality is already there and that it’s more about keeping the menu open (on the redirected page) than the act of opening itself…

[deb]

Or the simple way is write this css:

.current-menu-parent ul.sub-menu { display: block !important }

[Shikkediel]

Not sure if trolling or just missing the point.

the new page opens up. How can I get the functionality to keep that menu expanded?

Any class added on the original page will not be “remembered” when landing on the redirected one.

[deb]

WordPress creates ‘current-menu-parent’ by default where ever the page redirects, we can inspect the elements, there will be ‘current-menu-parent’ class on active page. With the help of this class, we can show its child ul by:

.current-menu-parent ul.sub-menu { display: block !important }

[Shikkediel]

Ah, that would be a nice solution then. Ignoring the jQuery.

[Anand_99]

Thanks Deb,

I beleive this solution will be part of CSS and I am very new to CSS. So it will be great if you can help me with this. Where exactly do I need to put this code in? And is this generic solution or solution in my case, meaning do I need to use the exact this code or make some changes?

[deb]

You can put this css in your stylesheet, it will work.

[Author]

Posts