創建一個下拉菜單的JavaScript

問題有關的邏輯在這裏：創建一個下拉菜單的JavaScript

什麼是最優雅的方式使菜單顯示/消失的onmouseover /的onmouseout？

請參閱以下JsBin：

http://jsbin.com/owayeb/edit#source

菜單默認是隱藏的。

如果用戶將他的光標移動到Link上方，showme（）函數被調用。

當用戶移動光標時，hideme（）函數被調用。

當用戶將鼠標從鏈接移動到菜單上方時，如何讓菜單保持不變？

或者這是錯誤的學派嗎？

來源

2012-04-02 iceteea

假設這是Cascading導航或類似的東西，我會做這樣的事情......

<style type="text/css"> 
ul#nav li { 
    position: relative; 
    height: 20px; 
} 
ul#nav li ul { 
    display: none; 
    position: absolute; 
    top: 20px; 
} 
ul#nav li.selected ul { display: block; } 
</style> 

<ul id="nav"> 
<li> 
    <a href="#" title="Link">Link</a> 
    <ul> 
     <li><a href="#" title="">Hi There!</a></li> 
     <li><a href="#" title="">Secone Nav Item</a></li> 
     ... 
    </ul> 
</li> 
</ul>

在你的列表中的項目的onmouseover狀態，您將添加.selected類#nav從而導致將顯示所有的兒童UL。由於UL子元素在ul＃nav內，因此當您翻轉孩子時，您的懸停狀態仍然處於活動狀態。

顯然你需要調整CSS來匹配你想要的外觀，但這是一般的想法。如果您使用的原型JS例如，你的JavaScript看起來是這樣的......

$$('#nav li').each(function(x) { 
    x.onmouseover = function() { $(this).addClassName('selected'); } 
    x.onmouseout = function() { $(this).removeClassName('selected'); } 
});

來源

2012-04-02 16:35:40

你可以在相同的onmouseover監聽器添加到落DIV，使其保持打開狀態：

<div id="drop" class="dropdown" onmouseover="showme('drop')" onmouseout="hideme('drop')"> 
    Hi there! 
    </div>

來源

2012-04-02 16:23:55

我所做的是用最好的，最簡單的辦法：懸停選擇保持顯示的子菜單。

這是我會怎麼做呢：
1.在CSS定義菜單結構

<ul id='menu'> 
    <li>Menu Item</li> 
    <ul id='submenu'> 
    <li>Sub menu item 1</li> 
    <li>Sub menu item 2</li> 
    </ul> 
</ul>

隱藏子菜單，定義菜單：懸停離開顯示：塊
連接到菜單項，onmouseover顯示子菜單（你可能只需切換一個類或其他東西，並在5秒後再次切換。）
希望這對你有用。這裏的想法是，您將鼠標懸停在菜單項上以顯示子菜單，然後懸停選擇器將保持菜單顯示，最後當用戶懸停時懸停選擇器停止。

不記得我以前是怎麼做的，因爲這是一個即時的事情，但這個想法就在那裏。

來源

2012-04-02 16:34:30 Norm

不知道這是你在找什麼或沒有，但檢查出來！

http://jsfiddle.net/5NmTB/

讓我知道如果您有任何疑問

來源

2012-04-02 16:51:43 emilyk

我使用superfish jQuery插件打造的Javascript下拉菜單。 Superfish是一個增強的Suckerfish風格的菜單jQuery插件，它採用現有的純CSS下拉菜單（因此它在沒有JavaScript的情況下會優雅地降級）並添加一些有用的增強功能。

來源

2012-04-02 17:26:25 Mojtaba

創建一個下拉菜單的JavaScript

回答

相關問題