本文實(shí)例講述了jQuery實(shí)現(xiàn)的網(wǎng)頁(yè)豎向菜單效果代碼。分享給大家供大家參考。具體如下：

這是一款基于jQuery實(shí)現(xiàn)豎向的網(wǎng)頁(yè)菜單代碼，可折疊展開(kāi)的二級(jí)網(wǎng)頁(yè)菜單，修改一下可用在后臺(tái)管理中，顯示在左側(cè)的那種管理菜單。jquery加入后方便實(shí)現(xiàn)了菜單展開(kāi)和合攏的功能，還加入了少許動(dòng)畫(huà)效果，兼容性好。

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

在線演示地址如下：

具體代碼如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

function initMenu() {

$('#menu ul').hide();

$('#menu ul:first').show();

$('#menu li a').click(

function() {

var checkElement = $(this).next();

if((checkElement.is('ul')) && (checkElement.is(':visible'))) {

return false;

}

if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

$('#menu ul:visible').slideUp('normal');

checkElement.slideDown('normal');

return false;

}

}

);

}

$(document).ready(function() {initMenu();});

body{font-family: Helvetica, Arial, sans-serif; font-size: 0.9em;}

p{line-height: 1.5em;}

ul#menu, ul#menu ul{list-style-type:none; margin: 0; padding: 0; width: 15em;}

ul#menu a{display: block; text-decoration: none;}

ul#menu li{margin-top: 1px;}

ul#menu li a{background: #333; color: #fff; padding: 0.5em;}

ul#menu li a:hover{background: #000;}

ul#menu li ul li a{background: #ccc; color: #000; padding-left: 20px;}

ul#menu li ul li a:hover{background: #aaa; border-left: 5px #000 solid; padding-left: 15px;}

.code{border: 1px solid #ccc; list-style-type: decimal-leading-zero; padding: 5px; margin: 0;}

.code code{display: block; padding: 3px; margin-bottom: 0;}

.code li{background: #ddd; border: 1px solid #ccc; margin: 0 0 2px 2.2em;}

.indent1{padding-left: 1em;}

.indent2{padding-left: 2em;}

• Weblog工具

  • PivotX
  • WordPress

• 程序語(yǔ)言

  • PHP
  • Ruby
  • Python
  • PERL
  • Java
  • C#

• Cool Stuff

  • Apple
  • Maitianquan
  • XBOX360
  • Nifengla
  • Nintendo

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