快捷導(dǎo)航

jquery實(shí)現(xiàn)向下滑出的二級(jí)導(dǎo)航下滑菜單效果

更新時(shí)間：2015年08月25日 11:15:32 作者：企鵝

這篇文章主要介紹了jquery實(shí)現(xiàn)向下滑出的二級(jí)導(dǎo)航下滑菜單效果,涉及jquery實(shí)現(xiàn)頁(yè)面結(jié)點(diǎn)樣式動(dòng)態(tài)變換效果的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)向下滑出的二級(jí)導(dǎo)航下滑菜單效果。分享給大家供大家參考。具體如下：

這是一款由jQuery配合JavaScript來共同實(shí)現(xiàn)的網(wǎng)頁(yè)上的下滑菜單特效，帶顏色的是一級(jí)主菜單，點(diǎn)擊后會(huì)展開向上滑出二級(jí)的子菜單，再次點(diǎn)擊主菜單，會(huì)合攏子菜單，就菜單所能展現(xiàn)的功能來說，適用于企業(yè)網(wǎng)站產(chǎn)品分類、新聞?lì)愇恼聶谀繉?dǎo)航等，目前本款菜單支持兩級(jí)，有興趣的可自己擴(kuò)展更多級(jí)的菜單。

運(yùn)行效果截圖如下：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<title>向下滑動(dòng)展開的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="#" >+ 網(wǎng)頁(yè)菜單類素材一</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>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: