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

使用CSS 3创建垂直式下拉菜单

本文介绍如何使用CSS 3来创建一个垂直式下拉菜单。本文示例中的制作关键在于使用CSS 3中的:target伪类选择器。


HTML代码

创建主菜单项

在HTML代码中,我们需要为下拉菜单创建一个主容器,在主容器中,创建一个ul无序列表,在ul无序列表中,首先创建主菜单项,并为它们定义各自不同的ID,以便可以通过:target选择器来显示各主菜单项中不同的子菜单项。

<div id="wrapper">
    <ul class="ac-menu">
        <li id="one">
            <a href="#one">菜单项1</a>
        </li>
        <li id="two">
            <a href="#two">菜单项2</a>
        </li>
        <li id="three">
            <a href="#three">菜单项3</a>
        </li>
        <li id="four">
            <a href="#four">菜单项4</a>
        </li>
    </ul>
</div>

创建子菜单项

接下来,我们制作主菜单项下面的各子菜单项。我们在每个主菜单项所用ul无序列表中添加第2个ul无序列表,并且在每个li列表项目中添加一个链接,同时将链接文字定义为各子菜单项文字。

<ul class="ac-menu">
    <li id="one">
	<a href="#one">菜单项1</a>
	<ul class="sub-menu">
	    <li><a href="#one">菜单项1-1</a></li>
	    <li><a href="#one">菜单项1-2</a></li>
	    <li><a href="#one">菜单项1-3</a></li>
	</ul>
    </li>

CSS 3样式代码

接下来,我们开始书写CSS 3样式代码。我们首先定义主容器的样式代码。我们将它定位于屏幕中央(水平位置上),同时将它的宽度设置为250px(即菜单宽度)。

#wrapper {
    width:250px;
    margin: 0 auto;
}

接下来,我们首先清除菜单内各元素的外边距、内边距、边框宽度,以及各列表项的默认符号。

.ac-menu,
.ac-menu ul,
.ac-menu li,
.ac-menu a,
.ac-menu span {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}
.ac-menu li {
    list-style: none;
}

接下来定义主菜单项的样式,包括为其内部链接使用CSS 3渐变色,定义字体大小,为链接元素使用盒阴影等等。

.ac-menu li > a {
    display: block;
    position: relative;
    min-width: 160px;
    padding: 0 10px 0 0;
    text-align: center;
    height: 32px;
    color: #FFFFFF;
    font: bold 12px/32px Arial, sans-serif;
    text-decoration: none;

    background: #343435;
    background: -moz-linear-gradient(top, #343435 1%, #4a4a4a 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#343435), color-stop(100%,#4a4a4a));
    background: -webkit-linear-gradient(top, #343435 1%,#4a4a4a 100%);
    background: -o-linear-gradient(top, #343435 1%,#4a4a4a 100%);
    background: -ms-linear-gradient(top, #343435 1%,#4a4a4a 100%);
    background: linear-gradient(top, #343435 1%,#4a4a4a 100%);

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.ac-menu > li:hover > a,
.ac-menu > li:target > a {
    text-shadow: 1px 1px 1px rgba(255,255,255, .2);

    background: #20a4ca;
    background: -moz-linear-gradient(top, #20a4ca 1%, #47b5d4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#20a4ca), color-stop(100%,#47b5d4));
    background: -webkit-linear-gradient(top, #20a4ca 1%,#47b5d4 100%);
    background: -o-linear-gradient(top, #20a4ca 1%,#47b5d4 100%);
    background: -ms-linear-gradient(top, #20a4ca 1%,#47b5d4 100%);
    background: linear-gradient(top, #20a4ca 1%,#47b5d4 100%);
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}

接下来,定义子菜单项的样式,包括为其内部链接使用背景色、文字阴影、盒阴影及其他一些用于美化子菜单项的样式。

/*子菜单项样式*/
    .sub-menu li a {
    color: #797979;
    text-shadow: 1px 1px 0px rgba(255,255,255, .2);
    background: #eae9e9;
    border-bottom: 1px solid #c1bfbf;

    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
    box-shadow: inset 0px 1px 0px 0px rgba(255,255,255, .1), 0px 1px 0px 0px rgba(0,0,0, .1);
}
.sub-menu li:hover a { 
    background: #f6f5f5; 
}

为了使子菜单项隐藏起来,我们将其高度定义为0,同时将其overflow样式属性值设置为hidden。同时使用transition样式属性来定义当用户点击子菜单项时使用一个动画将该子菜单项展开。最后,我们定义所有子菜单项被展开时的高度均为98px,因为本示例中所有主菜单项下的子菜单项个数均为3。如果你的主菜单项下面的子菜单项数各不相同,你需要定制每个子菜单项被展开时的高度,高度值取决于你的子菜单项的数目。

.ac-menu li > .sub-menu {
    height: 0;
    overflow: hidden;

    -webkit-transition: height .2s ease-in-out;
    -moz-transition: height .2s ease-in-out;
    -o-transition: height .2s ease-in-out;
    -ms-transition: height .2s ease-in-out;
    transition: height .2s ease-in-out;
}

.ac-menu li:target > .sub-menu {
    height: 98px;
}