本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3制作下拉菜单

本文概述

CSS 3允许开发者制作各种原本需要通过JavaScript脚本代码才能实现的令人惊叹的可视化特效。

在本文中,我们讲述如何利用CSS 3来制作一个具有炫酷视觉效果的下拉菜单,该下拉菜单具有一个漂亮的渐变色背景图,具有圆角边框,具有位于顶部的顶级菜单及位于顶级菜单之下的多个子菜单,当用户鼠标指针移动到顶级菜单上时将动态显示它的子菜单,效果如下图所示。

创建HTML页面

首先,我们为页面使用如下所示的结构。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

</style>
</head>
<body>

</body>
</html>

为了制作下拉菜单,我们将在head标签中使用CSS 3样式,在本页面中,我们将不使用任何JavaScript脚本代码及任何图片文件。

创建菜单列表

本页面中的菜单中将具有一个由一些顶级菜单项所构成的顶级菜单列表,每一个顶级菜单下部将包含一个由一些子菜单项所构成的子菜单列表。

首先,我们编写顶级菜单列表,代码如下所示:

<ul id="main_menu">
    <li class="top_menu">
	<a href="#">产品</a>
    </li>
    <li class="top_menu">
        <a href="#">课程</a>
    </li>
    <li class="top_menu">
	<a href="#">信息</a>
    </li>
</ul>

在上述代码中,我们并没有书写顶级菜单项中的链接地址,你当然可以根据需要来指定这些链接地址,或实现其他功能。

接下来,在a元素之后,添加顶级菜单下的子菜单,代码如下所示。

<ul>
    <li><a href="#">服装</a></li>
    <li><a href="#">家具</a></li>
    <li><a href="#">玩具</a></li>
</ul>

完整的菜单代码如下所示。

<ul id="main_menu">
    <li class="top_menu">
	<a href="#">产品</a>
	<ul>
	    <li><a href="#">服装</a></li>
	    <li><a href="#">家具</a></li>
	    <li><a href="#">玩具</a></li>
	</ul>
    </li>
    <li class="top_menu">
	<a href="#">课程</a>
	<ul>
	    <li><a href="#">英语</a></li>
	    <li><a href="#">美术</a></li>
	    <li><a href="#">语文</a></li>
	    <li><a href="#">其他</a></li>
	</ul>
    </li>
    <li class="top_menu">
	<a href="#">信息</a>
	<ul>
	    <li><a href="#">关于我们</a></li>
	    <li><a href="#">联系我们</a></li>
	</ul>
    </li>
</ul>

顶级菜单与子菜单中都指定了需要在CSS样式代码中使用到的ID属性。

指定菜单样式

接下来,我们定义菜单样式。首先,为所有菜单定义公共样式:

/*定义菜单背景*/
#main_menu, #main_menu a, #main_menu a:hover {
    background-color: #990066;
    background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
    background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
    background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
    background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);
}

这里我们使用了一个渐变色背景,你当然可以将其修改为任何你喜欢的颜色。为了兼容各种浏览器,我们使用了多种浏览器的供应商前缀,同时为不支持渐变色的浏览器定义了一个单色背景。接下来,我们单独定义顶级菜单的样式。

#main_menu {
    font-family:sans-serif;
    list-style-type:none;
    text-align:center;
    float:left;
    width:90%;
    border-radius:5px;
    box-shadow: 3px 3px 2px #888888;
}

这里我们为顶级菜单条使用了一个盒阴影效果,定义了该阴影的水平位置与垂直位置,模糊等级与阴影颜色。我们也指定顶级菜单条具有圆角边框,同时指定了圆角半径。

虽然我们的样式代码将被应用到多级菜单及各菜单项中。但是,我们只通过class属性来定义顶级菜单的部分样式属性。

/*顶级菜单项*/
.top_menu {
    float:left;
    position:relative;
    border-right:1px solid #ff00cc;
    border-left:1px solid #ff00cc;
    margin-left:-1px;
}

我们为顶级菜单项使用了一个边框,同时定义其position属性值为relative,这使得我们可以在顶级菜单下放置一些子菜单项。接下来,我们定义菜单中链接的样式。

/*超链接元素*/
#main_menu a, #main_menu a:hover {
    color:#ffffff;
    display:block;
    padding:5px;
    text-decoration:none;
    width:150px;
    border-top-right-radius:2px;
    border-top-left-radius:2px;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
}

该样式将被应用到所有菜单项中,不管它位于什么等级。

接下来,我们需要指定所有子菜单项默认为隐藏状态:

/*子菜单项*/
#main_menu ul {
    list-style:none;
    position:absolute;
    display:none;
}

绝对位置的应用使得子菜单项必须出现在顶级菜单项下部。当用户首次打开页面时,他们将只能看见所有顶级菜单项,当他们把鼠标指针移动到某个顶级菜单项时,将动态显示它的所有子菜单项:

/*鼠标指针移动到顶级菜单项上时出现所有子菜单项*/
#main_menu li:hover ul {
display:block;
}

现在,我们需要定义所有子菜单项的位置,使其能垂直显示在其父菜单项的下部,且保证每个子菜单项之间保持一定距离:

/*子菜单项*/
#main_menu ul li {
    padding-top:1px;
    margin-left:-25%;
}

最后,我们为子菜单项指定文字颜色及阴影效果:

/*子菜单项中的链接元素*/
#main_menu ul a {
    color:#ffff00;
    box-shadow: 3px 3px 2px #888888;
}

现在,这个CSS 3风格的下拉菜单就已经制作完毕了,点击此处可查看其运行结果。

示例运行效果