前言
其实前端那些事蛮有意思的，HTML实现的是静态的，使用ajax之后就可以和数据库交互了，加上js和jQuery之后就动起来了，加上CSS之后就更加炫酷了。因为项目中需要，查资料和编写了一些炫酷的二级菜单，分享给大家，好东西就要分享嘛！
一、滑动菜单
1、代码：
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>纯CSS3垂直菜单 菜单项滑动动画DEMO演示</title> <link rel="stylesheet" type="text/css" href="http://www.w3cplus.com/demo/css3/base.css" media="all" /> <script type="text/javascript" src="http://www.w3cplus.com/demo/css3/prefixfree.min.js"></script> <style>body { background-color:#282828;} .demo { margin: 40px auto 0; width: 170px; text-align: center;}.menu { position: relative; width: 170px; padding: 5px 0; line-height: 35px; border-radius: 5px; background: -*-linear-gradient(top,#dbdbdb,#999);}.menu a { display: block; color: #484848; text-decoration: none; text-shadow: 0 1px 0 #e0e0e0; font-size: 14px;}.menu li:hover a, .menu li:first-child a { color: #980202; text-shadow: 0 1px 0 rgba(0,0,0,.1);}.menu li:hover a{ color: #fff;}.menu li { position: relative; z-index: 2;}.ribbon_wrap { position: absolute; top: 8px; left: -20px; z-index: 1; transition: top 0.4s;}.ribbon_rail { position: relative; width: 170px; height: 30px; padding: 0 20px; color: #e3e3e3; text-shadow: 0 1px 0 #6b6b6b; box-shadow: 0 2px 5px rgba(0,0,0,.2); background: -*-linear-gradient(top,#ff3f3f,#a50000);}.ribbon_rail:before, .ribbon_rail:after { position:absolute; content:""; top:100%; width:0; height:0; border: 5px solid transparent;}.ribbon_rail:before { left:0; border-color: #5d0f0f #5d0f0f transparent transparent;}.ribbon_rail:after { right:0; border-color: #5d0f0f transparent transparent #5d0f0f;}.ribbon_rail > div { width: 100%;}.ribbon_rail > div:before, .ribbon_rail > div:after { content:""; position: absolute; top:10px; z-index: -1; width: 0; height:0; border-width: 14px; border-style: solid; border-color: #ff1515 #ff1515 #920000 #ff1515;}.ribbon_rail > div:before { right: 100%; border-left-color: transparent; margin-right: -10px;}.ribbon_rail > div:after { left: 100%; border-right-color: transparent; margin-left: -10px;}.menu li:nth-child(1):hover ~ .ribbon_wrap{ top: 8px; }.menu li:nth-child(2):hover ~ .ribbon_wrap{ top: 43px;}.menu li:nth-child(3):hover ~ .ribbon_wrap{ top: 78px; }.menu li:nth-child(4):hover ~ .ribbon_wrap{ top: 113px;}.menu li:nth-child(5):hover ~ .ribbon_wrap{ top: 148px;} </style></head><body><div class="page"> <section class="demo"> <ul class="menu unstyled"> <li><a href="#" title=""><strong>Steve Careless</strong></a></li> <li><a href="#" title=""><strong>Hank Azarena</strong></a></li> <li><a href="#" title=""><strong>Joan Rivals</strong></a></li> <li><a href="#" title=""><strong>Johnny Dip</strong></a></li> <li><a href="#" title=""><strong>Gwyneth Patron</strong></a></li> <div class="ribbon_wrap"> <div class="ribbon_rail"> <div></div> </div> </div> </ul> </section> <div style="text-align:center;clear:both"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script></div></div></body></html>2、效果
二、左侧带图标多级下拉菜单
1、HTML代码：
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><title>jQuery左侧带小图标的多级下拉菜单DEMO演示</title><link href="css/font-awesome.css" rel="stylesheet"><script type="text/javascript" src="js/jquery-1.10.1.min.js"></script><script type="text/javascript" src="js/google-maps.js"></script><script>$(document).ready(function(){$(".vertical-nav").verticalnav({speed: 400,align: "left"});});</script></head><body><div style="text-align:center;clear:both;"><script src="/gg_bd_ad_720x90.js" type="text/javascript"></script><script src="/follow.js" type="text/javascript"></script></div><div class="kePublic"><!--效果html开始--><div class="content"> <ul class="vertical-nav dark red"> <li class="active"><a href="http://www.internetke.com/"><i class="icon-home"></i>首页</a></li> <li><a href="http://www.internetke.com/"><i class="icon-cogs"></i>服务 <span class="submenu-icon"></span></a> <ul> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航</a></li> </ul> </li> <li><a href="http://www.internetke.com/"><i class="icon-briefcase"></i>产品 <span class="submenu-icon"></span></a> <ul> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航<span class="submenu-icon"></span></a><ul> <li><a href="http://www.internetke.com/">三级导航</a></li> <li><a href="http://www.internetke.com/">三级导航</a></li> <li><a href="http://www.internetke.com/">三级导航 <span class="submenu-icon"></span> </a> <ul> <li><a href="http://www.internetke.com/">四级导航</a></li> <li><a href="http://www.internetke.com/">四级导航</a></li> <li><a href="http://www.internetke.com/">四级导航</a></li> <li><a href="http://www.internetke.com/">四级导航</a></li> </ul> </li> <li><a href="http://www.internetke.com/">三级导航</a></li> </ul> </li> <li><a href="http://www.internetke.com/">二级导航</a></li> <li><a href="http://www.internetke.com/">二级导航</a></li> </ul> </li> <li><a href="http://www.internetke.com/"><i class="icon-user"></i>关于我们</a></li> <li><a href="http://www.internetke.com/"><i class="icon-comments-alt"></i>博客</a></li> <li><a href="http://www.internetke.com/"><i class="icon-picture"></i>导航</a></li> <li><a href="http://www.internetke.com/"><i class="icon-info"></i>信息</a></li> <li><a href="http://www.internetke.com/"><i class="icon-group"></i>团队</a></li> <li><a href="http://www.internetke.com/"><i class="icon-question"></i>常见问题</a></li> <li><a href="http://www.internetke.com/"><i class="icon-bar-chart"></i>案例</a></li> <li><a href="http://www.internetke.com/"><i class="icon-envelope"></i>联系我们</a></li> </ul></div><!--效果html结束--><div class="clear"></div></div></body></html>2、CSS代码：
新闻热点
疑难解答
