jquery 无限分级的下拉菜单_jquery下拉菜单

当前位置：首页 > 脚本编程 > jquery > jquery下拉菜单 > 正文

jquery 无限分级的下拉菜单: 发布时间：2020-07-20编辑：脚本学堂

本文分享一例jquery代码，教大家实现一个无限分级的下拉菜单效果，有需要的朋友参考下吧。

jquery 无限分级下拉菜单的效果图，如下：

此菜单的作用与特点：

1.自动排序
本菜单则可以在一直输出一个class定义的下拉菜单，无需对多级菜单定义。

2.自动添加下拉指示
只需要在css中定义好下拉效果的样式，代码会自动寻找下拉菜单并且添加指示箭头

3.菜单动画执行效果修复
本菜单解决了鼠标滑过的次数很多，会看到下拉菜单不停的展开收起展开收起的问题，增强了用户体验。

4.自动排列
本代码会对下拉菜单进行自动排列，无需单独进行设置，css也简单高效，兼容效果也不错。用到的图片也比较少。

建议的结构：

我在案例中的结构也是这样的：

复制代码代码示例:

<ul class="nav">
<li class="nav_li"><a href="#">Home</a></li>
<li class="nav_li"><a href="#">Works</a>
    <ul class="sub_menu">
      <li><a href="#">Web Design</a></li>
      <li><a href="#">Visual Design</a></li>
    </ul>
</li>
<li class="nav_li"><a href="#">Products</a>
    <ul class="sub_menu">
      <li><a href="#">cms</a>
        <ul class="sub_menu">
          <li><a href="#">asp+Acsecs</a>
            <ul class="sub_menu">
              <li><a href="#">1.2.2</a></li>
              <li><a href="#">1.1.0</a></li>
              <li><a href="#">1.0.0</a></li>
            </ul>
          </li>
          <li><a href="#">php+mysql</a>
            <ul class="sub_menu">
              <li><a href="#">1.2.2</a></li>
              <li><a href="#">1.1.0</a></li>
              <li><a href="#">1.0.0</a></li>
            </ul>
          </li>
          <li><a href="#">Jquery+xml</a></li>
        </ul>
      </li>
      <li><a href="#">Notes Padpc</a></li>
    </ul>
</li>
<li class="nav_li"><a href="#">About</a>
    <ul class="sub_menu">
      <li><a href="#">Our team</a>
        <ul class="sub_menu">
          <li><a href="#">Products</a></li>
          <li><a href="#">Design</a></li>
          <li><a href="#">Ministry</a>
            <ul class="sub_menu">
              <li><a href="#">Products</a></li>
              <li><a href="#">Design</a></li>
              <li><a href="#">Ministry</a></li>
              <li><a href="#">Customer</a></li>
              <li><a href="#">Commerce</a></li>
              <li><a href="#">Officer</a>
              <ul class="sub_menu">
                  <li><a href="#">Products</a></li>
                  <li><a href="#">Design</a></li>
                  <li><a href="#">Ministry</a></li>
                  <li><a href="#">Customer</a></li>
                  <li><a href="#">Commerce</a></li>
                  <li><a href="#">Officer</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Customer</a></li>
          <li><a href="#">Commerce</a></li>
          <li><a href="#">Officer</a></li>
        </ul>
      </li>
      <li><a href="#">Office</a></li>
      <li><a href="#">History</a></li>
    </ul
>
</li>
<li class="nav_li"><a href="#">Services</a></li>
<li class="nav_li"><a href="#">Contact</a></li>
<li class="nav_li"><a href="#">Blog</a></li>
</ul>

css部分：

复制代码代码示例:

/*定义主导航*/
.nav li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; }
.nav li a { color:#fff; font-size:14px; display:block; }

/*下拉菜单样式*/
ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; }
.nav li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; }
.nav li ul.sub_menu li.last { border-bottom:none; } /*js会对最后一个li添加该class，去掉border-bottom效果*/
.nav li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; }
.nav li ul.sub_menu li a:hover, .nav li ul.sub_menu li a.now { background:#f90;color:#fff;}
.nav li.now,.nav li.current { background:#f60;color:#fff;}

/*如果有下拉菜单添加的class*/
.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主导航箭头向下*/
.nav li a.hasmenu { background-position:right -30px;}/*下拉菜单箭头向右*/
.nav li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;}
.nav li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}
</style>

然后是js对菜单的修饰。
首先，需要引入jquery.js，然后，才是本菜单的js调用：

复制代码代码示例:

<script>

$(document).ready(function(){

 //为导航设置默认高亮 与本菜单无关

 $("ul.nav li.nav_li:eq(0)").addClass("current")

 /*jquery menu 开始/

 //为子菜单的最后一个li添加样式，适合为li添加下划线时去除最后一个的下划线

 $(".sub_menu").find("li:last-child").addClass("last")

 //遍历全部li，判断是否包含子菜单，如果包含则为其添加箭头指示状态

 $(".nav li").each(function(){

 if($(this).find("ul").length!=0){$(this).find("a:first").addClass("hasmenu")}

 })

 //

 $(".nav li").hover(function(){

  $(this).addClass("now");

  var menu = $(this);

  mst = setTimeout(function(){

  menu.find("ul.sub_menu:first").slideDown("slow");

  mst = null;

  },500);

 },function(){

  $(this).removeClass("now");

  if(mst!=null)clearTimeout(mst);

  $(this).find("ul.sub_menu:first").slideUp("slow")

 });

 var submenu = $(".sub_menu").find(".sub_menu")

 submenu.css({left:"100px",top:"0px"})

 $(".sub_menu li").hover(function(){

  $(this).find("a:first").addClass("now")

  submst = setTimeout(function(){

  $(this).find("ul:first").slideDown("slow");

  submst = null;

  },500)

 },function(){

  $(this).find("a:first").removeClass("now")

  if(submst!=null)clearTimeout(submst);

  $(this).find("ul:first").slideUp("slow")

 });

/*jquery menu 结束/

})

</script>

效果和本文顶部的效果一致，slideDown,slideUp是展开收起的效果，可以替换为其他特效如fadeIn和fadeOut等。

上一篇：jquery 多级下拉菜单的核心代码
下一篇：jquery 渐变下拉菜单效果代码

与 jquery 无限分级的下拉菜单有关的文章

本文标题：jquery 无限分级的下拉菜单
本页链接：http://www.jb200.com/article/12063.html

浏览排行

栏目分类

热点文章

jquery 无限分级的下拉菜单