CSS3制作下拉工具条

发布于白牙

11 年前

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

demo download

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;
}

demo download

关于白牙

网络昵称白牙，大三学生，就读于华南师范大学，现居广州。对HTML5、CSS3、javascript、前端UI开发有浓厚兴趣。请关注我：新浪微博

如需转载，烦请注明出处：https://www.fedev.cn/demo/css3-create-dropdown-tool.html

Nike Benassi "Just Do It." White/Silver