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).

http://jsfiddle.net/1hdtkcpf/

$(".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

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -