[CSS3技术]CSS3制作下拉工具条

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






HTML结构

 
[*]
 
 #
 


 
[*]"
 
[*]$
 
[*]!
 


 

对于结构来说，大家都熟悉，典型的一个下拉菜单制作的结构，但这里需要注意，使用了一个“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


[/td][/tr]