通用的二級菜單代碼(css+javascript)

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

]但在《CSS二級菜單》中，如果一級菜單中的超連結是#，那麼只要單擊該一級菜單，那麼與這個一級菜單對應的二級菜單就會一直顯示在網頁中，不能隱藏，是一個小小的bug。
後來仔細的想了一想，其實，無論是什麼樣的二級菜單，原理都是一樣的：
1、每一個一級菜單都會對應一個層，而這個層裡放著的就是該一級菜單對應的二級菜單。
2、預設情況下，二級菜單這個層是隱藏的，在CSS中將層的display屬性值設為none，可以達到這一目的。
3、當滑鼠放在一級菜單上時，將對應的二級菜單層顯示出來，在CSS中將層的display屬性值設為block，可以達到這一目的。
4、當滑鼠從一級菜單中移開時，對應的二級菜單層隱藏。
5、當然，如果滑鼠從一級菜單移到二級菜單上時，二級菜單也不能隱藏，因此，對二級菜單而言，也必須將其設為，當滑鼠在其上時顯示當前層，當滑鼠移開時隱藏當前層。
好了，有了基本思路之後，我們就可以開始動手建立二級菜單了。
首先，建立一個層，這個層用於包含所有的一級菜單和二級菜單。之所以要建立這個層，是為了可以方便地對整個菜單進行設定，比較說讓菜單層中顯示，或讓菜單居右顯示等等，
代碼如下所示：複製代碼代碼如下:<div id="menu">
</div>

然後，在menu層裡添加一級菜單，這個一級菜單可以是直接的超連結，也可以是span或div。也許有人要問，一級菜單不就是超連結嗎？的確可以這麼說，但是你也同樣可以將超連結作用在span或div上，而使用span或div還有一個好處，這個好處在後面再說，在這裡，我們還是簡單地添加幾個超連結吧。複製代碼代碼如下:<div id="menu">
<a href="#">菜單一</a> |
<a href="#">菜單二</a> |
</div>

第三步，在menu層裡添加二級菜單層，如下所示。複製代碼代碼如下:<div id="menu">
<a href="#">菜單一</a> |
<a href="#">菜單二</a> |
<div id="div1">
<a href="#">子功能表一</a>
</div>
<div id="div2">
<a href="#">子功能表一</a>
<a href="#">子功能表二</a>
</div>
</div>

為什麼要將二級菜單層放在menu層中呢？因為這樣做可以方便的設定二級菜單層的位置。

第四步，使用CSS設定二級菜單層的位置。通常設定一個層的位置都會使用到CSS的position屬性，這個屬性值常用的有relative、absolute和fixed三種。其中absolute為絕對位置，使用這種方式設定層的位置時，該層是以整個<body>為基礎定位，因此，如果瀏覽器視窗大小改變時，層的位置是會變動的；fixed是相對定位，而這個“相對”是相對瀏覽器視窗的定位，假設層離瀏覽器視窗頂部10像素時，無論怎麼拖動捲軸，這個層都會在離瀏覽器視窗頂部10像素的位置出現，即會一直顯示在瀏覽器視窗中。relative也是相對定位，在這個相對定位是相對這個層的原來的位置的定位。在relative模式下，瀏覽器會先輸出層的位置，再相對這個層的位置進行位移，這也就是我們為什麼將二級菜單層放在menu層中的原因。因為二級菜單層一旦產生，它只能相對以前的位置位移，所以瀏覽器視窗再怎麼變化，也不會影響到層的位置。由於二級菜單層所在位置不同，所以要為每一個二級菜單層設定不同的位移量，如下所示。複製代碼代碼如下:<style type="text/css">
#div1
{
display:none;
position:relative;
left:0px;
top:0px;
width:320px;
}
#div2
{
display:none;
position:relative;
left:50px;
top:0px;
width:320px;
}
</style>
<div id="menu">
<a href="#">菜單一</a> |
<a href="#">菜單二</a> |
<div id="div1">
<a href="#">子功能表一</a>
</div>
<div id="div2">
<a href="#">子功能表一</a>
<a href="#">子功能表二</a>
</div>
</div>

在以上代碼中，CSS中的display將層設為隱藏、postion將層設為相對原來位置位移、left和top設定位移量，width設定層的寬度。當然，只要你願意，還可以設定其他屬性，如字型大小等，這就不多介紹了。在這裡，需要注意的是，二級菜單層不能離一級菜單太遠。前面介紹過，當滑鼠從一級菜單移到二級菜單中時，二級菜單層是不能隱藏的。如果一級菜單離二級菜單層太遠，滑鼠剛從一級菜單上移開時，二級菜單層就已經隱藏了，這就達不到二級菜單的目的了。因此，必須要保證滑鼠從一級菜單移到二級菜單層上時，二級菜單層來不及隱藏。這就需要使用到二個技巧了：第一、二級菜單層不能離一級菜單太遠，如本例所示，二級菜單層的top屬性值為0px，這樣滑鼠從一級菜單移到二級菜單上時，二級菜單來不及隱藏。第二、將一級菜單放在<div>或<span>中，這樣只要滑鼠在<div>或<span>上時，二級菜單層都不會隱藏，這樣看起來一級菜單和二級菜單層之間似乎挺遠的，但事實二級菜單層和一級菜單層之間是十分相近，甚至有可能這兩個層之間都有重疊。

第五步、設定一級菜單和二級菜單層的onmouseover和onmouseout屬性，用於控制二級菜單層的顯示和隱藏，這主要是設定二級菜單層的display屬性值。在這裡就不多介紹了，完整的原始碼如下所示： xmlns="http://www.w3.org/1999/xhtml" >

菜單一
|
菜單二
|
菜單三
|
菜單四

子功能表一子功能表一
子功能表二子功能表一
子功能表二
子功能表三子功能表一
子功能表二
子功能表三
子功能表四

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More