菜單子菜單懸停

Question

說明：我已經建立，當用戶將鼠標懸停在菜單它顯示一個子菜單的菜單。 （該菜單使用jQuery）。另外，我的菜單的設置方式是，如果用戶將鼠標懸停在菜單上的某個div上，jQuery將使用該div名稱並附加一個子菜單ID，該ID指示jQuery顯示哪個子菜單div。

jQuery的使用：

$(function() { 
    $('#nav div').hover(function() { 
     var menu_name = $(this).attr('id'); //gets current div id 
     sub_menu_name = '.sub_' + menu_name; //creates the sub menu that matches that div menu 
     $(sub_menu_name).css('display', 'block'); 
    }, function() { 
     $(sub_menu_name).css('display', 'none'); 
    });  
}); 

的jsfiddle鏈接：請查看：

[1]：http://jsfiddle.net/tech_noob/nXR5Y/1/地看到，我用這個菜單中的所有代碼。

問題：當用戶懸停在菜單上並嘗試將鼠標懸停在子菜單上時，子菜單也會消失。如果用戶將鼠標懸停在子菜單上，並且只有在用戶遠離子菜單或移動到新的菜單鏈接時，我才希望子菜單保持原狀。如果可能的話，我還想保留我在HTML中使用的代碼結構（例如，我已經看到其他菜單，開發人員使用子菜單作爲子菜單作爲相應菜單鏈接父項）。

側面說明：在我的本地主機的UI顯示在各自菜單鏈接的子菜單上的jsfiddle，子菜單關閉。不確定爲什麼，但這是一個小問題。

Answer 1

這比你有什麼長一點，但它處理所有，如果您需要儘可能它也處理的菜單和子菜單，只要你保持這些名稱花莖。如果您更改名稱，那麼您需要更改代碼。

Example

// a little prep work would really help make this easier 
// something like: 
var tmrMenu; // used to keep submenu open long enough for hover over 
// select only menu items via class name 
// and add data variable containing the element you want 
//  you could also hard code this in HTML like: <div data-sub-menu=".sub_menu_1" ... 
//  and later select it using something like: $($('menu_1').data('sub-menu')) 
$("#nav [class^='menu_']").each(function(i) { $(this).data('subMenu', $('#nav .sub_' + $(this).attr('id'))); }) 
// now each menu has its sub-menu directly associated 
// we continue the chain 
.on('mouseenter', function(e) { 
    clearTimeout(tmrMenu); // clears hiding timer 
    var sub = $(this).data('subMenu'); 
    $("#nav [class^='sub_menu']").not(sub).hide(); // ensure siblings are hidden 
    sub.show(); 
}) 
.on('mouseleave', function(e) { 
    var $this = $(this); 
    tmrMenu = setTimeout(function() { 
     $this.data('subMenu').hide(); 
    }, 250); // a decent amount of time to reach a sub menu 
}); 

// now a little work on sub-menus 
$("#nav [class^='sub_menu']").on('mouseenter', function(e) { 
    clearTimeout(tmrMenu); // clears hiding timer 
}) 
.on('mouseleave', function(e) { 
    var $this = $(this); 
    tmrMenu = setTimeout(function() { $this.hide(); }, 250); 
}); 

Example

其餘的一切都取決於你和CSS！希望這可以幫助！請享用！

Answer 2

你已經過於複雜的自己這一點。這可以並且應該用不同的HTML（嵌入式UL）和CSS完成，根本不需要jQuery。請參閱my example，它使用的代碼少得多，並且是由CSS驅動的。

HTML：

<ul id="nav"> 
    <li>Menu 1 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a></li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </div> 
    </li> 
    <li>Menu 2 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item A</a></li> 
       <li><a href="#">Sub Menu Item B</a></li> 
       <li><a href="#">Sub Menu Item C</a></li> 
      </ul> 
     </div> 
    </li> 
    <li>Menu 3 
     <div> 
      <ul> 
       <li><a href="#">Sub Menu Item X</a></li> 
      </ul> 
     </div> 
    </li> 
</ul> 

CSS：

