so i am trying to find a little bit of script to remove the class on the active menu item when i hover over other menu items. But restore it when i move away from the nav. The tricky part is making sure that the script does not trigger if there is a active sub menu on the current active item.
So for example we have 4 menu items (Main 1, Main 2, Main 3, Main 4). Two have submenus (Main 2, Main 4). Main 1 is currently active and has a class named active. When you hover over Main 2 the submenu shows and it Main 2 has a hover class and a hilite class when hovering its submenu but now Main 1 is back to normal stock. Now you move away from the nav and Main 1 goes back to having an active class and Main 2 looks like normal
Now take the same setup and make Main 2 active with it's submenu showing by default. When you hover over Main 1 Main 3 Main 4 the submenu closes and the active class on Main 2 gets removed but when you move away it returns to being active and showing its submenu. Now if you hover over Main 2 or it's submenu's the class never changes it stays the same.
I have searched far and wide for a similar setup and cannot find anything but what i had posted on an earlier question which can be found here i went threw all of my stuff and to no luck the stopPropagation() which makes me think that this is the wrong piece of code for this project but it worked on a far different project. I made a second question on this because i was not sure if i could post on the other if it was already marked as answered.
Thanks in advance and hope i get some help,
Tyler
EDIT: here is a link to the old script on jsfiddle here UPDATED: 4/30/2011
Note that this will only work on wordpress
Please post edits on jsfiddle and not on this code unless it is major
Ok so we have a working menu finally. I have done some serious searching and found a fix. Now i am not sure if it is correct or not but it works like i want it to. If any one wants to use it feel free. It is being used with WordPress so i have a function to add a few lines of code and will post that below as well.
function additional_active_item_classes($classes = array(), $menu_item = false){
if(in_array('current-menu-item', $menu_item->classes)){
$classes[] = 'active active-menu';
}
return $classes;
}
add_filter( 'nav_menu_css_class', 'additional_active_item_classes', 10, 2 );
The above code is for wordpress 3.0+
This will add a class to the current menu item
So far the jQUERY i have kind of added a cluster of things and there is probably a way to merge it all together and make it work as one but i do not know how to do this but ill post the code here and then a demo to jsfiddle
Here is the jQUERY script that i pieced together and will add the effect found in the demo:
This adds a .not-active class to all parent & non-parent items:
$('*:not(li) > ul#navbar > li').addClass('not-active');
This adds a .child-menu class to all ul.sub-menus:
$('ul.sub-menu').children().addClass('child-menu');
This adds a .first-child class to the first child item in each sub-menu (added for extra styling):
$('#navbar ul.sub-menu :first-child').addClass('first-child');
This adds a .last-child class to the last child item in each sub-menu (added for extra styling):
$('#navbar ul.sub-menu :last-child').addClass('last-child');
This will toggle the class .not-active on an active menu (removes .not-active for the last script below):
$("#navbar li.active").toggleClass("not-active");
This will toggle the class .not-active on an active child menu (removes .not-active for the last script below):
$('#navbar ul.sub-menu li.active').toggleClass("not-active");
This adds a .parent-active class if .current-menu-parent is present:
$('ul#navbar li.current-menu-parent').addClass('parent-active');
This adds a .child-active class if li.current-menu-parent ul.sub-menu is present:
$('ul#navbar li.current-menu-parent ul.sub-menu').addClass('child-active');
* This adds a .hilite class to the parent when hovering it's child menu:*
$('#navbar li').hover(
function() {
$(this).parents('li').children('a').addClass('hilite');
},
function(){
$(this).parents('li').children('a').removeClass('hilite');
}
);
This removes the .active class of an active menu when hovering other menu items but will not be used when hovering the active item or child items of the active item:
$('#navbar li.not-active').hover(
function() {
$('#navbar .active').removeClass('active-menu');
$('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').removeClass('parent-active child-active');
},
function() {
$('#navbar .active').addClass('active-menu');
$('#navbar li.current-menu-parent, #navbar li.current-menu-parent ul.sub-menu').addClass('parent-active child-active');
}
);
So now that we have the jQUERY lets get the css and html in for reference.
Here is the css:
/*Main position of menu*/
#navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative; width: 100%}
/*First UL tag for menu*/
ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009AD9}
/*Sets style for each LI tag and sets effects*/
#navbar li{float: left; list-style: none; text-transform: uppercase; font-weight: bold}
#navbar li a{display: block; text-decoration: none; color: #fff; padding: .24em .8em; line-height: normal}
#navbar li:hover a:hover, #navbar li a.hilite{background: #fff; color: #000}
#navbar li.active-menu a{background: #fff; border-top: 2px solid #B70F0F; padding-top: .063em; color: #666}
/*Sets parent active when child is active*/
#navbar li.parent-active a{background: #fff; color: #666}
/*Sets child-menu to not display when not-active*/
ul.sub-menu{display: none}
/*Sets the position of child menu using first-child (leave to avoid conflict with other style's)*/
#navbar li ul.sub-menu li.first-child{margin-left: -0.375em}
/*Sets child as visible on parent hover*/
#navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child as visible when parent is active menu*/
#navbar li.active-menu ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute}
/*Sets child menu active when active item is inside of child menu*/
ul.child-active{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
/*Sets style of child links*/
#navbar li ul.sub-menu li a{display: block; text-decoration: none; padding: 0 .5em; line-height: normal}
/*Sets various child link styles*/
ul.sub-menu li a{color: #666!important}
ul.sub-menu li a:hover{color: #000!important}
li.active-menu ul.sub-menu a{border-top: none!important; padding: 0 .5em!important}
#navbar li.current-menu-parent:hover ul.sub-menu{display: inline; left: 0; margin: 0 0 0 .375em; padding: 0; position: absolute}
It should be pretty simple to read
Here is the html:
<div id="navigation">
<ul id="navbar">
<li class="not-active"><a href="#">Main 1</a></li>
<li class="active active-menu"><a href="#">Main 2</a>
<ul class="sub-menu">
<li class="child-menu first-child"><a href="#">Sub 1</a></li>
<li class="child-menu"><a href="#">Sub 2</a></li>
<li class="child-menu last-child"><a href="#">Sub 3</a></li>
</ul>
</li>
<li class="not-active"><a href="#">Main 3</a></li>
<li class="not-active"><a href="#">Main 4</a>
<ul class="sub-menu">
<li class="child-menu first-child"><a href="#">Sub 4</a></li>
<li class="child-menu"><a href="#">Sub 5</a></li>
<li class="child-menu last-child"><a href="#">Sub 6</a></li>
</ul>
</li>
</ul>
</div>
Please feel free to use this code and if you find a simpler way to group all of those scripts then please do.
You can see a live demo here at JSFIDDLE