知识 分享 互助 懒人建站

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

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

    jquery导航下拉菜单两级平滑导航菜单

    作者:佳明妈 来源:jquery特效 2012-05-30 人气:
    jquery代码简洁明了,html结构简洁明了,这里只是随便写一下,jquery导航下拉菜单两级平滑下拉。调用代码: $.navlevel2("li.mainlevel",300); 只的是主菜单的标签

    jquery代码简洁明了,html结构简洁明了,css请自行修改定制,这里只是随便写一下,jquery导航下拉菜单两级平滑下拉。高手可以不要看文字说明^_^

    调用代码: $.navlevel2("li.mainlevel",300); 只的是 主菜单的 标签,也不一定要是li,比如你搞成div结构你就写div.mainlevel也是一个效果地。
    300 是指鼠标停留 300 毫秒才触发下拉菜单,有没有发现,有些菜单鼠标快速滑过的时候,所有的菜单都开始滑出,体验相当不好。懒人建站的jquery代码中凡是类似  $.navlevel2("li.mainlevel",300); 这种调用的都是可以重复使用的哦。

    jquery导航下拉菜单两级平滑下拉菜单,希望喜欢,写文章并不是件愉快的事情!!!

    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.navlevel2 = function(level1,dytime) {
            
          $(level1).mouseenter(function(){
              varthis = $(this);
              delytime=setTimeout(function(){
                varthis.find('ul').slideDown();
            },dytime);
            
          });
          $(level1).mouseleave(function(){
             clearTimeout(delytime);
             $(this).find('ul').slideUp();
          });
          
        };
      $.navlevel2("li.mainlevel",300);
    });
    </script>

    html代码:
    <ul id="nav">
        <li class="mainlevel"><a href="http://www.51xuediannao.com/js/">jquery特效</a>
            <ul>
                <li><a href="http://www.51xuediannao.com/js/texiao/">网页特效</a></li>
                <li><a href="http://www.51xuediannao.com/js/nav/">导航菜单</a></li>
                <li><a href="http://www.51xuediannao.com/js/slide/">焦点幻灯片</a></li>
                <li><a href="http://www.51xuediannao.com/qqkefu/">qq在线客服代码</a></li>
                <li><a href="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a></li>
            </ul>
        </li>
    </ul>
     

    ↓ 查看全文

    jquery导航下拉菜单两级平滑导航菜单由懒人建站收集整理,您可以自由传播,请主动带上本文链接

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

    jquery导航下拉菜单两级平滑导航菜单-最新评论