高娟 閻知知 黃龍 陸軍工程大學(xué)軍械士官學(xué)校

網(wǎng)頁制作中下拉菜單的制作方法解析

高娟 閻知知 黃龍 陸軍工程大學(xué)軍械士官學(xué)校

在網(wǎng)頁制作中，經(jīng)常會用到下拉菜單。本文通過具體案例詳細(xì)介紹了利用CSS、JavaScript、jQuery技術(shù)實現(xiàn)下拉菜單的3種方法，并對其進(jìn)行了比較。

下拉菜單 CSS JavaScript jQuery

在網(wǎng)頁制作中，經(jīng)常會用到下拉菜單，當(dāng)鼠標(biāo)放在一級導(dǎo)航菜單項上的時候，彈出下拉菜單，當(dāng)鼠標(biāo)移走的時候，下拉菜單消失。如何制作這種具有動態(tài)效果的下拉菜單？作者通過多個項目的工作實踐，總結(jié)出3種方法，下面進(jìn)行詳細(xì)解析。

要制作具有動態(tài)效果的下拉菜單，第一步是靜態(tài)網(wǎng)頁的制作，先制作出具有兩級菜單的靜態(tài)網(wǎng)頁。第二步是動態(tài)效果的實現(xiàn)，主要用來實現(xiàn)下拉菜單的顯示和隱藏。

1 靜態(tài)網(wǎng)頁的制作

制作靜態(tài)網(wǎng)頁主要用到HTML+CSS技術(shù)。首先制作出如圖1所示的二級導(dǎo)航靜態(tài)菜單。

圖1 二級導(dǎo)航靜態(tài)菜單

html代碼如下：＜div id="nav"＞

＜ul＞

＜li＞＜a href="#"＞首頁＜/a＞＜/li＞

＜li＞＜a href="#"＞課程大廳＜/a＞

＜ul＞

＜li＞＜a href="#"＞javaScript＜/a＞＜/li＞

＜li＞＜a href="#"＞jQuery＜/a＞＜/li＞

＜/ul＞

＜/li＞

＜li＞＜a href="#"＞ 學(xué)習(xí)中心 ＜/a＞＜/li＞

＜li＞＜a href="#"＞ 經(jīng)典案例 ＜/a＞＜/li＞

＜li＞＜a href="#"＞ 關(guān)于我們 ＜/a＞＜/li＞

＜/ul＞

＜/div＞

CSS代碼如下：

＜style type="text/css"＞

*{margin:0px; padding:0px;}

#nav{background-color:#eee; width:600px;height:40px; margin:0 auto;}

ul{list-style:none;}

ul li{float:left; line-height:40px; text-align:center;position:relative;}

