藤藤每日一练——CSS3 Dropdown Menu

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

CSS3 Dropdown Menu

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

demodownload

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

demodownload

如需转载,烦请注明出处:http://www.w3cplus.com/demo/css3-dropdown-menu-2.html

nike free run 5.0 trends

如需转载,烦请注明出处:https://www.w3cplus.com/demo/509.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部