htrain26 Posted October 31, 2014 Share Posted October 31, 2014 (edited) 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 November 3, 2014 by htrain26 Link to comment Share on other sites More sharing options...
justsomeguy Posted October 31, 2014 Share Posted October 31, 2014 Do you have the page online anywhere? Link to comment Share on other sites More sharing options...
htrain26 Posted November 3, 2014 Author Share Posted November 3, 2014 Yes, you can find it here: http://tfmcomm.oiw9.com sorry about that. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 3, 2014 Share Posted November 3, 2014 (edited) You need to target parent elements li not ul, and give them same class or different to your needs $('li.current-menu-item').parents().not('ul').addClass('current-menu-item'); Edited November 3, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
htrain26 Posted November 3, 2014 Author Share Posted November 3, 2014 Forgive me, but I'm not quite understading. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 3, 2014 Share Posted November 3, 2014 (edited) $('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 November 3, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
htrain26 Posted November 4, 2014 Author Share Posted November 4, 2014 Gotcha! Plus it didn't help that I was replacing '$(this).closest('li').addClass('current-menu-item');', but looks like it's working when I add the line after. Thanks soo much!!!! Link to comment Share on other sites More sharing options...
dsonesuk Posted November 4, 2014 Share Posted November 4, 2014 Plus it didn't help that I was replacing '$(this).closest('li').addClass('current-menu-item');', but looks like it's working when I add the line after. Well yes, it would be difficult to target 'li.current-menu-item' if they had not already been created first Link to comment Share on other sites More sharing options...
htrain26 Posted November 12, 2014 Author Share Posted November 12, 2014 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 More sharing options...
dsonesuk Posted November 12, 2014 Share Posted November 12, 2014 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 More sharing options...
htrain26 Posted November 14, 2014 Author Share Posted November 14, 2014 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 More sharing options...
dsonesuk Posted November 14, 2014 Share Posted November 14, 2014 (edited) 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 November 15, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
htrain26 Posted November 14, 2014 Author Share Posted November 14, 2014 I tend to agree with you about simplifying the menu(s), but unfortunately that's not up to me. I appreciate the honest feedback though! Link to comment Share on other sites More sharing options...
htrain26 Posted November 26, 2014 Author Share Posted November 26, 2014 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 More sharing options...
dsonesuk Posted November 26, 2014 Share Posted November 26, 2014 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 More sharing options...
m_hutchins Posted December 18, 2014 Share Posted December 18, 2014 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now