两级导航菜单树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
原文地址：https://www.cnblogs.com/aivnfjgj/p/9136326.html