CSS multilevel drop-down with additional jQuery -
i have css multilevel drop-down menu works perfectly.
i add additional jquery code menu stays open when hover. have click screen close menu, (similar http://www.cssplay.co.uk/menus/cssplay-click-drop-fly.html or http://www.codenothing.com/archives/2009/multi-level-drop-down-menu/ ).
i have added jquery, (see below), makes first 2 levels/uls work required, lower levels not staying open. ideas on how fix please?
jsfiddle here - http://jsfiddle.net/psfk7/5/
jquery code:
$('.top_level').mouseover(function(){ $('.megamenu_main').addclass('megamenu_main_over'); $('html').click(function() { $('.megamenu li.top_level ul').removeclass('megamenu_main_over'); }); }); $('li.parent').mouseover(function(){ $('li.parent ul').removeclass('children_over') $(this).children('ul').addclass('children_over'); $('html').click(function() { $('ul').removeclass('children_over'); }); }); html code:
<div class="megamenu_container"> <ul class="megamenu megamenu_slide"> <li class="top_level"><span><a href="#">main page</a></span> <ul class="megamenu_main"> <li><a href="#">suspendisse</a></li> <li><a href="#">fusce porta</a></li> <li class="parent"><a href="http://www.mysite.co.uk/mainpage/page-01">page level 01</a> <ul class='children'> <li><a href="#">donec et enim</a></li> <li><a href="#">aliquam volutpat</a></li> <li class="parent"><a href="#">page level 02</a> <ul class='children'> <li class="parent"><a href="#">page level 03</a> <ul class='children'> <li><a href="#">page level 04</a></li> <li><a href="#">proin sed nisi sapien</a></li> </ul> </li> <li><a href="#">curabitur ultricies</a></li> </ul> </li> <li><a href="#">nunc sit amet</a></li> <li class="parent"><a href="#">in aliquam orci</a> <ul class='children'> <li class="parent"><a href="#">page level 03 v2</a> <ul class='children'> <li><a href="#">page level 04 v2</a></li> <li><a href="#">proin sed nisi sapien v2</a></li> </ul> </li> <li><a href="#">curabitur ultricies</a></li> </ul> </li> <li><a href="#">integer dignissim</a></li> <li><a href="#">praesent euismod tortor</a></li> </ul> </li> <li><a href="#">vestibulum quis velit</a></li> <li><a href="#">aliquam lacinia</a></li> <li class="parent"><a href="#">ut porttitor ipsum</a> <ul class='children'> <li class="parent"><a href="#">page level 01 v1</a> <ul class='children'> <li><a href="#">page level 02 v1</a></li> <li><a href="#">proin sed nisi sapien v1</a></li> </ul> </li> <li><a href="#">curabitur ultricies</a></li> </ul> </li> <li><a href="#">mauris sit amet</a></li> <li><a href="#">praesent</a></li> <li><a href="#">nullam ornare</a></li> </ul> </li> </ul> </div> css code:
.megamenu_container { height:55px; line-height:55px; margin:0; position:relative; float:left; z-index:9; background:#d55c4b; margin:0 17px 0 0; padding:0 39px; text-align:left; } .megamenu_container { text-decoration: none; } .megamenu_main { list-style:none; padding:0; margin:0; } .megamenu li.top_level { list-style:none; background:none; } .megamenu .top_level > span { color:#fff; line-height:55px; outline:0; text-decoration:none; } .megamenu .top_level > span { color:#fff; } .megamenu_main, .megamenu_main ul { position:absolute; top:-9999em; left:-9999em; width:167px; margin:0 0 40px -1px; padding:0; -webkit-box-shadow: 0 2px 5px #bbb; -moz-box-shadow: 0 2px 5px #bbb; -o-box-shadow: 0 2px 5px #bbb; box-shadow: 0 2px 5px #bbb; border:none; border-top:5px solid #d04734; background:#fff; display:none; } .megamenu > li:hover .megamenu_main { top:55px; left:1px; display:block; } .megamenu > li .megamenu_main_over { top:55px; left:1px; display: block; } .megamenu_main li:hover > ul { top:-5px; left:100%; display:block; } .megamenu_main ul.children_over, .megamenu_main li.addmenu ul.children { top:-5px; left:100%; display:block; } .megamenu_main li:hover > .left_dropdown { left:-100%; } .megamenu_slide { top:30px; -webkit-transition: top 0.3s 0.2s, opacity 0 0.2s; -moz-transition: top 0.3s 0.2s, opacity 0 0.2s; -o-transition: top 0.3s 0.2s, opacity 0 0.2s; -ms-transition: top 0.3s 0.2s, opacity 0 0.2s; transition: top 0.3s 0.2s, opacity 0 0.2s; } .megamenu_slide ul { left:80%; -webkit-transition: left 0.2s 0.2s, opacity 0 0.2s; -moz-transition: left 0.2s 0.2s, opacity 0 0.2s; -o-transition: left 0.2s 0.2s, opacity 0 0.2s; -ms-transition: left 0.2s 0.2s, opacity 0 0.2s; transition: left 0.2s 0.2s, opacity 0 0.2s; } .megamenu_slide li > .left_dropdown { left:-80%; } .parent, .megamenu_main .dropdown_arrow { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); background-repeat: no-repeat; background-position: 96% 48%; } .parent:hover, .megamenu_main .dropdown_arrow:hover { background-image:url(http://shop.tree-free.com/secure/images/arrow_right_small.gif); } .megamenu_main li { text-decoration: none; color:#4d4d4d; font-size:12px; } .megamenu_main li { border-bottom:1px solid #e5e5e5; line-height:0.8em; margin:0; padding:9px 27px 9px 13px; } .megamenu_main li a:hover { color:#d04734; } .megamenu_main > li { font-weight:bold; } .megamenu_main > li ul { list-style: none; padding:0; margin:0; min-height:408px; } .megamenu_main > li ul li { font-weight:normal; } .main_opened li, .megamenu_main > li ul li { position:static; -webkit-transition: background-color 0.3s; -moz-transition: background-color 0.3s; -o-transition: background-color 0.3s; -ms-transition: background-color 0.3s; transition: background-color 0.3s; }
you removing children_over classes on mouseover ($('li.parent ul').removeclass('children_over')) breaking script. instead remove classes sibling trees (i.e. not curernt items parents)
you can using line instead:
$(this).siblings().find('ul').removeclass('children_over'); here modified fiddle: http://jsfiddle.net/psfk7/8/
hope helps :)
Comments
Post a Comment