html - JQuery Submenu Slide Out -
i have full page height vertical navigation menu , want submenu slide out left menu.
i'd know how convert/modify jsfiddle in post red area main navigation list , grey area sub navigation list (which slides out on hover).
$(".slide").on({ mouseenter: function() { $(this).addclass('hover'); }, mouseleave: function() { $(this).removeclass('hover'); }, click: function() { $(this).toggleclass('active'); } }); $(document).on('click', function(e) { if (!$(e.target).is('.slide') && $('.slide').is('.active')) $('.slide').removeclass('active'); });
the red box main navigation , grey box submenu.
there no mention how navigation constructed have used ul
demonstrate 1 possible way. hope helps.
html:
<ul id="menu"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> <div class="slide"></div>
jquery:
$("#menu li a").on({ mouseenter: function() { $('.slide').addclass('hover'); }, mouseleave: function() { $('.slide').removeclass('hover'); }, click: function() { $('.slide').toggleclass('active'); } });
css:
ul { position: absolute; left: 0; top: 0; z-index: 1; } ul li { display: block; padding: 5px; background: #fff; margin-bottom: 2px; }
demo here
Comments
Post a Comment