Colorful CSS3 Animated Navigation Menu

Colorful CSS3 Animated Navigation Menu是Martin Angelov制作的，今天看到这个效果很有意思，特意扒过来与大家分享。整个效果是ＣＳＳ３使用了Bootstrap的Font Awesome字体图形制作了一个彩色的动画下拉菜单。其中运用到的ＣＳＳ３属性有：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/

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