藤藤每日一练——CSS3 Dropdown Menu

发布于藤藤

12 年前

这是一个纯CSS3制作的工具提示下拉菜单，当你鼠标悬浮在工具条上时，会自动的向下弹出下拉菜单项。整个工具条是通过@font-face来制作的icon，并使用了gradient给每个下拉菜单块制作了一个不同的渐变色，而下拉菜单的隐藏和显示并不是按照我们传统的制作方法，此处是控制下拉菜单的高度来实现显示与隐藏的效果。当你加载页面时，整个下拉菜单的高度为0，但当你的鼠标悬浮在对应的工具图标上时，此时下拉菜单的高度为180px,当然这个值是一个固定例的值，要完美一点的方法最好不要控制死他的高度，具体如何实现，大家自己想想，前面有讲过这样的案例哟。（^_^）。

demo download

HTML CODE

<ul>
  <li>
    <a href="#" class="icon-user"></a>
    <div>
      <ul>
        <li><a href="#">messages</a></li>
        <li><a href="#">friends</a></li>
        <li><a href="#">comments</a></li>
        <li><a href="#">logout</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#" class="icon-clock"></a>
    <div>
      <ul>
        <li><a href="#">messages</a></li>
        <li><a href="#">friends</a></li>
        <li><a href="#">comments</a></li>
        <li><a href="#">logout</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#" class="icon-setup"></a>
    <div>
      <ul>
        <li><a href="#">messages</a></li>
        <li><a href="#">friends</a></li>
        <li><a href="#">comments</a></li>
        <li><a href="#">logout</a></li>
      </ul>
    </div>
  </li>
</ul>

CSS CODE

body {
　background-color: #323232;
}
.demo {
　width: 180px;
　margin: 40px auto 0;
}
.demo > ul > li {
　float: left;
　width: 60px;
　text-align: center;
　position: relative;
}
.demo > ul > li a {
　display: block;
　color: #fff;
}
.demo > ul > li a:after {
　display: inline-block;
　font-family: 'icomoon';
　font-style: normal;
　speak: none;
　font-weight: normal;
　-webkit-font-smoothing: antialiased;
　font-size: 30px;
　color: #a1a1a1;
}
.demo > ul > li:nth-child(1) > a:after {
　content: "\2c";
}
.demo > ul > li:nth-child(2) > a:after {
　content: "\21";
}
.demo > ul > li:nth-child(3) > a:after {
　content: "\2f";
}
.demo > ul > li div {
　position: relative;
　margin-left: -40px;
　width: 180px;
　height: 0px;
　overflow: hidden;
　-webkit-transition: height 0.4s linear;
　-moz-transition: height 0.4s linear;
　-o-transition: height 0.4s linear;
  -ms-transition: height 0.4s linear;
　transition: height 0.4s linear;
}
.demo > ul > li:hover div {
　height: 180px;
　z-index: 2;
}
.demo > ul > li ul {
　position: absolute;
　margin-top: 10px;
　font-size: 16px;
　text-shadow: 0 1px 1px rgba(0,0,0,.4);
　text-align: left;
　width: 140px;
　line-height: 30px;
　padding: 10px 0;
　border-radius: 3px;
}
.demo > ul > li:nth-child(1) ul {
　box-shadow: 0 1px 0 #db7777 inset,0 0 1px #c70000;
　background: -webkit-linear-gradient(top,#d80000 10%,#8b0000);
　background: -moz-linear-gradient(top,#d80000 10%,#8b0000);
  background: -o-linear-gradient(top,#d80000 10%,#8b0000);
  background: -ms-linear-gradient(top,#d80000 10%,#8b0000);
　background: linear-gradient(top,#d80000 10%,#8b0000);
}
.demo > ul > li:nth-child(2) ul {
  box-shadow: 0 1px 0 #85ff7c inset,0 0 1px #4bd940 inset;
  background: -webkit-linear-gradient(top,#31db17 10%,#0b9200);
  background: -moz-linear-gradient(top,#31db17 10%,#0b9200);
  background: -o-linear-gradient(top,#31db17 10%,#0b9200);
  background: -ms-linear-gradient(top,#31db17 10%,#0b9200);
  background: linear-gradient(top,#31db17 10%,#0b9200);
}
.demo > ul > li:nth-child(3) ul {
  box-shadow: 0 1px 0 #77d4da inset,0 0 1px #0077b0 inset;
  background: -webkit-linear-gradient(top,#00c3db 10%,#005e91);
  background: -moz-linear-gradient(top,#00c3db 10%,#005e91);
  background: -ms-linear-gradient(top,#00c3db 10%,#005e91);
  background: -o-linear-gradient(top,#00c3db 10%,#005e91);
  background: linear-gradient(top,#00c3db 10%,#005e91);

}
.demo > ul > li ul li a {
  position: relative;
  padding: 0 20px;
}
.demo > ul > li:nth-child(1) ul li a:hover {
  text-decoration: none;
  background-color: #800000;
}
.demo > ul > li:nth-child(2) ul li a:hover {
  text-decoration: none;
  background-color: #0a6602;
}
.demo > ul > li:nth-child(3) ul li a:hover {
  text-decoration: none;
  background-color: #0a5278;
}
.demo > ul > li:nth-child(1) ul li a {
  border-bottom: 1px solid #d33030;
}
.demo > ul > li:nth-child(2) ul li a {
  border-bottom: 1px solid #60dd57;
}
.demo > ul > li:nth-child(3) ul li a {
  border-bottom: 1px solid #30bcd6;
}
.demo > ul > li ul li:first-child a:first-child:before {
  position: absolute;
  content: '';
  width: 1px;
  height: 1px;
  border: 5px solid transparent;
  left: 50%;
  top: -20px;
  margin-left: -5px;
  z-index: 99;
}
.demo > ul > li:nth-child(1) ul li a:first-child:before {
  border-bottom-color: #d80000;
}
.demo > ul > li:nth-child(2) ul li a:first-child:before {
  border-bottom-color: #25ec17;
}
.demo > ul > li:nth-child(3) ul li a:first-child:before {
  border-bottom-color: #00c3db;
}
 
@font-face {
　font-family: 'icomoon';
　src:url('fonts/icomoon.eot');
　src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
　　url('fonts/icomoon.svg#icomoon') format('svg'),
　　url('fonts/icomoon.woff') format('woff'),
　　url('fonts/icomoon.ttf') format('truetype');
　font-weight: normal;
　font-style: normal;
}

demo download

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

nike free run 5.0 trends