小米下拉导航栏，36kr 下拉导航栏解决方法

最新推荐文章于 2022-09-01 15:36:43 发布

qq_37996815

最新推荐文章于 2022-09-01 15:36:43 发布

阅读量1.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37996815/article/details/79794134

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

最近在仿写36kr的官网，发现如何实现导航栏的下拉功能

在这里贴上代码记录

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>36kr-让你提前看见</title>
    <link rel="stylesheet" href="css/nav.css">
    <link rel="icon" href="image/logo-a6afc.png">
</head>
<body>
  <div  class="nav-bg">
      <div class="nav">
           <div class="nav-left">
               <a href="" >
                   <img src="image/logo-a6afc.png" width="63" style="margin-top: 10px" alt="36kr">
               </a>
               <ul class="nav-li">
                  <li><a href="">首页</a></li>
                   <li>
                       <a href="" class="hoverAction">开氪</a>
                   </li>
                   <li>
                       <a href="" class="hoverAction">7x24小时快讯</a>
                   </li>
                   <li>
                       <span><a href="" class="hoverAction ">创业者服务</a></span>
                   </li>
                   <li>
                       <span><a href="" class="hoverAction">投资人服务</a></span>
                   </li>
                   <li>
                       <span><a href="" class="hoverAction">联系我们</a></span>
                   </li>
               </ul>
           </div>
           <div class="nav-right"></div>
      </div>
      <div class="nav-menu">
          <div></div>
          <div></div>
          <div></div>
          <div class="nav-wrap ec">
              <div class="nav-wrap-bg">
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/ic_report@2x-bc294.png" alt="创业者报道"><br>
                          <span>寻求报道</span><br>
                          <span>最贴心的服务，最优质的报道</span>
                      </a>

                  </div>
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/ic_activity@2x-966df.png" alt="最近活动"><br>
                          <span>近期活动</span><br>
                          <span>提供最有价值的创投活动</span>
                      </a>
                  </div>
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/jingzhun-logo-1-614ef.png" alt="鲸准"><br>
                          <span>鲸准</span><br>
                          <span>让每一次选择都最有价值</span>
                      </a>
                  </div>
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/gn8pet9cnj7jc1vw.png" alt="氪空间"><br>
                          <span>可空间</span><br>
                          <span>让办公更简单</span>
                      </a>
                  </div>
              </div>
          </div>
          <div class="nav-wrap is">
              <div class="nav-wrap-bg">
                  <div class="wrap-item">

                      <a href="">
                          <img src="image/ic_cooperation@2x-4c322.png" alt="投资机构"><br>
                          <span>VClub投资机构合作</span><br>
                          <span>助力投资机构领跑新商业时代</span>
                      </a>

                  </div>
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/jingzhun-logo-1-614ef.png" alt="个人版"><br>
                          <span>鲸准.个人版</span><br>
                          <span>投资人的随身数据词典</span>
                      </a>
                  </div>
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/jingzhun-logo-1-614ef.png" alt="鲸准"><br>
                          <span>鲸准.企业版</span><br>
                          <span>投资机构的全流程管理系统</span>
                      </a>
                  </div>
             </div>


          </div>
          <div class="nav-wrap cu">
              <div class="nav-wrap-bg">
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/ic_submission@2x-8d888.png" alt="我要投稿"><br>
                          <span>我要投稿</span><br>
                          <span>提升影响力的最有效方式</span>
                      </a>

                  </div>
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/ic_cooperation2@2x-9185b.png" alt="商务合作"><br>
                          <span>商务合作</span><br>
                          <span>让品牌超越昨天，先见未来</span>
                      </a>
                  </div>
                  <div class="wrap-item">
                      <a href="">
                          <img src="image/1is2ilcd29dsxx07.png" alt="城市加盟"><br>
                          <span>城市加盟</span><br>
                          <span>携手并进，共享红利</span>
                      </a>
                  </div>
              </div>


          </div>
      </div>

  </div>
  <script src="js/jquery.js"></script>
  <script src="js/nav.js"></script>
</body>
</html>

css代码：

*{
    padding: 0;
    margin: 0;

}
a{
    text-decoration: none;
   color: lightgrey;
}
li{
    list-style: none;
}
.nav-bg{
    width: 100%;
    height: 65px;
    border-bottom: 2px solid lightgrey;
    box-shadow: 2px 2px 5px lightblue;
}
.nav{
    width: 1120px;
    height: 65px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
.nav-left{
    width: auto;
    height: 100%;
    display: flex;
}
.nav-right{
    width: auto;
    height: 100%;
}
.hoverAction:hover{
    color: deepskyblue;
}
.nav-left ul{
    margin-top: 15px;
}
.nav-left ul li{
    float: left;
    margin-left: 20px;

}
.nav-left ul li a{
    color: #6e6e6e;
}
.nav-wrap{
    width: 100%;
    height: 200px;
    background: #f4fff4;
    border-bottom: 1px solid lightgrey;
    /*display: flex;*/
    /*justify-content: center;*/
    display: none;
   clear: both;
}
/*给下拉导航栏设置样式*/
.wrap-item{
    width: 200px;
    height: 83%;
    float: left;
    /*background: red;*/
    margin-left: 20px;
   text-align: center;
    position: relative;
    padding: 10px;
    margin-top: 20px;
    /*margin: 0 auto;*/
}
/*给下拉导航栏设置右边框*/
.wrap-item:after{
   width: 1px;
    height: 100px;
    background: darkgray;
    content: '';
    position: absolute;
    left: 100%;
    top: 7%;
}
.wrap-item img{
    width: 64px;
    height: 64px;
}
.nav-wrap-bg{
    width: 1000px;
    height: 100%;
    margin: 0 auto;
}

js代码

/**
 * Created by Administrator on 2018/4/2.
 */
$(document).ready(function () {
      //设置导航栏鼠标划入样式
    //设定一个间隔时间，防止鼠标在短时间内滑入滑出，影响效果
       var duration=null;
    $('.nav-li li').mouseenter(function () {
         // 获取当前时间的时间戳
          var time=(new Date()).getTime();
          //判断时间间隔
           if((time-duration)>300){
               //获取当前li的index
               var index=$(this).index();
               //让响应的下拉菜单那进行显示
               //     清除所有的显示
               $('.nav-menu>div').css('display','none');
               $('.nav-menu').children().eq(index).slideDown(300);
           }
           //将新的时间赋予duration
         duration=time;
    });
    $('.nav-menu').mouseleave(function () {
        //获取当前li的index
        // var index=$(this).index();
        //让响应的下拉菜单那进行显示
        $('.nav-menu').children().slideUp(100);
    });
    // 鼠标离开nav的ul的时候判断，鼠标是不是在nav-menu上面
    $('.nav-li').mouseleave(function (e) {
          // 获取鼠标Y轴坐标
         var y=e.pageY;
         var X=e.pageX;
         console.log(X);
         // 获取ul坐标
        var ulx=$(this).offset().left;
        var uly=$(this).offset().top;
        var ulw=$(this).width();
        var ulh=$(this).height();
        console.log(ulx+ulw);
             //获取nav-menu的高度
         var height=$('.nav-menu').height();
         // 判断鼠标是否在ul里面
         if(y>24 && y<(64+height) && X<(ulx+ulw)  ){
              //啥也不做就是显示
         }else {
             //超出隐藏
             $('.nav-menu').children().slideUp(100);
         }
    });
});