jquery实现鼠标悬浮滑动下拉二级菜单

1、HTML部分


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>鼠标悬浮滑动下拉二级菜单</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="nav">
  <ul class="main">
      <li>首页
      </li>
      <li id="li-1">消费者服务
          <span></span>
          <ul id="box_1" class="box_info">
              <li>产品信息</li>
              <li>商家信息</li>
              <li>关于我们</li>
          </ul>
      </li>
      <li id="li-2">商务服务
          <span></span>
          <ul id="box_2" class="box_info">
              <li>服务理念</li>
              <li>服务产品</li>
              <li>商铺汇总</li>
          </ul>
      </li>
      <li>关于我们
      </li>
  </ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>

2、CSS部分

.nav{
    margin:100px auto;
    width:700px;
    height:36px;
    background:#643519;
    position:relative;
    text-align:center;
    line-height:36px;
    font-size:12px;
}
li{
    list-style: none;
    float:left;
}
.main>li{
    width:150px;
    color:#eee;
    font-size:14px;
}
.main span{
    display:inline-block;
    width:7px;
    height:7px;
    background:url(../images/down-icon.png) no-repeat;
    margin-left:18px;
}
.box_info{
    width: 110px;
    border: 1px solid #643519;
    display:none;
    position:absolute;
    color:#643519;
    padding:0;
    margin-left:20px;
}
.box_info li{
    color: #643519;
    cursor: pointer;
    font-size:13px;
    width:100%;
}
.box_info li:hover{
    background: #643519;
    color: #fff;
}
/*图标向上旋转*/
.hover-up{
    transition-duration: .5s;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
}
/*图标向下旋转*/
.hover-down{
    transition-duration: .5s;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
}

3、JS部分

$(document).ready(function(){
    var num;
    $('.main>li[id]').hover(function(){
        /*图标向上旋转*/
        $(this).find("span").removeClass().addClass('hover-up');
        /*下拉框出现*/
        var Obj = $(this).attr('id');
        num = parseInt(Obj.substring(3, Obj.length));
        $('#box_'+num).slideDown(300);
    },function(){
        /*图标向下旋转*/
        $(this).find("span").removeClass().addClass('hover-down');
        /*下拉框消失*/
        $('#box_'+num).hide();
    });
});

4、效果图

jquery实现鼠标悬浮滑动下拉二级菜单

猜你喜欢