通用的二級(jí)菜單代碼(css+javascript)
更新時(shí)間：2009年07月01日 01:17:18 作者：
前幾天做網(wǎng)站使用到二級(jí)菜單，想也沒想就在網(wǎng)上當(dāng)了幾個(gè)，不過大多都不太滿意，只有《CSS二級(jí)菜單》看上去似乎好一點(diǎn)，就使用了那個(gè)。
]但在《CSS二級(jí)菜單》中，如果一級(jí)菜單中的超鏈接是#，那么只要單擊該一級(jí)菜單，那么與這個(gè)一級(jí)菜單對(duì)應(yīng)的二級(jí)菜單就會(huì)一直顯示在網(wǎng)頁(yè)中，不能隱藏，是一個(gè)小小的bug。
后來仔細(xì)的想了一想，其實(shí)，無論是什么樣的二級(jí)菜單，原理都是一樣的：
1、每一個(gè)一級(jí)菜單都會(huì)對(duì)應(yīng)一個(gè)層，而這個(gè)層里放著的就是該一級(jí)菜單對(duì)應(yīng)的二級(jí)菜單。
2、默認(rèn)情況下，二級(jí)菜單這個(gè)層是隱藏的，在CSS中將層的display屬性值設(shè)為none，可以達(dá)到這一目的。
3、當(dāng)鼠標(biāo)放在一級(jí)菜單上時(shí)，將對(duì)應(yīng)的二級(jí)菜單層顯示出來，在CSS中將層的display屬性值設(shè)為block，可以達(dá)到這一目的。
4、當(dāng)鼠標(biāo)從一級(jí)菜單中移開時(shí)，對(duì)應(yīng)的二級(jí)菜單層隱藏。
5、當(dāng)然，如果鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單上時(shí)，二級(jí)菜單也不能隱藏，因此，對(duì)二級(jí)菜單而言，也必須將其設(shè)為，當(dāng)鼠標(biāo)在其上時(shí)顯示當(dāng)前層，當(dāng)鼠標(biāo)移開時(shí)隱藏當(dāng)前層。
好了，有了基本思路之后，我們就可以開始動(dòng)手創(chuàng)建二級(jí)菜單了。
首先，創(chuàng)建一個(gè)層，這個(gè)層用于包含所有的一級(jí)菜單和二級(jí)菜單。之所以要?jiǎng)?chuàng)建這個(gè)層，是為了可以方便地對(duì)整個(gè)菜單進(jìn)行設(shè)置，比較說讓菜單層中顯示，或讓菜單居右顯示等等，
代碼如下所示：
<div id="menu">
</div>
然后，在menu層里添加一級(jí)菜單，這個(gè)一級(jí)菜單可以是直接的超鏈接，也可以是span或div。也許有人要問，一級(jí)菜單不就是超鏈接嗎？的確可以這么說，但是你也同樣可以將超鏈接作用在span或div上，而使用span或div還有一個(gè)好處，這個(gè)好處在后面再說，在這里，我們還是簡(jiǎn)單地添加幾個(gè)超鏈接吧。
<div id="menu">
<a href="#">菜單一</a> |
<a href="#">菜單二</a> |
</div>
第三步，在menu層里添加二級(jí)菜單層，如下所示。
<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>
為什么要將二級(jí)菜單層放在menu層中呢？因?yàn)檫@樣做可以方便的設(shè)置二級(jí)菜單層的位置。
第四步，使用CSS設(shè)置二級(jí)菜單層的位置。通常設(shè)置一個(gè)層的位置都會(huì)使用到CSS的position屬性，這個(gè)屬性值常用的有relative、absolute和fixed三種。其中absolute為絕對(duì)定位，使用這種方式設(shè)置層的位置時(shí)，該層是以整個(gè)<body>為基礎(chǔ)定位，因此，如果瀏覽器窗口大小改變時(shí)，層的位置是會(huì)變動(dòng)的；fixed是相對(duì)定位，而這個(gè)“相對(duì)”是相對(duì)瀏覽器窗口的定位，假設(shè)層離瀏覽器窗口頂部10像素時(shí)，無論怎么拖動(dòng)滾動(dòng)條，這個(gè)層都會(huì)在離瀏覽器窗口頂部10像素的位置出現(xiàn)，即會(huì)一直顯示在瀏覽器窗口中。relative也是相對(duì)定位，在這個(gè)相對(duì)定位是相對(duì)這個(gè)層的原來的位置的定位。在relative模式下，瀏覽器會(huì)先輸出層的位置，再相對(duì)這個(gè)層的位置進(jìn)行偏移，這也就是我們?yōu)槭裁磳⒍?jí)菜單層放在menu層中的原因。因?yàn)槎?jí)菜單層一旦產(chǎn)生，它只能相對(duì)以前的位置偏移，所以瀏覽器窗口再怎么變化，也不會(huì)影響到層的位置。由于二級(jí)菜單層所在位置不同，所以要為每一個(gè)二級(jí)菜單層設(shè)置不同的偏移量，如下所示。
<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將層設(shè)為隱藏、postion將層設(shè)為相對(duì)原來位置偏移、left和top設(shè)置偏移量，width設(shè)置層的寬度。當(dāng)然，只要你愿意，還可以設(shè)置其他屬性，如字體大小等，這就不多介紹了。在這里，需要注意的是，二級(jí)菜單層不能離一級(jí)菜單太遠(yuǎn)。前面介紹過，當(dāng)鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單中時(shí)，二級(jí)菜單層是不能隱藏的。如果一級(jí)菜單離二級(jí)菜單層太遠(yuǎn)，鼠標(biāo)剛從一級(jí)菜單上移開時(shí)，二級(jí)菜單層就已經(jīng)隱藏了，這就達(dá)不到二級(jí)菜單的目的了。因此，必須要保證鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單層上時(shí)，二級(jí)菜單層來不及隱藏。這就需要使用到二個(gè)技巧了：第一、二級(jí)菜單層不能離一級(jí)菜單太遠(yuǎn)，如本例所示，二級(jí)菜單層的top屬性值為0px，這樣鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單上時(shí)，二級(jí)菜單來不及隱藏。第二、將一級(jí)菜單放在<div>或<span>中，這樣只要鼠標(biāo)在<div>或<span>上時(shí)，二級(jí)菜單層都不會(huì)隱藏，這樣看起來一級(jí)菜單和二級(jí)菜單層之間似乎挺遠(yuǎn)的，但事實(shí)二級(jí)菜單層和一級(jí)菜單層之間是十分相近，甚至有可能這兩個(gè)層之間都有重疊。
第五步、設(shè)置一級(jí)菜單和二級(jí)菜單層的onmouseover和onmouseout屬性，用于控制二級(jí)菜單層的顯示和隱藏，這主要是設(shè)置二級(jí)菜單層的display屬性值。在這里就不多介紹了，完整的源代碼如下所示：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
以上代碼在IE 7、Opera 9.6、Firefox 3、Flock 2下運(yùn)行正常，源代碼下載
http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar
后來仔細(xì)的想了一想，其實(shí)，無論是什么樣的二級(jí)菜單，原理都是一樣的：
1、每一個(gè)一級(jí)菜單都會(huì)對(duì)應(yīng)一個(gè)層，而這個(gè)層里放著的就是該一級(jí)菜單對(duì)應(yīng)的二級(jí)菜單。
2、默認(rèn)情況下，二級(jí)菜單這個(gè)層是隱藏的，在CSS中將層的display屬性值設(shè)為none，可以達(dá)到這一目的。
3、當(dāng)鼠標(biāo)放在一級(jí)菜單上時(shí)，將對(duì)應(yīng)的二級(jí)菜單層顯示出來，在CSS中將層的display屬性值設(shè)為block，可以達(dá)到這一目的。
4、當(dāng)鼠標(biāo)從一級(jí)菜單中移開時(shí)，對(duì)應(yīng)的二級(jí)菜單層隱藏。
5、當(dāng)然，如果鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單上時(shí)，二級(jí)菜單也不能隱藏，因此，對(duì)二級(jí)菜單而言，也必須將其設(shè)為，當(dāng)鼠標(biāo)在其上時(shí)顯示當(dāng)前層，當(dāng)鼠標(biāo)移開時(shí)隱藏當(dāng)前層。
好了，有了基本思路之后，我們就可以開始動(dòng)手創(chuàng)建二級(jí)菜單了。
首先，創(chuàng)建一個(gè)層，這個(gè)層用于包含所有的一級(jí)菜單和二級(jí)菜單。之所以要?jiǎng)?chuàng)建這個(gè)層，是為了可以方便地對(duì)整個(gè)菜單進(jìn)行設(shè)置，比較說讓菜單層中顯示，或讓菜單居右顯示等等，
代碼如下所示：
復(fù)制代碼 代碼如下:
<div id="menu">
</div>
然后，在menu層里添加一級(jí)菜單，這個(gè)一級(jí)菜單可以是直接的超鏈接，也可以是span或div。也許有人要問，一級(jí)菜單不就是超鏈接嗎？的確可以這么說，但是你也同樣可以將超鏈接作用在span或div上，而使用span或div還有一個(gè)好處，這個(gè)好處在后面再說，在這里，我們還是簡(jiǎn)單地添加幾個(gè)超鏈接吧。
復(fù)制代碼 代碼如下:
<div id="menu">
<a href="#">菜單一</a> |
<a href="#">菜單二</a> |
</div>
第三步，在menu層里添加二級(jí)菜單層，如下所示。
復(fù)制代碼 代碼如下:
<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>
為什么要將二級(jí)菜單層放在menu層中呢？因?yàn)檫@樣做可以方便的設(shè)置二級(jí)菜單層的位置。
第四步，使用CSS設(shè)置二級(jí)菜單層的位置。通常設(shè)置一個(gè)層的位置都會(huì)使用到CSS的position屬性，這個(gè)屬性值常用的有relative、absolute和fixed三種。其中absolute為絕對(duì)定位，使用這種方式設(shè)置層的位置時(shí)，該層是以整個(gè)<body>為基礎(chǔ)定位，因此，如果瀏覽器窗口大小改變時(shí)，層的位置是會(huì)變動(dòng)的；fixed是相對(duì)定位，而這個(gè)“相對(duì)”是相對(duì)瀏覽器窗口的定位，假設(shè)層離瀏覽器窗口頂部10像素時(shí)，無論怎么拖動(dòng)滾動(dòng)條，這個(gè)層都會(huì)在離瀏覽器窗口頂部10像素的位置出現(xiàn)，即會(huì)一直顯示在瀏覽器窗口中。relative也是相對(duì)定位，在這個(gè)相對(duì)定位是相對(duì)這個(gè)層的原來的位置的定位。在relative模式下，瀏覽器會(huì)先輸出層的位置，再相對(duì)這個(gè)層的位置進(jìn)行偏移，這也就是我們?yōu)槭裁磳⒍?jí)菜單層放在menu層中的原因。因?yàn)槎?jí)菜單層一旦產(chǎn)生，它只能相對(duì)以前的位置偏移，所以瀏覽器窗口再怎么變化，也不會(huì)影響到層的位置。由于二級(jí)菜單層所在位置不同，所以要為每一個(gè)二級(jí)菜單層設(shè)置不同的偏移量，如下所示。
復(fù)制代碼 代碼如下:
<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將層設(shè)為隱藏、postion將層設(shè)為相對(duì)原來位置偏移、left和top設(shè)置偏移量，width設(shè)置層的寬度。當(dāng)然，只要你愿意，還可以設(shè)置其他屬性，如字體大小等，這就不多介紹了。在這里，需要注意的是，二級(jí)菜單層不能離一級(jí)菜單太遠(yuǎn)。前面介紹過，當(dāng)鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單中時(shí)，二級(jí)菜單層是不能隱藏的。如果一級(jí)菜單離二級(jí)菜單層太遠(yuǎn)，鼠標(biāo)剛從一級(jí)菜單上移開時(shí)，二級(jí)菜單層就已經(jīng)隱藏了，這就達(dá)不到二級(jí)菜單的目的了。因此，必須要保證鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單層上時(shí)，二級(jí)菜單層來不及隱藏。這就需要使用到二個(gè)技巧了：第一、二級(jí)菜單層不能離一級(jí)菜單太遠(yuǎn)，如本例所示，二級(jí)菜單層的top屬性值為0px，這樣鼠標(biāo)從一級(jí)菜單移到二級(jí)菜單上時(shí)，二級(jí)菜單來不及隱藏。第二、將一級(jí)菜單放在<div>或<span>中，這樣只要鼠標(biāo)在<div>或<span>上時(shí)，二級(jí)菜單層都不會(huì)隱藏，這樣看起來一級(jí)菜單和二級(jí)菜單層之間似乎挺遠(yuǎn)的，但事實(shí)二級(jí)菜單層和一級(jí)菜單層之間是十分相近，甚至有可能這兩個(gè)層之間都有重疊。
第五步、設(shè)置一級(jí)菜單和二級(jí)菜單層的onmouseover和onmouseout屬性，用于控制二級(jí)菜單層的顯示和隱藏，這主要是設(shè)置二級(jí)菜單層的display屬性值。在這里就不多介紹了，完整的源代碼如下所示：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
以上代碼在IE 7、Opera 9.6、Firefox 3、Flock 2下運(yùn)行正常，源代碼下載
http://xiazai.jb51.net/200906/yuanma/js_erjicaidan.rar
您可能感興趣的文章:
- 簡(jiǎn)單實(shí)現(xiàn)js點(diǎn)擊展開二級(jí)菜單功能
- vue.js 左側(cè)二級(jí)菜單顯示與隱藏切換的實(shí)例代碼
- 鼠標(biāo)經(jīng)過顯示二級(jí)菜單js特效
- JS二級(jí)菜單不同實(shí)現(xiàn)方法分析【4種方法】
- javascript鼠標(biāo)滑過顯示二級(jí)菜單特效
- js實(shí)現(xiàn)向右橫向滑出的二級(jí)菜單效果
- vue.js實(shí)現(xiàn)二級(jí)菜單效果
- JS實(shí)現(xiàn)超精簡(jiǎn)響應(yīng)鼠標(biāo)顯示二級(jí)菜單代碼
- js實(shí)現(xiàn)二級(jí)菜單點(diǎn)擊顯示當(dāng)前內(nèi)容效果
- js仿小米二級(jí)菜單顯示效果
相關(guān)文章
JavaScript CSS創(chuàng)建右擊菜單效果代碼
右擊菜單效果2008-12-12
2008-05-05
二級(jí)樹形菜單示例：CSS TreeMenu ，非常漂亮的樹形菜單，用在網(wǎng)站右側(cè)比較合適。2010-11-11
javascript實(shí)現(xiàn)操作cookie實(shí)現(xiàn)的可記憶菜單
javascript實(shí)現(xiàn)操作cookie實(shí)現(xiàn)的可記憶菜單...2007-07-07
用js實(shí)現(xiàn)網(wǎng)頁(yè)上模仿桌面右鍵菜單
用js實(shí)現(xiàn)網(wǎng)頁(yè)上模仿桌面右鍵菜單...2007-03-03
js伸縮效果代碼2008-05-05
騰訊QQ網(wǎng)頁(yè)在線客服，隨網(wǎng)頁(yè)滾動(dòng)條上下移動(dòng)的效果一
騰訊QQ網(wǎng)頁(yè)在線客服，隨網(wǎng)頁(yè)滾動(dòng)條上下移動(dòng)的效果一...2007-03-03
CSS JavaScript 實(shí)現(xiàn)菜單功能 改進(jìn)版
通過一個(gè)HTML頁(yè)面簡(jiǎn)單的實(shí)現(xiàn)了菜單功能。但是實(shí)際開發(fā)當(dāng)中，如果菜單欄有很多項(xiàng)，頻繁的修改HTML，會(huì)很繁瑣，也容易出錯(cuò)。2008-12-12
JavaScript 下拉菜單實(shí)現(xiàn)代碼
利用css+js實(shí)現(xiàn)的下拉菜單。通過getElementsByTagName獲取ul,隱藏顯示。2009-05-05
javascript 定時(shí)自動(dòng)切換的選項(xiàng)卡Tab
JavaScript配合CSS制作一個(gè)能自動(dòng) 切換的網(wǎng)頁(yè)選項(xiàng)卡,每隔一段時(shí)間,它就自動(dòng)切換選項(xiàng)卡列表和標(biāo)題,時(shí)間自設(shè).2009-10-10