本文實例講述了jquery實現向下滑出的二級導航下滑菜單效果。分享給大家供大家參考。具體如下：
這是一款由jQuery配合JavaScript來共同實現的網頁上的下滑菜單特效，帶顏色的是一級主菜單，點擊后會展開向上滑出二級的子菜單，再次點擊主菜單，會合攏子菜單，就菜單所能展現的功能來說，適用于企業網站產品分類、新聞類文章欄目導航等，目前本款菜單支持兩級，有興趣的可自己擴展更多級的菜單。
運行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/jquery-down-show-nav-menu-codes/
具體代碼如下：
<!DOCTYPE html><html><head><title>向下滑動展開的JS下滑菜單</title><style type="text/css">ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}ul#sidemenu a{display: block;text-decoration: none;}ul#sidemenu li{margin: 5px auto;}ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}ul#sidemenu li a: hover{background: #000;}ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}</style></head><body><div class="leftbar"> <ul id="sidemenu"> <li><a href="#" >+ 網頁菜單類素材一</a> <ul> <li><a href="#">下滑菜單</a></li> <li><a href="#">折疊菜單</a></li> <li><a href="#">垂直菜單</a></li> </ul> </li> <li><a href="#" >+ 編程源碼類資源</a> <ul> <li><a href="#">ASP源碼</a></li> <li><a href="#">Delphi源碼</a></li> <li><a href="#">vc++源碼</a></li> <li><a href="#">VB源碼</a></li> </ul> </li> </ul></div><script type="text/javascript" src="jquery-1.6.2.min.js"></script><script type="text/javascript">function initMenu() { $('#sidemenu ul').hide(); $('#sidemenu ul:first').hide(); $('#sidemenu li a').click( function() { var checkElement = $(this).next(); if((checkElement.is('ul')) && (checkElement.is(':visible'))) { return false; } if((checkElement.is('ul')) && (!checkElement.is(':visible'))) { $('#sidemenu ul:visible').slideUp('normal'); checkElement.slideDown('normal'); return false; } } ); }$(document).ready(function() {initMenu();});</script></body></html>希望本文所述對大家的jquery程序設計有所幫助。
新聞熱點
疑難解答
