Jump to content

Main Menu with dropdown showing active page


htrain26

Recommended Posts

I have the main menu and sub menu's(dropdown menus) reflecting which page the user is on, but I need to have the main menu reflect the the sub's. It currently reflects which page you're on, but I also need the main menu item to be active for the appropiate and active dropdown menu item.

Here's the code I'm currently using:

 

<script>$(function () {setNavigation();});function setNavigation() {var path = window.location.pathname;path = path.replace(//$/, "");path = decodeURIComponent(path);$("#mainmenu a").each(function () {var href = $(this).attr('href');if (path.substring(0, href.length) === href) {$(this).closest('li').addClass('current-menu-item');}});}

</script>

 

Any and all help is welcome and greatly appreciated, for I am not what you might consider the programming wizard!

 

Thanks,

mh

Edited by htrain26
Link to comment
Share on other sites

$('li.current-menu-item').parents()Your current submenu li with class current-menu-item which reflects the current page you are on, is child element of ul parent, which is a child element of li parent, and repeats until the main top level li parent, and then the ul which surrounds all list items that make up the menu.As you don't want to target ul parent elements, but the parent li elements which make up individual menu items you force it to target li elements only with..not('ul')You then add classname to each li parent so you can style to your needs. .addClass('current-menu-item');

Edited by dsonesuk
Link to comment
Share on other sites

  • 2 weeks later...

Hello again, I've run into another issue with the whole "displaying active menu item"...

 

Basically, I'm trying to figure out how to have the pages that are not on the main menu to at least display/show active what section.

For instance, if you click on "commercial" it takes you here: http://tfmcomm.oiw9.com/motorola/index.htm

From that page if you click on "In Building Solutions" from either the main body or the righ hand nav, you end up here: http://tfmcomm.oiw9.com/motorola/in-building-solutions.htm

Once on this page, there is nothing showing active in the main menu. I understand that this page isn't directly connected with the main menu, but I'm wondering if there is a way to at least continue to have the "Commercial" button in the main menu display active. There are a lot of pages, especially in the "commerial" section that currently end up not reflecting any main menu items "active".

 

Thanks once again in advance!

Link to comment
Share on other sites

The whole point of the menu becoming active is that the menu link matches the current page, no matching current page, no adding of active class, no active menus.

If you don't want it seen in that menu for some reason, add it, and then hide it from view using display: none.

Link to comment
Share on other sites

well, it's not that I don't want to see certain pages reflected as active in the menu. The issue is that I DO want to see certain pages reflected in the main menu. Like I was saying, the pages that fall under but outside of the same directory as a "main topic/page" do not display the main menu item as active. I would like for the "main menu item/category" to display active to at least help show what area the user is in. If that makes sense. Adding all the pages and then hiding them seems pretty counter productive to what we're trying to accomplish using the javascript at hand.

Link to comment
Share on other sites

Then you need to add what is commercial to the top commercial dropdown, not keep them separate! and make it confusing. You have two commercial accessories listed

http://tfmcomm.oiw9.com/motorola/accessories/index.htm

side menu under commercial products

 

http://tfmcomm.oiw9.com/motorola/accessories/commercial/index.htm

top menu under commercial.

 

Both listed as under commercial?

 

You should remove duplicated confusing links, create products under top menu, place links from side menu as sub-memu items of product, remove duplicate links from current menu, and you end with non confusing links, and active menu that shows commercial parent and product menu items as active.

Edited by dsonesuk
Link to comment
Share on other sites

  • 2 weeks later...

There's gotta be a way to make this work. First when I moved over to the live site, the main menu doesn't show active when those main main menu items are clicked. But, when any of the items on the drop downs of the main menu are selected the current page and the main menu item show active. You can view here:

 

I tried a handful of attempts to get the pages that are not in/on the menu to reflect on the top main menu items, with no luck. I'm trying to figure out a way to make this work or an alternative compromise. Unfortunately, it's not up to me to change the menu's. I'm all ears.

Link to comment
Share on other sites

The only way to tie both the side menu ul outer parent or child li tag to top menu parent, is to add custom data-* attribute or class/id ref with 'commercial', so when a side menu option is selected it would find this ref, search for this ref on the top menu and apply active class name.

Link to comment
Share on other sites

  • 4 weeks later...

Ok, I switched gears and am trying to go a different route. I'm using some code I found from an older site, and it seemed to work fairly well on that site (when we used it). I'm seeming to still have an issue with this site though. Maybe an extra set of "better adjusted" eyes will help...

 

The site is www.tfmcomm.com and Here's the code:

 

var current = window.location.href; if ( current == "http://www.tfmcomm.com" || current == "http://www.tfmcomm.com/" || current == "http://www.tfmcomm.com/index.htm" ) { jQuery('#mainmenu > li > a[href$=index.htm]').addClass("current-menu-item"); } else if ( current.indexOf("http://www.tfmcomm.com/about-us/") > -1 || current == "http://www.tfmcomm.com/contact-us.htm" > -1 || current.indexOf("http://www.tfmcomm.com/news") > -1 || current.indexOf("http://www.tfmcomm.com/resources") > -1 || current.indexOf("http://www.tfmcomm.com/videos") > -1 ){ jQuery('#mainmenu > li > a[href$=/about-us/index.htm]').addClass("current-menu-item"); }

....etc.

 

Thanks once again!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...