box SM AD jquer scrip 4.2 pro FN 下界

兩級導航菜單樹jquery插件特效

作者：佳明媽 來源：jquery 特效 2012-03-22 人氣：30725

兩級導航菜單樹jquery插件特效調用方法：$.jq51menu(#menubox,div.submenu); 這裏的#menubox 是主菜單的ID，div.submenu是子菜單的ID。兩級導航菜單樹的樣式很醜陋，懶人建站嘛，俺夠懶，就懶得寫好 兩級導航菜單樹jquery插件特效調用方法：$.jq51menu("#menubox","div.submenu"); 這裏的#menubox 是主菜單的ID，div.submenu是子菜單的ID。兩級導航菜單樹的樣式很醜陋，懶人建站嘛，俺夠懶，就懶得寫好看的界面了。還是勞你大駕自己動手設計下界面和css把。^_^^_^

jquery代碼：
<script src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.jq51menu = function(menuboxid,submenu){

var menuboxli = $(menuboxid+" li");
menuboxli.eq(0).find(submenu).show();
menuboxli.click( function () {
$(this).addClass("thismenu").find(submenu).show().end().siblings("li").removeClass("thismenu").find(submenu).hide();
return false;
});

};

$.jq51menu("#menubox","div.submenu");

});
</script>

html代碼：
<div id="menubox">
<ul>
<li><a href="http://www.51xuediannao.com/">懶人建站</a>
<div class="submenu">
<a href="http://www.51xuediannao.com/js/nav/">導航菜單</a>
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
</div>
</li>
<li><a href="http://www.51xuediannao.com/js/slide/">焦點幻燈片</a>
<div class="submenu">
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
</div>
</li>
<li><a href="http://www.51xuediannao.com/js/gg/">廣告代碼</a>
<div class="submenu">
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
</div>
</li>
<li><a href="http://www.51xuediannao.com/js/texiao/">網頁特效</a>
<div class="submenu">
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
<a href="#">二級子菜單</a>
</div>
</li>
</ul>
</div> 本文鏈接：兩級導航菜單樹jquery插件特效http://www.51xuediannao.com/js/nav/655.html

二級菜單樹