高娟 阎知知 黄龙 陆军工程大学军械士官学校

网页制作中下拉菜单的制作方法解析

高娟 阎知知 黄龙 陆军工程大学军械士官学校

在网页制作中，经常会用到下拉菜单。本文通过具体案例详细介绍了利用CSS、JavaScript、jQuery技术实现下拉菜单的3种方法，并对其进行了比较。

下拉菜单 CSS JavaScript jQuery

在网页制作中，经常会用到下拉菜单，当鼠标放在一级导航菜单项上的时候，弹出下拉菜单，当鼠标移走的时候，下拉菜单消失。如何制作这种具有动态效果的下拉菜单？作者通过多个项目的工作实践，总结出3种方法，下面进行详细解析。

要制作具有动态效果的下拉菜单，第一步是静态网页的制作，先制作出具有两级菜单的静态网页。第二步是动态效果的实现，主要用来实现下拉菜单的显示和隐藏。

1 静态网页的制作

制作静态网页主要用到HTML+CSS技术。首先制作出如图1所示的二级导航静态菜单。

图1 二级导航静态菜单

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="#"＞ 学习中心 ＜/a＞＜/li＞

＜li＞＜a href="#"＞ 经典案例 ＜/a＞＜/li＞

＜li＞＜a href="#"＞ 关于我们 ＜/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＞

静态效果实现过程中的难点如下：

①一级菜单项的宽度不能固定，需根据内容自适应，所以不用设置一级菜单项的宽度。

②各一级菜单项之间应该有一定的间距，可以通过设置左右padding值实现，但为了使每个菜单项内超链接＜a＞的宽度与列表项＜li＞的宽度相等，所以这个padding值设置在了＜a＞上。

③超链接的display属性默认为inline行内元素，应设为block块级元素，这样当鼠标移到超链接上时，超链接所在的整个列表项li的背景区域都变成颜色#666。

④二级菜单的宽度不能影响它所对应的一级菜单项的宽度，因此需要为二级菜单设置绝对定位位置，而一级菜单项应设为相对定位。

2 动态效果的实现

当鼠标放在一级导航菜单项上的时候，弹出下拉菜单，当鼠标移走的时候，下拉菜单消失，实现这种动态效果有3种方法。

2.1 CSS方法实现

用CSS方法是通过设置二级ul的display属性实现的，初始状态的二级ul的display属性设为none代表初始不显示，然后修改二级菜单对应的一级菜单项的hover状态的display属性值为block。代码如下：

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

ul li:hover ul{display:block;}

2.2 JavaScript方法实现

用JavaScript方法是通过为一级菜单项添加鼠标经过onmouseover事件方法和鼠标离开onmouseout事件方法实现的。代码如下：

＜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方法实现

用jQuery方法首先要在html文档头部引入jQuery库，可以引用下载到本机的jQuery库文件，也可以引用在线的jQuery库文件，然后为一级菜单项设置“类”属性，最后在jQuery函数中引用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方法的思想是相同的，都是要先找到鼠标当前所在一级菜单项的二级菜单ul对象，接下来JavaScript方法是通过设置ul的display属性来控制二级菜单的显示和隐藏，而jQuery方法是通过调用show()和hide()方法来控制二级菜单的显示和隐藏。另外，用JavaScript方法需要在html标签中加入鼠标经过事件和鼠标离开事件的JavaScript代码，而用jQuery方法不需要在html标签中加入jQuery代码，鼠标经过事件和鼠标离开事件的方法在jQuery代码中，实现了代码和html标签的完全分离，因此结构更清晰。

至此，我们已经利用三种方法实现了二级下拉菜单的显示和隐藏，大家对下拉菜单的实现一定有了更深刻的理解，在实际网页制作中，还会遇到三级下拉菜单、变换菜单、动画菜单等各种下拉菜单的变体，相信大家在实际工作中不断探索和积累，会对下拉菜单的制作有更多新的发现。

[1]周静.福建电脑[J].基于DIV+CSS网页下拉菜单的实现，2012年第10期.

[2]魏颖颖.计算机技术与发展[J].基于CSS的网页下拉菜单设计与实现，2011年第4期.