尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    JQuery制作无限级下导航拉菜单详解

    作者:hi379  来源:hi379  发表时间:2009-8-12 11:45:08  点击:3832

    以前也写过关于JQuery制作二级菜单的方法,今天自己彻底研究了一下无限级的下拉菜单,总结一下制作方法。相信无限级的会做了以后你就能掌握下拉落单这个技术了。进入正题…

    我先给出我的基本制作流程:

    1.写出结构合理的xhtml。 主要用到列表ul的嵌套。

    2.写好布局的CSS代码。 主要给子菜单定位和相关设置。

    3.写出JQuery代码。 主要用到JQuery的一个hover()方法

    一:xhtml
    为了不至于太乱我们可以先研究一个菜单的xhtml代码。我写出了我认为比较合理的一种,如果你看起来吃力的话有个好办法就是抄十遍:

    <li><a href="#">Menu1</a> //.menu1是菜单的个数,可以整体copy
        <ul> //.item的作用是为隐藏后面的li,.menu的作用是为JQuery提供循环
          <li><a href="#">Menu-item1</a></li>
          <li><a href="#">Menu-item2</a></li>
          <li><a href="#">Menu-item3</a></li>
          <li><a href="#">Menu-item4</a>
            <ul>
                  <li><a href="#">Menu-item1</a></li>
                  <li><a href="#">Menu-item2</a></li>
                  <li><a href="#">Menu-item3</a></li>
                  <li><a href="#">Menu-item4</a></li>
                </ul>
          </li>
        </ul>
      </li>注意:这里我只给出了两个子菜单,要让它无限扩充的话只要把”ul.menu”所有代码复制到你相加的子菜单的li标签里面的a标签之后

    二:核心CSS代码
    .menu   { width:100px; float:left; border-right:5px solid #000}
    .menu1  { float:left; width:100px;}
    #menu li  { width:100px;}
    .menu a  { height:25px; line-height:25px; width:100px;
     border:1px solid #f00; display:block; text-align:center; }

    .item li  { display:none;} /*通常情况下隐藏子菜单*/
    .item li  { position:relative;}
    /*设置相对定位,便于子菜单位于父菜单的右侧100px*/.item li ul { position:absolute; left:100px; top:0;}

    三:JQuery代码
    $(function (){
     $(".menu li").hover(//让.menu下面的列表项li响应鼠标移到到上面的事件
      function (){
       $(this).children().children("li").fadeIn();
          //当前对象的子子元素li淡出
      },
      function (){
       $(this).children().children("li").fadeOut();
          //当前对象的子子元素li淡出
      }
     );
    });最终代码与效果预览

    注意:IE6中会出现一点bug,如果你知道解决方法的话可以谈讨一下

     

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