知识 分享 互助 懒人建站

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

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

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

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

    两级导航菜单树jquery插件特效-最新评论