本文實例講述了jquery實現漂亮的二級下拉菜單代碼。分享給大家供大家參考。具體如下：
這里介紹一款基于jquery實現的網站下拉菜單，黑色風格，很漂亮，本菜單需要點擊主菜單后的小三角符號才下拉出二級菜單，并不是有些菜單，是鼠標移上主菜單的時候就滑過，至于哪一種，就看個人的喜好了
先來看看運行效果：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-bg-2-level-down-show-menu-codes/
具體代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>jQuery二級菜單</title><script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.subnav").parent().append("<span></span>"); $("ul.topnav li span").click(function() { $(this).parent().find("ul.subnav").slideDown('fast').show(); $(this).parent().hover(function() { }, function(){ $(this).parent().find("ul.subnav").slideUp('slow'); }); }).hover(function() { $(this).addClass("subhover"); }, function(){ $(this).removeClass("subhover"); });});</script><style type="text/css">body { margin: 0; padding: 0; font: 10px normal Arial, Helvetica, sans-serif; background: #ddd url(images/body_bg.gif) repeat-x;}.container { width: 960px; margin: 0 auto; position: relative;}#header { padding-top: 120px;}#header .disclaimer { color: #999; padding: 100px 0 7px 0; text-align: right; display: block; position: absolute; top: 0; right: 0;}#header .disclaimer a { color: #ccc;}ul.topnav { list-style: none; padding: 0 20px; margin: 0; float: left; width: 920px; background: #222; font-size: 1.2em; background: url(images/topnav_bg.gif) repeat-x;}ul.topnav li { float: left; margin: 0; padding: 0 15px 0 0; position: relative;}ul.topnav li a{ padding: 10px 5px; color: #fff; display: block; text-decoration: none; float: left;}ul.topnav li a:hover{ background: url(images/topnav_hover.gif) no-repeat center top;}ul.topnav li span { width: 17px; height: 35px; float: left; background: url(images/subnav_btn.gif) no-repeat center top;}ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}ul.topnav li ul.subnav { list-style: none; position: absolute; left: 0; top: 35px; background: #333; margin: 0; padding: 0; display: none; float: left; width: 170px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; border: 1px solid #111;}ul.topnav li ul.subnav li{ margin: 0; padding: 0; border-top: 1px solid #252525; border-bottom: 1px solid #444; clear: both; width: 170px;}html ul.topnav li ul.subnav li a { float: left; width: 145px; background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center; padding-left: 20px;}html ul.topnav li ul.subnav li a:hover { background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center; }#header img { margin: 20px 0 10px;}</style></head><body><div class="container"> <div id="header"> <ul class="topnav"> <li><a href="#">網站首頁</a></li> <li> <a href="#">網頁菜單</a> <ul class="subnav"> <li><a href="#">ASP導航</a></li> <li><a href="#">JSP導航</a></li> <li><a href="#">ASP.net導航</a></li> <li><a href="#">PHP導航</a></li> </ul> </li> <li> <a href="#">網頁特效</a> <ul class="subnav"> <li><a href="#">層和菜單</a></li> <li><a href="#">鼠標特效</a></li> <li><a href="#">表單特效</a></li> <li><a href="#">表格特效</a></li> <li><a href="#">CSS特效</a></li> <li><a href="#">jQuery特效</a></li> </ul> </li> <li><a href="#">搜索引擎</a></li> <li><a href="#">博客營銷</a></li> <li><a href="#">聯系我們</a></li> </ul> </div></div></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
