CSS3制作下拉工具条 --HTML5中文学习网

Tooltip的效果，在Web上的运用对大家来说不在陌生了，然而很多tooltip的效果都是依赖于JavaScript或者jQuery来实现。但是随着IE6的慢慢死去，制作这样的效果是无需任何脚本语言来支持。今天我们一起来看一款使用CSS3制作的下拉工具条，也类似于tooltip的效果。在这个效果中比较难处理的是阴影色配合，另个整个效果最有特色的是CSS3属性选择器的运用。感兴趣的话继续往下看吧。

HTML结构

<ul class="dropdownlist">
<li class="list-1">
<div class="list-wrapper">
<a href="#">#</a>
<ul>
<li class="item-1"><a href="#1">"</a></li>
<li class="item-2"><a href="#2">$</a></li>
<li class="item-3"><a href="#3">!</a></li>
</ul>
</div>
</li>
</ul>

对于结构来说，大家都熟悉，典型的一个下拉菜单制作的结构，但这里需要注意，使用了一个“div.list-wrapper”容器包裹了链接下下拉项，主要是方便悬浮状态时，显示隐藏的工具体，但其实简单一点的话，这个容器可以完全去掉，只需要在外成的li上做悬浮效果，也能实现相同的功能。（在这里保留了白牙同学的原结构，未做处理。）

CSS代码

CSS代码也并不太复杂，主要的是CSS3属性选择器的灵活运用以及盒子阴影box-shadow与背景以及边框的容入，其次使用了渐变、transition、@font-face等属性辅助一些效果的制作。

/*默认样式*/
body {
background:url("bg.jpg") center center no-repeat fixed #333;
background-size: 100% 100%;/*背景图全屏显示，可以参考《CSS3 Background-size》一文*/
}

.demo {
text-align: center;
min-height: 200px;
}
.dropdownlist {
display: inline-block;
margin: 50px;
}
/*tooltip的实现*/
.dropdownlist li {
list-style-type:none;
position:relative;
}
.dropdownlist li a {
font-size:20px;
font-family:"signal-icon";
text-align:center;
line-height:48px;
color:#fff;
display:block;
width:58px;
height:48px;
background-image:-*-linear-gradient(top,rgb(105,96,106),rgb(80,73,80));/*制作工具条背景色*/
transition:all 500ms linear;/*设置动画过渡*/
text-decoration:none;
}
/*下拉列表项容器样式*/
.list-wrapper {
border-radius:4px;
border:3px solid rgba(243,233,229,0.2);
box-shadow:0 0 0 1px rgba(243,233,229,0.6);/*盒子阴影*/
position:relative;
}
/*使用属性选择器控制需要的元素。详细参阅《CSS3 选择器——属性选择器》一文*/
.dropdownlist li[class^="list-"] {
padding-bottom:20px;
}
.dropdownlist li[class^="list-"] .list-wrapper > a {
font-size:30px;
border:1px solid rgb(63,57,66);
border-radius:3px;
box-shadow:inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
0 1px 0 rgb(137,121,118),
0 2px 0 rgb(163,144,141),
0 0 0 1px rgb(175,155,151);/*使用多阴影效果*/

}
.dropdownlist li:nth-child(1)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.2),
1px 0 0 rgba(110,93,101,0.2),
0 -1px 0 rgba(110,93,101,0.2);
}
.dropdownlist li:nth-child(2)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.4),
1px 0 0 rgba(110,93,101,0.4);
}
.dropdownlist li:nth-child(3)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.6),
1px 0 0 rgba(110,93,101,0.6),
0 1px 0 rgba(89,75,84,0.8),
0 2px 0 rgba(89,75,84,0.6),
0 3px 0 rgba(89,75,84,0.4);
}

.dropdownlist li[class^="item-"] > a {
border:1px solid rgb(64,57,66);
border-bottom:none;
}
.dropdownlist li:last-child[class^="item-"] > a {
border:1px solid rgb(64,57,66);
}
.dropdownlist li:first-child[class^="item-"] > a{
border-radius:3px 3px 0 0;
}
.dropdownlist li:last-child[class^="item-"] > a {
border-radius:0 0 3px 3px;
}
.dropdownlist li[class^="item-"] > a:visited {
color:#033e6b;
}

.dropdownlist li a:hover {
background-image:-*-linear-gradient(top,rgb(90,80,80),rgb(65,68,65));
cursor:pointer;
}

/*下拉列表默认隐藏*/
.dropdownlist li[class^="list-"] ul {
position:absolute;
left:-3px;
top:130%;
border-radius:4px;
padding:0;
border:none;
transition: all 500ms ease-in;
border:3px solid rgba(243,233,229,0.2);
box-shadow:0 0 0 1px rgba(243,233,229,0.6);
display: none;/*隐藏工具体*/
}
/*工具条icon的实现方法*/
.dropdownlist li[class^="list-"] ul:before {
content:'';
position:absolute;
width:1px;
height:1px;
border:5px solid transparent;
border-bottom-color:rgba(243,233,229,0.4);
left:50%;
top:-15px;
margin-left:-5px;
}
/*悬浮时显示下拉工具条，实现tooltip效果*/
.dropdownlist li[class^="list-"]:hover ul {
display:block;
}
/*调用服务器字体，详细参阅读《CSS3 @font-face》一文*/
@font-face {
font-family: 'signal-icon';
src:url('fonts/signal-icon.eot');
src:url('fonts/signal-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/signal-icon.svg#signal-icon') format('svg'),
url('fonts/signal-icon.woff') format('woff'),
url('fonts/signal-icon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

演示：http://www.w3cplus.com/demo/css3/DropdownTools/index.html

下载：DropdownTools.zip