Keeping left-nav menu expanded

[Anand_99]

Hello,

I am working on http://rgs.usu.edu/graduateschool/
Whenever user clicks on left nav menu, it opens submenu in some cases, like “About
” and then “Staff Directory”. So when we click on a submenu, a page opens up, but user loses the track of which menu he/she on. So I am trying to keep that menu expanded. And for this, I am using cookies to keep track of which menu user is on, and on the new page make an automated click so that menu will reopen. I have figured out the part to save menu related data in cookies, but I am not able to make an automatic click. I have tried to use ways both in jQuery and JavaScript. But its still not working, (required code is written only in faculty-rerources section).I am kind of stuck on this point. Please help.

`//console.log(‘jQuery Executed’);
jQuery(document).ready(function()
{
console.log(“document.cookie: “+document.cookie);

var cname="leftNavLocationCookie";
var name = cname + "=";

var ca = document.cookie.split(';');
for(var i = 0; i <ca.length; i++) 
{
    var c = ca[i];
    while (c.charAt(0)==' ') 
    {
        c = c.substring(1);
    }
    if (c.indexOf(name) == 0) 
    {
        console.log("myCookie on page load: "+c.substring(name.length,c.length));
        var location=c.substring(name.length,c.length);
   }
}   


if(location=="about")
{
    console.log("last location: about");
}
else if(location=="admissions")
{
    console.log("last location: admissions");
}
else if(location=="degree")
{
    console.log("last location: degree");
}
else if(location=="tuition")
{
    jQuery("menu-item-3166").trigger('click');
    jQuery("menu-item-3166").click();
    console.log("last location: tuition");
}
else if(location=="faculty-resources")
{
    jQuery('menu-item-2276.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-ancestor.current-menu-parent.current_page_parent.current_page_ancestor.menu-item-has-children.menu-item-2276').mousedown();
    //jQuery('menu-item-2276').trigger('click');
    //jQuery('menu-item-2276')[0].click();
    //document.getElementById('menu-item-2276').click();
    //document.getElementById("menu-item-2276").click();
    //jQuery("menu-item-2276").simulate('click');
    console.log("element: "+document.getElementById("menu-item-2276"));
    console.log("last location: faculty-resources");
}


jQuery(this).click(function(event)
{
    //jQuery('#clicked_info').html(event.target.id);
    //console.log('click event:'+event);
    console.log('click event.target: '+event.target);
    //console.log('click event.target.id:'+event.target.id);
    var location;

    if (event.target=="http://rgs.usu.edu/graduateschool/about/")
    {
        location="about";
    }
    else if (event.target=="http://rgs.usu.edu/graduateschool/about/staff-directory/")
    {
        location="about";
    }

    else if(event.target=="http://rgs.usu.edu/graduateschool/admissions/")
    {
        location="admissions";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/admissions/apply/")
    {
        location="admissions";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/admissions/questions/")
    {
        location="admissions";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/information-request/")
    {
        location="admissions";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/degree/requirements-and-deadlines/")
    {
        location="admissions";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/admissions/international/")
    {
        location="admissions";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/admissions/status-definitions/")
    {
        location="admissions";
    }

    else if(event.target=="http://rgs.usu.edu/graduateschool/degree/")
    {
        location="degree";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/degree/deadlines/")
    {
        location="degree";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/commencement-deadlines/")
    {
        location="degree";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/degree/gpc-contacts/")
    {
        location="degree";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/degree/commencement/")
    {
        location="degree";
    }

    else if(event.target=="http://rgs.usu.edu/graduateschool/tuition-and-residency#")
    {
        location="tuition";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/tuition-and-residency")
    {
        location="tuition";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/finances")
    {
        location="tuition";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/finances-and-support/subsidized-insurance/")
    {
        location="tuition";
    }

    else if(event.target=="http://rgs.usu.edu/graduateschool/faculty-resources/")
    {
        location="faculty-resources";
    }
    else if(event.target=="http://rgs.usu.edu/resources/")
    {
        location="faculty-resources";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/gpc-meetings/")
    {
        location="faculty-resources";
    }
    else if(event.target=="http://rgs.usu.edu/graduateschool/graduate-council/")
    {
        location="faculty-resources";
    }
    var cname="leftNavLocationCookie";
    var cvalue=location;
    var exdays=365;
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    var c = cname + "=" + cvalue + ";" + expires + ";path=/";
    console.log("c: "+c);
    document.cookie = c;

    console.log("cookie: "+document.cookie);

    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) 
    {
        var c = ca[i];
        while (c.charAt(0)==' ') 
        {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) 
        {
            console.log("myCookie saved: "+c.substring(name.length,c.length));
        }
    }
});

});
`

[Shikkediel]

Have a look at this, there’s a much easier way with the built-in WP functionality…

Forum link

[Shikkediel]

I think on your site it would be this:

.current_page_ancestor ul.submenu {
  display: block;
}

[Anand_99]

Thanks Shikkediel,

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?

[Shikkediel]

The code above is a match for your site specifically (no changes needed). Adding custom CSS depends a bit on your WP version but here’s one example from a quick googling that should work for any kind:

With a small plugin

I am otherwise not familiar with the WP interface myself…

[Anand_99]

Hey Shikkediel,

I have included the CSS code sent by you. But its still not working. Sometimes I see that after clicking on submenu, it keep it expanded for a flash and then collapse.

[Shikkediel]

Oops, made a typo…

.current_page_ancestor ul.sub-menu {
  display: block;
}

The CSS rule from the other thread should work as well by the way, the list of classes is so long on that element that Firefox wasn’t showing .current-menu-parent directly (but it’s there as well).

[Anand_99]

I thought of that, well I have corrected it. Still it doesn’t work :-(

[Shikkediel]

Ah, yes. I forgot the important! as well. :-s

.current_page_ancestor ul.sub-menu {
  display: block important!;
}

[Anand_99]

Still no luck!

[Shikkediel]

More dysfunctional typing from my side…

.current_page_ancestor ul.sub-menu {
  display: block !important;
}

[Anand_99]

Great, that did work for most of them. Thanks you!
But not for “Tuition, Finances and Support” menu in left-nav.

[Shikkediel]

Deb’s version is probably a better match for all menus after all then:

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

[Anand_99]

I have included both version in the code, so it can work in any case. Thanks a lot, I really appreciate your help!

I am working in parallel on another issues, can be fiund at https://css-tricks.com/forums/topic/division-top-bar-fixed-wrapped-text/ It will be great if you can take a look.

[Author]

Posts