五二脚本 手机端 m.52jb.net
特色栏目:PHP教程JavaScript正则表达式焦点幻灯片
页面导航:首页 > 网页特效 > 导航菜单 > 正文内容

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

来源:五二脚本发布时间:12-29浏览:264 次
jquery代码简洁明了,html结构简洁明了,这里只是随便写一下,jquery导航下拉菜单两级平滑下拉。调用代码: $.navlevel2("li.mainlevel",300);
jquery导航下拉菜单两级导航菜单

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="#">jquery特效</a>
        <ul>
            <li><a href="#">网页特效</a></li>
            <li><a href="#">导航菜单</a></li>
            <li><a href="#">焦点幻灯片</a></li>
            <li><a href="#">qq在线客服代码</a></li>
            <li><a href="#">选项卡代码</a></li>
        </ul>
    </li>
</ul>

 
关于我们 - 联系我们 - 广告合作 - 网站地图 - 网站声明

QQ群:153638182  投稿邮箱: 578640261@qq.com  皖ICP备-14005058

严禁网站镜像,否则追究法律责任。未经www.52jb.net 同意,不得转载本网站上所有的源代码。

五二脚本每日更新大量关于网页制作网页特效php编程网站优化源码下载的实例教程。