so trying find little bit of script remove class on active menu item when hover on other menu items. restore when move away nav. tricky part making sure script not trigger if there active sub menu on current active item.
so example have 4 menu items (main 1, main 2, main 3, main 4). 2 have submenus (main 2, main 4). main 1 active , has class named active. when hover on main 2 submenu shows , main 2 has hover class , hilite class when hovering submenu main 1 normal stock. move away nav , main 1 goes having active class , main 2 looks normal
now take same setup , make main 2 active it's submenu showing default. when hover on main 1 main 3 main 4 submenu closes , active class on main 2 gets removed when move away returns being active , showing submenu. if hover on main 2 or it's submenu's class never changes stays same.
i have searched far , wide similar setup , cannot find had posted on earlier question can found here went threw of stuff , no luck stoppropagation() makes me think wrong piece of code project worked on far different project. made second question on because not sure if post on other if marked answered.
thanks in advance , hope help,
tyler
edit: here link old script on jsfiddle here updated: 4/30/2011
note work on wordpress
please post edits on jsfiddle , not on code unless major
ok have working menu finally. have done serious searching , found fix. not sure if correct or not works want to. if 1 wants use feel free. being used wordpress have function add few lines of code , post below well.
here function added wordpress:
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 wordpress 3.0+
this add class current menu item
so far jquery have kind of added cluster of things , there way merge , make work 1 not know how ill post code here , demo jsfiddle
here jquery script pieced , add effect found in demo:
this adds .not-active class parent & non-parent items:
$('*:not(li) > ul#navbar > li').addclass('not-active'); this adds .child-menu class ul.sub-menus:
$('ul.sub-menu').children().addclass('child-menu'); this adds .first-child class first child item in each sub-menu (added styling):
$('#navbar ul.sub-menu :first-child').addclass('first-child'); this adds .last-child class last child item in each sub-menu (added styling):
$('#navbar ul.sub-menu :last-child').addclass('last-child'); this toggle class .not-active on active menu (removes .not-active last script below):
$("#navbar li.active").toggleclass("not-active"); this toggle class .not-active on active child menu (removes .not-active last script below):
$('#navbar ul.sub-menu li.active').toggleclass("not-active"); this adds .parent-active class if .current-menu-parent present:
$('ul#navbar li.current-menu-parent').addclass('parent-active'); this adds .child-active class if li.current-menu-parent ul.sub-menu present:
$('ul#navbar li.current-menu-parent ul.sub-menu').addclass('child-active'); * adds .hilite class 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 .active class of active menu when hovering other menu items not used when hovering active item or child items of 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 have jquery lets css , html in reference.
here css:
/*main position of menu*/ #navigation{float: left; margin: 5px 0 15px; padding: 0; position: relative; width: 100%} /*first ul tag menu*/ ul#navbar{margin: 0; padding: 0; font-size: 96%; height: 20px; background: #009ad9} /*sets style each li tag , 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 active*/ #navbar li.parent-active a{background: #fff; color: #666} /*sets child-menu not display when not-active*/ ul.sub-menu{display: none} /*sets position of child menu using first-child (leave avoid conflict other style's)*/ #navbar li ul.sub-menu li.first-child{margin-left: -0.375em} /*sets child visible on parent hover*/ #navbar li:hover ul.sub-menu{display: inline; left: 0; margin: 0; padding: 0;width: 980px; position: absolute} /*sets child visible when parent 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 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 pretty simple read
here 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 use code , if find simpler way group of scripts please do.
you can see live demo here @ jsfiddle
Comments
Post a Comment