javascript - Hover over menu element to show submenu -
i trying create menu has sub-menu (not dropdown) slides in left-to-right, when mouseover; , right-to-left when mouseout.
jsfiddle: https://jsfiddle.net/z40xo01d/4/
two vertical menus side-by-side:
html code:
<aside class="nav-container"> <!--main navigation structure--> <ul id="nav-main"> <a href="#"><li class="fa fa-home fa-2x" id="home"></li><br/></a> <a href="#"><li class="fa fa-folder fa-2x" id="projects"></li><br/></a> <a href="#"><li class="fa fa-user fa-2x" id="about"></li><br/></a> <a href="#"><li class="fa fa-envelope fa-2x" id="contact"></li><br/></a> <!--additional navigation buttons--> <div id="nav-additionals"> <a href="#"><p class="fa fa-cogs fa-s" id="settings"></p></a> <a href="#"><p class="fa fa-question fa-s" id="about"></p></a> </div> </ul> <!--projects submenu--> <ul id="proj_menu"> <a href="#"><li class="icon-python"></li></a> <a href="#"><li class="icon-java-bold"></li></a> <a href="#"><li class="icon-csharp"></li></a> <a href="#"><li class="icon-cplusplus"></li></a> <a href="#"><li class="icon-javascript"></li></a> <a href="#"><li class="icon-html"></li></a> <a href="#"><li class="icon-ruby"></li></a> <a href="#"><li class="icon-php"></li></a> </ul> </aside> jquery code:
<script> $("document").ready(function(){ //hides menu when loaded $("#proj_menu").hide(); //shows , hides projects sub menu $("#projects").mouseover(function(){ //if hovered show if($("#projects").is(":hover")){ $("#proj_menu").show(); } //if not hovered hide else if($("#projects").not(":hover")){ $("proj_menu").hide(); } }); }); </script>
perhaps this?
updated:
$("#projects").hover(function(){ $("#proj_menu").animate({ left: '120px' }); }); $("#proj_menu").hover(function(){},function(){ $("#proj_menu").animate({ left: '-170px' }); });
Comments
Post a Comment