javascript - css responsive dropdown menu - more levels -
i have responsive dropdown menu.
i want open submenu on hover/toogle. work 2nd submenu.
but when hover 2nd submenu all other submenus open. how prevent menu work correctly?
question:
how open menu on hover/toggle in deeper sub-menus ? (prevent open submenus)
jsfiddle:
html:
<a class="togglemenu" href="#">menu</a> <ul class="menu"> <li class="first activeselected"><a href="#">menu 0</a></li> <li><a href="#">menu 0</a></li> <li><a href="#">menu 0</a> <ul class="level1"> <li class="first"><a href="#">menu 1</a></li> <li><a href="#">menu 1</a></li> <li class="last"><a href="#">menu 1</a> <ul class="level2"> <li class="first"><a href="#">menu 2</a> <ul class="level3"> <li class="first"><a href="#">menu 3</a></li> <li><a href="#">menu 3</a></li> <li><a href="#">menu 3</a> <ul class="level4"> <li class="first"><a href="#">menu 4</a></li> <li><a href="#">menu 4</a></li> <li class="last"><a href="#">menu 4</a></li> </ul> </li> <li><a href="#">menu 3</a></li> <li class="last"><a href="#">menu 3</a></li> </ul> </li> <li><a href="#">menu 2</a></li> <li class="last"><a href="#">menu 2</a></li> </ul> </li> </ul> </li> <li><a href="#">menu 0</a></li> <li class="last"><a href="#">menu 0</a></li> </ul> css:
body, nav {margin: 0; padding: 0;} body {font-family: "helvetica neue", helvetica, arial, sans-serif; } .container { width: 90%; max-width: 900px; margin: 10px auto; } {text-decoration: none;} ul, li, {margin: 0; padding: 0;} .togglemenu { display: none; background: #111; padding: 10px 15px; color: #fff; } .menu { list-style: none; *zoom: 1; background:#111; } .menu:before, .menu:after { content: " "; display: table; } .menu:after { clear: both; } .menu ul { list-style: none; width: 9em; } .menu { padding: 10px 15px; color:#fff; } .menu li { position: relative; } .menu > li { float: left; border-top: 1px solid #000; } .menu > li > .parent { background-image: url("images/downarrow.png"); background-repeat: no-repeat; background-position: right; } .menu > li > { display: block; } .menu li ul { position: absolute; left: -9999px; } .menu > li.hover > ul { left: 0; } .menu li li.hover ul { left: 100%; top: 0; } .menu li li { display: block; background: #222; position: relative; z-index:100; border-top: 1px solid #111; } .menu li li li { background:#333; border-top: 1px solid #222; } .menu li li li li { background:#444; border-top: 1px solid #333; } .menu li li li li li { background:#555; border-top: 1px solid #444; } @media screen , (max-width: 480px) { .active { display: block; } .menu > li { float: none; } .menu > li > .parent { background-position: 95% 50%; } .menu li li .parent { background-image: url("images/downarrow.png"); background-repeat: no-repeat; background-position: 95% 50%; } .menu ul { display: block; width: 100%; } .menu > li.hover > ul , .menu li li.hover ul { position: static; } } js:
var ww = document.body.clientwidth; $(document).ready(function() { $(".menu li a").each(function() { if ($(this).next().length > 0) { $(this).addclass("parent"); }; }) $(".togglemenu").click(function(e) { e.preventdefault(); $(this).toggleclass("active"); $(".menu").toggle(); }); adjustmenu(); }) $(window).bind('resize orientationchange', function() { ww = document.body.clientwidth; adjustmenu(); }); var adjustmenu = function() { if (ww < 480) { $(".togglemenu").css("display", "inline-block"); if (!$(".togglemenu").hasclass("active")) { $(".menu").hide(); } else { $(".menu").show(); } $(".menu li").unbind('mouseenter mouseleave'); $(".menu li a.parent").unbind('click').bind('click', function(e) { // must attached anchor element prevent bubbling e.preventdefault(); $(this).parent("li").toggleclass("hover"); }); } else if (ww >= 480) { $(".togglemenu").css("display", "none"); $(".menu").show(); $(".menu li").removeclass("hover"); $(".menu li a").unbind('click'); $(".menu li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() { // must attached li mouseleave not triggered when hover on submenu $(this).toggleclass('hover'); }); } }
in css please change
.menu li li.hover ul { left: 100%; top: 0; } to
.menu li li.hover > ul { left: 100%; top: 0; } this seems work need more fine tuning. far have been able understand problem. related accessing immediate child.
Comments
Post a Comment