码迷,mamicode.com
首页 > 其他好文 > 详细

二级菜单树

时间:2018-06-04 23:22:00      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:技术分享   app   doc   幻灯片   img   1.4   submenu   dem   广告   

两级导航菜单树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>

二级菜单树

标签:技术分享   app   doc   幻灯片   img   1.4   submenu   dem   广告   

原文地址:https://www.cnblogs.com/aivnfjgj/p/9136326.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!