如何創建一個彈出多列菜單？

我已經爲我的網站提供了一個水平菜單，而且我只想要多列菜單中的部分。這裏是我想要做的一個例子：http://www.cssplay.co.uk/menus/pro-flyout-list.html 如何創建一個彈出多列菜單？

是否有一個網站有一個教程，如何做到這一點，或某種發電機？我希望我的當前菜單保持完好（http://veterinarycare.atspace.cc/）。我只是想能夠懸停和飛出多列部分。看起來與我見過的人一樣，我必須實現他們的水平/垂直條，並且它使得如何分離零件以使其與我的工作混淆。

來源

2012-01-07 punchxcore

我不知道在哪裏可以找到教程，但這裏有一個（非常）一般的指南。

首先，你要安排您的導航欄和彈出一系列的嵌套列表，排序是這樣的：

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Link</a> 
     <ul class="flyout"> 
      <li><a href="#">Sublink 1</a></li> 
      <li><a href="#">Sublink 1</a></li> 
      <li><a href="#">Sublink 1</a></li> 
     </ul> 
    </li> 
</ul>

然後，在你的CSS，你要確保你的風格的彈出像這樣：

.flyout{ 
    display:none; 
    visibility:hidden; 
}

然後，當您將鼠標懸停在父li元素上方時，確保彈出窗口出現。

li:hover .flyout{ 
    display:block; 
    visibility:visible; 
    /* snip */ 
}

然後，它只是一個正確定位的一切，增加款式，一般使導航欄的外觀花哨的事情。

我會嘗試相對定位彈出，並使用top:16px或類似的東西推下它。您可能還想嘗試更改父級li的位置，或更改其在CSS中處理溢出的方式，以避免其無法控制。

下面是演示：http://jsfiddle.net/Deflect/KXHn8/

來源

2012-01-07 04:44:54 Michael0x2a

如何創建一個彈出多列菜單？

回答

相關問題