jquery实现各种常用下拉菜单

2015-5-13 Jon js+jquery+ajax

jquery实现简单下拉菜单

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>简单下拉菜单</title>
    <style>
      *{margin:0;padding:0;}
      body{padding:30px 200px;background: #666699;line-height: 32px;color:#330000;}
      ul,li{list-style: none;}
      .hide{background: #ddd;border:1px solid #bbb;display: none;float:left;}
      li{border:1px solid #bbb;padding:0 10px;}
      .menu-title,.hide li{cursor:pointer;}
      .hide li:hover{color:#660099;background: #996666}
    </style>
  </head>
  <body>
    <div class="menu">
      <h3 class="menu-title">爱拼才会赢</h3>
      <ul class="hide">
        <li>一时失志不免怨叹</li>
        <li>一时落魄不免胆寒</li>
        <li>那通失去希望</li>
        <li>每日醉茫茫</li>
        <li>无魂有体亲像稻草人</li>
        <li>人生可比是海上的波浪</li>
        <li>有时起有时落</li>
        <li>好运歹运</li>
        <li>总嘛要照起工来行</li>
        <li>三分天注定</li>
        <li>七分靠打拼</li>
        <li>爱拼才会赢</li>
      </ul>
    </div>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
      $(function(){
        $('.menu').hover(function(){
          // $('.hide').slideToggle();或者
          $(this).children('.hide').stop().slideToggle(500);
        });
      })();
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

jquery实现多个下拉菜单

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>多个下拉菜单</title>
    <style>
      *{margin:0;padding:0;}
      body{padding:30px 200px;background: #666699;line-height: 32px;color:#330000;}
      ul,li{list-style: none;}
      .hide{background: #ddd;border:1px solid #bbb;display: none;float:left;}
      li{border:1px solid #bbb;padding:0 10px;}
      .menu-title{clear:both;width: 200px}
      .menu-title,.hide li{cursor:pointer;}
      .hide li:hover{color:#660099;background: #996666}
      .hide1{display: block;}
    </style>
  </head>
  <body>
      <h3 class="menu-title">111爱拼才会赢</h3>
      <ul class="hide hide1">
        <li>一时失志不免怨叹</li>
        <li>一时落魄不免胆寒</li>
        <li>那通失去希望</li>
        <li>每日醉茫茫</li>
        <li>无魂有体亲像稻草人</li>
        <li>人生可比是海上的波浪</li>
        <li>有时起,有时落</li>
        <li>好运,歹运</li>
        <li>总嘛要照起工来行</li>
        <li>三分天注定</li>
        <li>七分靠打拼</li>
        <li>爱拼才会赢</li>
      </ul>
      <h3 class="menu-title">222爱拼才会赢</h3>
      <ul class="hide">
        <li>一时失志不免怨叹</li>
        <li>一时落魄不免胆寒</li>
        <li>那通失去希望</li>
        <li>每日醉茫茫</li>
        <li>无魂有体亲像稻草人</li>
        <li>人生可比是海上的波浪</li>
        <li>有时起,有时落</li>
        <li>好运,歹运</li>
        <li>总嘛要照起工来行</li>
        <li>三分天注定</li>
        <li>七分靠打拼</li>
        <li>爱拼才会赢</li>
      </ul>
      <h3 class="menu-title">333爱拼才会赢</h3>
      <ul class="hide">
        <li>一时失志不免怨叹</li>
        <li>一时落魄不免胆寒</li>
        <li>那通失去希望</li>
        <li>每日醉茫茫</li>
        <li>无魂有体亲像稻草人</li>
        <li>人生可比是海上的波浪</li>
        <li>有时起,有时落</li>
        <li>好运,歹运</li>
        <li>总嘛要照起工来行</li>
        <li>三分天注定</li>
        <li>七分靠打拼</li>
        <li>爱拼才会赢</li>
      </ul>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
      $(function(){
        $('.menu-title').click(function(){
          $(this).next('.hide').slideToggle().siblings('.hide').slideUp();
        });
      })();
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

jquery实现可以无限极的下拉菜单

    <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>联级下拉菜单</title>
    <style>
      /*清除浮动代码*/
      .clearfix:before, .clearfix:after {
          display: table;
          content: " ";
      }
      .clearfix:after {
          clear: both;
      }
      .clearfix {
          *zoom: 1;
      }
      *{margin:0;padding:0;}
      body{padding:30px 50px;background: #666699;line-height: 32px;color:#330000;}
      ul,li{list-style: none;}
      .menu-out{background:#ccc;}
      .menu-out>li{float:left;text-align: center;padding:0 20px;margin:0 20px;}
      .menu{position: relative;}
      .menu span{cursor:pointer;}
      .menu-hide{position: absolute;top:32px;display: none;background: #ddd;border:1px solid #aaa;}
      .menu-hide>li{border-bottom:1px solid #fff;padding:0 10px;}
      .menu-hide>li:hover{background: #bbb}
    </style>
  </head>
  <body>
    <ul class="menu-out clearfix">
      <li class="menu"><span>111111</span>
        <ul class="menu-hide">
          <li class="menu"><span>1111111111111</span>
            <ul class="menu-hide">
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
            </ul>
          </li>
          <li><span>1111111111111</span></li>
          <li><span>1111111111111</span></li>
        </ul>
      </li>
      <li class="menu"><span>222222</span>
        <ul class="menu-hide">
          <li class="menu" ><span>222222222222</span>
            <ul class="menu-hide">
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
            </ul>
          </li>
          <li><span>222222222222</span></li>
          <li><span>222222222222</span></li>
        </ul>
      </li>
      <li class="menu"><span>333333</span>
        <ul class="menu-hide">
          <li class="menu"><span>333333333333</span>
            <ul class="menu-hide">
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
            </ul>
          </li>
          <li><span>333333333333</span></li>
          <li><span>333333333333</span></li>
        </ul>
      </li>
      <li class="menu"><span>444444</span>
        <ul class="menu-hide">
          <li class="menu"<span>444444444444</span>
            <ul class="menu-hide">
              <li class="menu"><span>444444444444</span>
                <ul class="menu-hide">
                  <li><span>1111111111</span></li>
                  <li><span>1111111111</span></li>
                  <li><span>1111111111</span></li>
                </ul>
              </li>
              <li><span>444444444444</span></li>
              <li><span>444444444444</span></li>
            </ul>
          </li>
          <li class="menu">
            <span>444444444444</span>
            <ul class="menu-hide">
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
            </ul>
          </li>
          <li class="menu"><span>444444444444</span>
            <ul class="menu-hide">
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
              <li><span>1111111111</span></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
    <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script>
      $(function(){
        $('.menu').hover(function(){
          var oLeft=0;
          var oTop=$(this).outerHeight(true);
          if($(this).parent().attr('class')=='menu-hide'){
            oLeft=$(this).outerWidth(true);
            oTop=0;
          }
          $(this).children('.menu-hide').css({'left':oLeft,'top':oTop}).stop(true,true).slideToggle(200);
        });
      });
    </script>
  </body>
  </html>

您可以修改框中代码后运行查看

标签: jquery下拉菜单

分享这篇文章

赞助鼓励：如果觉得内容对您有所帮助，您可以支付宝(左)或微信(右)：

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

下一篇那些年，我们一起考驾照
上一篇js，jquery分别实现各种拖拽

发表评论：

知向前端

jquery实现各种常用下拉菜单

jquery实现简单下拉菜单

jquery实现多个下拉菜单

jquery实现可以无限极的下拉菜单

声明：如无特殊注明，所有博客文章版权皆属于作者，转载使用时请注明出处。谢谢！

搜索

日历

最新微语

最新评论

分类

随机文章

最新文章

热门文章

存档