body, 
html { 
    padding: 10px; 
} 
ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 
li { 
    padding: 0; 
} 
#nav { 
    position: relative; 
    height: 30px; 
    float: left; 
    cursor: default; 
} 
#nav > li { 
    font-size: 120%; 
    font-weight: bold; 
    background: #ccc000; 
    height: 50px; 
    width: 150px; 
    float: left; 
    text-align: center; 
    border: 1px solid #000; 
    line-height: 2.2; 
} 
#nav > li > div { 
    position: absolute; 
    left: 0; 
    top: 50px; 
    padding: 10px 0; 
    width: 100%; 
    font-weight: normal; 
    font-size: 80%; 
    display: none; 
} 
#nav > li:hover > div { 
    display: list-item; 
} 
#nav > li > div > ul { 
    background: orange; 
    width: 250px; 
    border: 1px solid #000; 
    text-align: left; 
    padding: 0 20px; 
} 
a { 
    text-decoration: none; 
    color: #000; 
} 

Answer 3

的事情是，你可以使用純CSS複製此完全相同的效果。您的代碼存在的問題是，當您懸停主菜單時，它僅適用於sub_menu上的「display：block」。而且因爲sub_menu甚至不是主菜單的一部分，所以即使您將鼠標懸停在該菜單上，該功能也不會發生。

就像什麼MiniRagnarok建議，具有子菜單作爲孩子的div將做到這一點的最好辦法。

您可以在主菜單中添加一個通用類，如「菜單」，並在子類菜單中添加子菜單。可以使sub_menu出現使用這種樣式：

.menu:hover .sub_menu{ 
    display: block; 
} 

這裏有一個小提琴：http://jsfiddle.net/nXR5Y/8/

你也應該調整子菜單有點頂端，因爲差距是一個問題。但是如果你真的需要這個差距，你可以把sub_menu放到另一個div中，並將上面的樣式應用到那個div而不是.sub_menu。

希望有所幫助。

Answer 4

請參閱My Example。這是小代碼，並運行wordpress。

HTML：

<div id="ewm_header"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <header id="ewm_header1"> 
        <div class="logo"> 
         <a href="http://cssmenufree.com" title="logo"> 
          <img src="http://cssmenufree.com/img/logo.png" alt="logo" data-retina="http://cssmenufree.com/img/logo@2x.png" width="131" height="21"> 
         </a> 
        </div> 
        <div class="menu-nav right"> 
         <nav class="mainnav" id="mainnav"> 
          <ul class="menu-wrap anima-bottom"> 
           <li class="children"> 
            <a href="#">HOME</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class="children"> 
              <a href="#">HOME VERSION 1</a> 
              <ul class="sub-menu"> 
               <li class=""><a href="#">HOME DARK</a></li> 
               <li class=""><a href="#">HOME LIGHT</a></li> 
              </ul> 
             </li> 
             <li class=""><a href="#">HOME VERSION 2</a></li> 
             <li class=""><a href="#">HOME VERSION 3</a></li> 
            </ul> 
           </li> 
           <li class="children"> 
            <a href="#">ABOUT</a> 
            <ul class="sub-menu" style="margin-left: 0px;"> 
             <li class=""><a href="#">ABOUT VERSION 1</a></li> 
             <li class=""><a href="#">ABOUT VERSION 2</a></li> 
            </ul> 
           </li> 
           <li class=""><a href="#">PORTFOLIO</a></li> 
           <li class=""><a href="#">BLOG</a></li> 
           <li class=""><a href="#">SERVICES</a></li> 
           <li class=""><a href="#">CONTACT</a></li> 
          </ul> 
         </nav> 
        </div> 
       </header> 
      </div> 
     </div> 
    </div> 
</div> 
<span>You can copy code css. It run with menu in wordpress</span> 

CSS：

#ewm_header { 
    background: #011d27; 
    float: left; 
    padding: 15px; 
} 

#ewm_header a { 
    color: #fff; 
    text-decoration: none; 
} 

#ewm_header a:hover { 
    color: #11c21d; 
} 

#ewm_header ul { 
    list-style: none; 
    margin: 0; 
    paddingL 0; 
} 

.logo { 
    float: left; 
    margin-right: 30px; 
} 

.menu-wrap > li { 
    float: left; 
    position: relative; 
    padding: 5px 15px; 
} 

.menu-wrap li ul { 
    position: absolute; 
    visibility: hidden; 
    top: 100%; 
    left: 0; 
    background: #011d27; 
    z-index: 999; 
    width: 200px; 
} 

.menu-wrap li:hover > ul, 
.menu-wrap li ul li:hover ul { 
    visibility: visible; 
} 

.menu-wrap li ul li { 
    padding: 10px 5px; 
} 

.menu-wrap li ul li ul { 
    left: 100%; 
    top: 0; 
}