郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript > 导航菜单 >

两级导航菜单树jquery插件特效

来源:jquery 特效 作者: 懒人建站 日期:2012-03-22 人气:
两级导航菜单树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

(责任编辑:懒人建站)

两级导航菜单树jquery插件特效由懒人建站收集整理,您可以自由传播,请主动带上本文链接

web前端开发就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • mKqNT
    2016-12-24 02:14:16发表

    这个更刺j激,准备好手纸哦 A 片。。 hTTp://T.CN/RcWeTaH

  • 小嶋阳菜
    2015-10-27 02:31:50发表

    [抓狂]

  • 苍姐视频集
    2015-10-09 03:11:40发表

  • 雨杉
    2015-09-17 16:41:43发表

    自己试出来了,注释掉:menuboxli.find(a:first).attr(href,javascript:;);就可以了,感谢原作者的代码!

  • 雨杉
    2015-09-17 15:05:35发表

    第一级链接是无效的,怎么才能生效?