[英]Hover over menu element to show submenu
I am trying to create a menu that has a sub-menu (Not a dropdown) that slides in from left-to-right, when mouseover; 我正在尝试创建一个菜单 ,该菜单具有一个子菜单 (而不是下拉菜单),当鼠标悬停时该菜单从左向右滑动; and right-to-left when mouseout.
鼠标移出时从右到左。
JSFiddle: https://jsfiddle.net/z40xo01d/4/ JSFiddle: https ://jsfiddle.net/z40xo01d/4/
Two vertical menus side-by-side: 并排的两个垂直菜单:
HTML code: HTML代码:
<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: jQuery代码:
<script>
$("document").ready(function(){
//hides menu when loaded
$("#proj_menu").hide();
//shows and hides projects sub menu
$("#projects").mouseover(function(){
//if it is hovered SHOW
if($("#projects").is(":hover")){
$("#proj_menu").show();
}
//if it is not hovered HIDE
else if($("#projects").not(":hover")){
$("proj_menu").hide();
}
});
});
</script>
Perhaps something like this? 也许像这样?
Updated: 更新:
$("#projects").hover(function(){
$("#proj_menu").animate({
left: '120px'
});
});
$("#proj_menu").hover(function(){},function(){
$("#proj_menu").animate({
left: '-170px'
});
});
add below css class to the proj_menu 在css类下面添加到proj_menu
.menu2col li {
width: 155px !important;
float: left !important;
margin-right: 10px !important;
/*display:inline-block !important;*/
}
hope it may works.. 希望它可以工作..
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.