CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3制作下拉工具条

CSS3制作下拉工具条

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

【CSS3制作下拉工具条】相关文章

1. CSS3制作下拉工具条

2. CSS3制作下拉菜单

3. CSS3制作购物车下拉列表

4. jQuery的工具条提示插件Qtip2的基本使用

5. 利用CSS3制作动画效果

6. 用css3制作纸张效果

7. 利用CSS3制作动画效果

8. CSS3制作的分页导航

9. CSS3制作Login栏

10. CSS3制作分步注册表单

本文来源:https://www.51html5.com/a907.html

点击展开全部

﹝CSS3制作下拉工具条﹞相关内容

「CSS3制作下拉工具条」相关专题

其它栏目

也许您还喜欢