Colorful CSS3 Animated Navigation Menu

发布于 大漠

Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的,今天看到这个效果很有意思,特意扒过来与大家分享。整个效果是CSS3使用了BootstrapFont Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的CSS3属性有:nth-child()选择器,gradient制作渐变效果,@font-face配合:before伪选择器制作的ICON。其中最具特色的是使用max-height来控制下拉菜单的显示与隐藏。你有试过吗?没试过请继续吧!

demodownload

HTML CODE

<div id="colorNav">
  <ul>
    <li class="green">
      <a href="#" class="icon-home"></a>
      <ul>
        <li><a href="#">Back to the tutorial</a></li>
        <li><a href="#">Get help</a></li>
        <li><a href="#">Download this example</a></li>
      </ul>
    </li>
    <li class="red">
      <a href="#" class="icon-cogs"></a>
      <ul>
        <li><a href="#">Payment</a></li>
        <li><a href="#">Notifications</a></li>
        <li><a href="#">Privacy options</a></li>
        <li><a href="#">Account Settings</a></li>
      </ul>
    </li>
    <li class="blue">
      <a href="#" class="icon-twitter"></a>
      <ul>
        <li><a href="#">Follow us on Twitter</a></li>
        <li><a href="#">Find us on Facebook</a></li>
      </ul>
    </li>
    <li class="yellow">
      <a href="#" class="icon-beaker"></a>
      <ul>
        <li><a href="#">PHP tutorials</a></li>
        <li><a href="#">jQuery techniques</a></li>
        <li><a href="#">CSS articles</a></li>
        <li><a href="#">Everything else</a></li>
      </ul>
    </li>
    <li class="purple">
      <a href="#" class="icon-envelope"></a>
      <ul>
        <li><a href="#">Contact us</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS CODE

#colorNav > ul{
 width: 450px; /* Increase when adding more menu items */
 margin:50px auto;
}

#colorNav > ul > li{ /* will style only the top level li */
 list-style: none;
 box-shadow: 0 0 10px rgba(100, 100, 100, 0.2) inset,1px 1px 1px #CCC;
 display: inline-block;
 line-height: 1;
 margin: 1px;
 border-radius: 3px;
 position:relative;
}

#colorNav > ul > li > a{
 color:inherit;
 text-decoration:none !important;
 font-size:24px;
 padding: 25px;
}

#colorNav li ul{
 position:absolute;
 list-style:none;
 text-align:center;
 width:180px;
 left:50%;
 margin-left:-90px;
 top:70px;
 font:bold 12px 'Open Sans Condensed', sans-serif;	
 /* This is important for the show/hide CSS animation */
 max-height:0px;
 overflow:hidden;	
 -webkit-transition:max-height 0.4s linear;
 -moz-transition:max-height 0.4s linear;
 -o-transition:max-height 0.4s linear;
 -ms-transition:max-height 0.4s linear;
 transition:max-height 0.4s linear;
}

#colorNav li ul li{
 background-color:#313131;
}
#colorNav li ul li a{
 padding:12px;
 color:#fff !important;
 text-decoration:none !important;
 display:block;
}
#colorNav li ul li:nth-child(odd){ /* zebra stripes */
 background-color:#363636;
}
#colorNav li ul li:hover{
 background-color:#444;
}
#colorNav li ul li:first-child{
 border-radius:3px 3px 0 0;
 margin-top:25px;
 position:relative;
}

#colorNav li ul li:first-child:before{ /* the pointer tip */
 content:'';
 position:absolute;
 width:1px;
 height:1px;
 border:5px solid transparent;
 border-bottom-color:#313131;
 left:50%;
 top:-10px;
 margin-left:-5px;
}

#colorNav li ul li:last-child{
 border-radius: 0 0 3px 3px;
}
#colorNav li ul li:only-child{
 border-radius: 3px;
}
/* This will trigger the CSS */
/* transition animation on hover */

#colorNav li:hover ul{
 max-height:200px; /* Increase when adding more dropdown items */
}


/*----------------------------
	Color Themes
-----------------------------*/


#colorNav li.green{
 /* This is the color of the menu item */
 background-color:#00c08b;

 /* This is the color of the icon */
 color:#127a5d;
}

#colorNav li.red{background-color:#ea5080;color:#aa2a52;}
#colorNav li.blue{background-color:#53bfe2;color:#2884a2;}
#colorNav li.yellow{background-color:#f8c54d;color:#ab8426;}
#colorNav li.purple{background-color:#df6dc2;color:#9f3c85;}

特别声明:此案例大部分代码来自于:http://demo.tutorialzine.com/2012/10/css3-dropdown-menu/

demodownload

详细教程:http://tutorialzine.com/2012/10/css3-dropdown-menu/

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

Air Force 1 Mid Flyknit