您的位置：首页 > 运维架构 > 网站架构

响应式导航设计（仿写csdn博客网站的导航栏）

2017-08-11 22:25 357 查看

自己仿照csdn博客网站的导航栏 ,利用bootstrap jQuery 仿写了一个响应式导航栏（请忽略我的配色！！）

1.效果图：

1.1电脑访问

1.2移动设备

2.代码:

<!DOCTYPE html>
<html lang="en">
<head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="UTF-8"/>
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}

#li-menu{
display: none;
}
#div-main-content{
width: 100%;
height:1000px;

margin-top: 2%;
}
#div-operation-container{
border-radius: 3%;
width: 10%;
float: left;
height: 1000px;
padding: 0;
border-style: solid;
border-color: gray;
}
#div-display-bebind{
width: 100%;
height: 100%;
z-index: 0;
background-color: #2aabd2;
display: none;
}
#tb-operation-list{
width: 100%;
}
#tb-operation-list tr{
height: 3%;
}

#div-operation-container a{
color: black;
text-decoration-color: black;
text-decoration-line: none;
}
#div-operation-container a:hover{
color: white;
}
.div-operation{
margin: 0;
padding: 0;
}
#div-display{
border-radius: 3%;
width: 87%;
height: 1000px;
float: right;
border-style: dashed;
border-color: #f9f9f9;
}
@media (max-width:1080px)
{
#div-display-bebind{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 0;
background-color:gray;
display: none;
float: right;
opacity: 0;
}
#div-operation-container {
position: absolute;
top: 0;
z-index: 1;
border-radius: 3%;
display: none;
height: 1000px;
padding: 0;
width: 50%;
margin-left: -50%;
background-color: gray;
border-style: none;
}

#div-operation-container  a{
text-decoration-color: white;
color: white;
}
#tb-operation-list{
margin-top: 30%;
width: 100%;
}
#null2r{
display: none;
}
#div-display{
width: 100%;
}
#null1{display: none;}
#li-home{display: none;}
#li-menu{
display:block;
}
}
</style>
</head>
<body>
<nav class="nav navbar-inverse " role="navgation">
<div class="container-fluid">
<ul class="navbar-nav nav">
<li id="li-menu"><a href="#"><span class="glyphicon glyphicon-list"></span></a></li>
<li id="li-home" class="active"><a href="#">首页</a></li>
<li id="null1"><a href="#">先空着</a></li>
<li id="null2r"><a href="#">先空着</a></li>
</ul>
</div>

</nav>
<div id="div-main-content">
<div id="div-operation-container" >
<table id="tb-operation-list" class="table table-responsive">
<tr id="tr-order-management">
<td>
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
<a  href="#">菜单一</a>

</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<a  href="#">菜单二</a>
</td>
</tr>
<tr>
<td>
<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
<a  href="#">菜单三</a>
</td>
</tr>

</table>
</div>
<div id="div-display">
<div id="div-display-bebind">
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">

$(document).ready(function () {
$("#li-menu").click(function () {
var displayWay = $("#div-operation-container").css("display");//获取显示方式
if (displayWay == "none") {
$("#div-operation-container").css("display", "block");//设置显示方式为 块 方式
$("#div-display-bebind").css("display", "block");
$("#div-operation-container").animate({marginLeft: '0px'}, 1000);//设置动画移动  从屏幕外移到屏幕内（前面css设置的为负的50%)
$("#div-display-bebind").animate({opacity: '0.5'}, 1000);//设置不透明度渐变
}
});
$("#div-display-bebind").click(function () {
$("#div-operation-container").animate({marginLeft:'-50%'},800,function () {
//此为动画 .animate的回调函数
$("#div-operation-container").css("display","none");//隐藏
});
$("#div-display-bebind").animate({opacity:'0.0'},800,function () {
$("#div-display-bebind").css("display","none");
});
});

});

</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： bootstrap jquery 响应式导航 csdn博客

相关文章推荐

新的分享

章节导航