將鼠標懸停在菜單元素，以顯示子菜單

我想創建一個菜單具有子（不是下拉）從幻燈片中左到右，當鼠標懸停;當鼠標移出時從右到左。將鼠標懸停在菜單元素，以顯示子菜單

的jsfiddle：https://jsfiddle.net/z40xo01d/4/

兩個垂直菜單並排側：

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的代碼：

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

來源

2016-01-21 Prokaryote

的jsfiddle請.. –

@JeremyRajan JSFifddle現在發佈。 – Prokaryote

也許這樣？

更新時間：

jsFiddle Demo

$("#projects").hover(function(){ 
    $("#proj_menu").animate({ 
     left: '120px' 
    }); 
}); 

$("#proj_menu").hover(function(){},function(){ 
    $("#proj_menu").animate({ 
     left: '-170px' 
    }); 
});

來源

2016-01-21 03:55:01 gibberish

需要一些tweeks，但指出我在正確的方向，謝謝！爲我節省了一些時間:) – Prokaryote

以下CSS類添加到proj_menu

.menu2col li { 
    width: 155px !important; 
    float: left !important; 
    margin-right: 10px !important; 
    /*display:inline-block !important;*/ 
}

希望對大家的作品..

來源

2016-01-21 04:04:31 NidhinSPradeep

將鼠標懸停在菜單元素，以顯示子菜單

回答

相關問題