前言
其實(shí)前端那些事蠻有意思的，HTML實(shí)現(xiàn)的是靜態(tài)的，使用ajax之后就可以和數(shù)據(jù)庫交互了，加上js和jQuery之后就動起來了，加上CSS之后就更加炫酷了。因?yàn)轫?xiàng)目中需要，查資料和編寫了一些炫酷的二級菜單，分享給大家，好東西就要分享嘛！
一、滑動菜單
1、代碼：
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title>純CSS3垂直菜單 菜單項(xiàng)滑動動畫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、效果
二、左側(cè)帶圖標(biāo)多級下拉菜單
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左側(cè)帶小圖標(biāo)的多級下拉菜單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>服務(wù) <span class="submenu-icon"></span></a> <ul> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> </ul> </li> <li><a href="http://www.internetke.com/"><i class="icon-briefcase"></i>產(chǎn)品 <span class="submenu-icon"></span></a> <ul> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航<span class="submenu-icon"></span></a><ul> <li><a href="http://www.internetke.com/">三級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">三級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">三級導(dǎo)航 <span class="submenu-icon"></span> </a> <ul> <li><a href="http://www.internetke.com/">四級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">四級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">四級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">四級導(dǎo)航</a></li> </ul> </li> <li><a href="http://www.internetke.com/">三級導(dǎo)航</a></li> </ul> </li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> <li><a href="http://www.internetke.com/">二級導(dǎo)航</a></li> </ul> </li> <li><a href="http://www.internetke.com/"><i class="icon-user"></i>關(guān)于我們</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>導(dǎo)航</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>團(tuán)隊(duì)</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>聯(lián)系我們</a></li> </ul></div><!--效果html結(jié)束--><div class="clear"></div></div></body></html>2、CSS代碼：
新聞熱點(diǎn)
疑難解答
圖片精選
