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

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

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

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

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

下拉菜單 CSS JavaScript jQuery

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

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

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

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

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

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

＜ul＞

＜li＞＜a href="#"＞首頁(yè)＜/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)效果實(shí)現(xiàn)過(guò)程中的難點(diǎn)如下：

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

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

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

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

2 動(dòng)態(tài)效果的實(shí)現(xiàn)

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

2.1 CSS方法實(shí)現(xiàn)

用CSS方法是通過(guò)設(shè)置二級(jí)ul的display屬性實(shí)現(xiàn)的，初始狀態(tài)的二級(jí)ul的display屬性設(shè)為none代表初始不顯示，然后修改二級(jí)菜單對(duì)應(yīng)的一級(jí)菜單項(xià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方法實(shí)現(xiàn)

用JavaScript方法是通過(guò)為一級(jí)菜單項(xiàng)添加鼠標(biāo)經(jīng)過(guò)onmouseover事件方法和鼠標(biāo)離開onmouseout事件方法實(shí)現(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方法實(shí)現(xiàn)

用jQuery方法首先要在html文檔頭部引入jQuery庫(kù)，可以引用下載到本機(jī)的jQuery庫(kù)文件，也可以引用在線的jQuery庫(kù)文件，然后為一級(jí)菜單項(xiàng)設(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 三種方法的比較

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

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

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

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