小米下拉导航栏，36kr 下拉导航栏解决方法
2018-04-02 19:56
309 查看
最近在仿写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);
}
});
});
在这里贴上代码记录<!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);
}
});
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用grid控件时，含有combo列表框的情况下，无法显示下拉列表，可能的解决方法
- 在Excel中让某一列的值必须从下拉框中选择的解决方法
- VC中点击ComboBox下拉列表不显示数据的解决方法
- 魅族手机 取消下拉悬停 解决方法
- 聊天界面使用IQKeyboardManager导航栏及整个页面上移的解决方法
- 关于jQuery对下拉框通过val取不到值的解决方法
- ios11导航栏按钮不适配解决方法
- VC中点击ComboBox下拉列表不显示数据的解决方法
- iOS11适配工作及导航栏影藏返回文字的解决方法
- Windows Server 2008安装 百度Wifi \ 360Wifi \ 小米Wifi 失败的解决方法
- 固定宽度下拉列表中option内容显示不全问题解决方法
- iOS开发之导航栏各种右滑返回失效的解决方法汇总
- vue.js 底部导航栏 一级路由显示 子路由不显示的解决方法
- 当cell很少的情况下（没有占满屏幕）,不能拖拽collectionView进行下拉刷新,解决方法
- jQueryMobile新版中导航栏按钮消失的解决方法
- qtp录制ajax 下拉框 不成功解决方法
- 织梦自定义字段【option下拉框】【radio选项卡】【Checkbox多选框】默认值过多无法显示解决方法
- IE中下拉列表遮盖问题的解决方法
- html固定宽度下拉框内容显示不全问题解决方法
- IE中下拉列表遮盖问题的解决方法