jq实现二级下拉菜单动画效果

来源：互联网发布：淘宝千人千面影响编辑：程序博客网时间：2024/05/17 22:25
<!doctype html>  <html lang="en">  <head>      <meta charset="UTF-8">      <title>jq实现二级才拉菜单动画效果</title>    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>     <style>          a{color: white;text-decoration: none;}          nav li{display:block;float: left;width: 150px;height:30px;line-height: 30px;text-align: center;background: #000;position: relative;cursor: pointer;}          nav li a{display:block;}          nav li ul{display: none;width: 150px;position: absolute;left: 0;top: 30px;padding: 0;margin: 0;background-color: red;}      </style>    <script>    $(function(){        $('.has_menu').hover(function(){        $(this).find('ul').slideDown("1500");    },function(){        $(this).find('ul').slideUp("fast");    });    })        </script>  </head>  <body>      <nav>          <li class="has_menu"><a href="">菜单一</a>              <ul>                  <a href="">下拉菜单1</a>                  <a href="">下拉菜单1</a>                  <a href="">下拉菜单1</a>                  <a href="">下拉菜单1</a>                  <a href="">下拉菜单1</a>              </ul>          </li>          <li  class="has_menu"><a href="">菜单二</a>              <ul>                  <a href="">下拉菜单2</a>                  <a href="">下拉菜单2</a>                  <a href="">下拉菜单2</a>                  <a href="">下拉菜单2</a>                  <a href="">下拉菜单2</a>              </ul>          </li>          <li><a href="">菜单三</a></li>          <li><a href="">菜单四</a></li>          <li><a href="">菜单五</a></li>      </nav>  </body>  </html>
0 0