a{text-decoration: none; color:#000; display:block;padding:0 10px;}

a:hover{color:#fff; background-color:#666;}

ul li ul li{float:none; background-color:#eee;margin-top:2px;}

ul li ul{position:absolute; left:0px; top:40px;}

＜/style＞

靜態(tài)效果實現(xiàn)過程中的難點如下：

①一級菜單項的寬度不能固定，需根據(jù)內(nèi)容自適應(yīng)，所以不用設(shè)置一級菜單項的寬度。

②各一級菜單項之間應(yīng)該有一定的間距，可以通過設(shè)置左右padding值實現(xiàn)，但為了使每個菜單項內(nèi)超鏈接＜a＞的寬度與列表項＜li＞的寬度相等，所以這個padding值設(shè)置在了＜a＞上。

③超鏈接的display屬性默認(rèn)為inline行內(nèi)元素，應(yīng)設(shè)為block塊級元素，這樣當(dāng)鼠標(biāo)移到超鏈接上時，超鏈接所在的整個列表項li的背景區(qū)域都變成顏色#666。

④二級菜單的寬度不能影響它所對應(yīng)的一級菜單項的寬度，因此需要為二級菜單設(shè)置絕對定位位置，而一級菜單項應(yīng)設(shè)為相對定位。

2 動態(tài)效果的實現(xiàn)

當(dāng)鼠標(biāo)放在一級導(dǎo)航菜單項上的時候，彈出下拉菜單，當(dāng)鼠標(biāo)移走的時候，下拉菜單消失，實現(xiàn)這種動態(tài)效果有3種方法。

2.1 CSS方法實現(xiàn)

用CSS方法是通過設(shè)置二級ul的display屬性實現(xiàn)的，初始狀態(tài)的二級ul的display屬性設(shè)為none代表初始不顯示，然后修改二級菜單對應(yīng)的一級菜單項的hover狀態(tài)的display屬性值為block。代碼如下：

ul li ul{position:absolute; left:0px; top:40px;display:none;}

ul li:hover ul{display:block;}

2.2 JavaScript方法實現(xiàn)

用JavaScript方法是通過為一級菜單項添加鼠標(biāo)經(jīng)過onmouseover事件方法和鼠標(biāo)離開onmouseout事件方法實現(xiàn)的。代碼如下：

＜li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"＞＜a href="#"＞課程大廳＜/a＞＜script text="text/javascript"＞function showsubmenu(li){

var submenu = li.getElementsByTagName("ul")[0];submenu.style.display = "block";

}

function hidesubmenu(li){

var submenu = li.getElementsByTagName("ul")[0];submenu.style.display = "none";

}

＜/script＞

2.3 jQuery方法實現(xiàn)

用jQuery方法首先要在html文檔頭部引入jQuery庫，可以引用下載到本機(jī)的jQuery庫文件，也可以引用在線的jQuery庫文件，然后為一級菜單項設(shè)置“類”屬性，最后在jQuery函數(shù)中引用children()方法找到子元素，用show()方法顯示HTML元素，用hide()方法隱藏HTML元素。代碼如下：

＜script src="jquery-1.8.3.min.js"＞＜/script＞

＜li class="navmenu"＞＜a href="#"＞ 課程大廳＜/a＞

＜script type="text/javascript"＞

$(function(){

$(".navmenu").mouseover(function(){

$(this).children("ul").show();

}).mouseout(function(){

$(this).children("ul").hide();

})

})

＜/script＞

3 三種方法的比較

通過以上介紹，我們可以看出，第一種CSS方法最簡單直接，第二種JavaScript方法和第三種jQuery方法的思想是相同的，都是要先找到鼠標(biāo)當(dāng)前所在一級菜單項的二級菜單ul對象，接下來JavaScript方法是通過設(shè)置ul的display屬性來控制二級菜單的顯示和隱藏，而jQuery方法是通過調(diào)用show()和hide()方法來控制二級菜單的顯示和隱藏。另外，用JavaScript方法需要在html標(biāo)簽中加入鼠標(biāo)經(jīng)過事件和鼠標(biāo)離開事件的JavaScript代碼，而用jQuery方法不需要在html標(biāo)簽中加入jQuery代碼，鼠標(biāo)經(jīng)過事件和鼠標(biāo)離開事件的方法在jQuery代碼中，實現(xiàn)了代碼和html標(biāo)簽的完全分離，因此結(jié)構(gòu)更清晰。

至此，我們已經(jīng)利用三種方法實現(xiàn)了二級下拉菜單的顯示和隱藏，大家對下拉菜單的實現(xiàn)一定有了更深刻的理解，在實際網(wǎng)頁制作中，還會遇到三級下拉菜單、變換菜單、動畫菜單等各種下拉菜單的變體，相信大家在實際工作中不斷探索和積累，會對下拉菜單的制作有更多新的發(fā)現(xiàn)。

[1]周靜.福建電腦[J].基于DIV+CSS網(wǎng)頁下拉菜單的實現(xiàn)，2012年第10期.

[2]魏穎穎.計算機(jī)技術(shù)與發(fā)展[J].基于CSS的網(wǎng)頁下拉菜單設(shè)計與實現(xiàn)，2011年第4期.