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

2019-11-21 01:18:01

字體：大中小

來源：轉載

供稿：網友

]但在《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屬性值。在這里就不多介紹了，完整的源代碼如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head>     <title>通用的二級菜單</title>     <style type="text/css">     #menu     {         width:300px;         margin:auto;     } #div1 { display:none; font-size:12px; position:relative; left:0px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; } #div2 { display:none; font-size:12px; position:relative; left:50px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; } #div3 { display:none; font-size:12px; position:relative; left:120px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; } #div4 { display:none; font-size:12px; position:relative; left:200px; top:0px; background-color:White; padding:5px 10px 0px 10px; width:320px; }     </style>     <script language="javascript" type="text/javascript">      //顯示層      function showDiv(divName)      {      document.getElementById(divName).style.display = "block";      }      //隱藏層      function hiddenDiv(divName)      {      document.getElementById(divName).style.display = "none";      }     </script> </head> <body> <div   class="iwvjtn8m0"   id="menu"> <a href="#" onmouseover="showDiv('div1')" onmouseout="hiddenDiv('div1')">菜單一</a>  |  <a href="#" onmouseover="showDiv('div2')" onmouseout="hiddenDiv('div2')">菜單二</a>  |  <a href="#" onmouseover="showDiv('div3')" onmouseout="hiddenDiv('div3')">菜單三</a>  |  <a href="#" onmouseover="showDiv('div4')" onmouseout="hiddenDiv('div4')">菜單四</a> <div   class="iwvjtn8m0"   id="div1" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> <a href="#">子菜單一</a> </div> <div   class="iwvjtn8m0"   id="div2" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> <a href="#">子菜單一</a> <a href="#">子菜單二</a> </div> <div   class="iwvjtn8m0"   id="div3" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> <a href="#">子菜單一</a> <a href="#">子菜單二</a> <a href="#">子菜單三</a> </div> <div   class="iwvjtn8m0"   id="div4" onmouseover="showDiv(this.id)" onmouseout="hiddenDiv(this.id)"> <a href="#">子菜單一</a> <a href="#">子菜單二</a> <a href="#">子菜單三</a> <a href="#">子菜單四</a> </div> </div> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

以上代碼在IE 7、Opera 9.6、Firefox 3、Flock 2下運行正常，源代碼下載
http://xiazai.VeVB.COm/200906/yuanma/js_erjicaidan.rar

上一篇：頁面中body onload 和 window.onload 沖突的問題的解決

下一篇：JavaScript XML操作封裝類