基于Bootstrap、Jquery的自适应导航栏
css代码：
.kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;background-color: #fff;border-bottom: 1px solid #ccc;}
.kch_nav_cont{width: 80%;right: 0px; left: 0px;top:0;position: inherit;margin: 0 auto;}
.kch_nav_logo{width: 100%;float: left;position: relative;z-index: 1000;}
.kch_nav_logo>a>img{margin-top: 0px; margin-left: 0px;padding-top: 8px; padding-bottom: 8px;}
.kch_nav_menu{width: 100%;text-align: right;position: absolute;z-index: 1001;display: block}
.kch_nav_menu>ul{margin-bottom: 0px;}
.kch_nav_menu ul>li{display: inline}
.kch_nav_menu>ul>li{height: 69px;line-height: 69px;}
.kch_nav_menu a{ color: #111; font-size: 1.25em; padding: 21px 25px; text-decoration: none;}
.kch_nav_menu>ul>li>a:hover{color: #42AF41;border-bottom: 3px solid #42AF41;}
.active>a{color: #42AF41;border-bottom: 3px solid #42AF41;}
.mainMenu{display: none}
@media (max-width: 980px) {
.kch_nav_cont{ width: 95%; }
}
@media (max-width: 768px) {
.kch_nav_cont{ width: 100%;}
.kch_nav_menu a{ font-size: 1em; padding: 21px 15px;}
}
@media (max-width: 550px) {
.kch_nav{height: 55px;}
.kch_nav_cont{ width: 100%; }
.kch_nav_logo>a>img{height: 55px; margin-left: 45px;padding-top: 4px; padding-bottom: 4px;}
.kch_nav_menu ul{padding-left: 0px;}
.kch_nav_menu a{ font-size: 1em; padding: 21px 15px;}
.kch_nav_menu{width: 50%;text-align:center; right:0;top:55px;border: 1px solid #ccc;display: none}
.kch_nav_menu ul>li{display: list-item;list-style: none;border-bottom: 1px solid #ccc;}
.kch_nav_menu>ul>li{background:rgba(1,1,1,0.75);height: 45px;line-height: 45px;}
.kch_nav_menu a{ width:100%;color: #fff; font-size: 1.25em; padding-top: 8px;padding-bottom: 8px; text-decoration: none;}
.kch_nav_menu>ul>li>a:hover{color: #42AF41;border-bottom: 0px solid #42AF41;width: 100%;}
.active>a{color: #42AF41;border-bottom: 0px solid #42AF41;}
.mainMenu{display: block;color: #42AF41;font-size:24px;float: right;width: 40px;height: 40px;border:1px solid #ccc;border-radius: 5px;line-height: 40px;text-align: center; margin-right: 45px; margin-top: 7px;}
}
html代码
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="keywords" content="空车汇">
<meta name="description" content="空车汇是联冠汇通团队致力于物流行业智能化、信息化的研究而推出的移动互联网信息平台。旨在有效整合运力，对接货源，降低空驶率、节约成本、提高效率、增强信誉度，让业务智能、可视、可控，实现多方共赢">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>好运费，就上空车汇</title>
<!-- Bootstrap -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn\'t work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src="js/jquery-latest.min.js"></script>
</head>
<body>
<!--//空车汇导航条-->
<div class="kch_nav">
<div class="kch_nav_cont">
<div class="kch_nav_logo">
<a href="#"><img src="images/logo.png"/></a>
<a class="mainMenu" ><i class=" glyphicon glyphicon-th-list"></i> </a>
</div>
<div class="kch_nav_menu">
<ul>
<li class="active"><a href="index.html">首页</a></li>
<li><a href="shipper.html">货主</a></li>
<li><a href="driver.html">车主</a></li>
<li><a href="about.html">关于我们</a></li>
<li><a href="properDistribute.html">交易</a></li>
<li><a href="login.html">登陆</a></li>
</ul>
</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script>
var i=1;
$(\'#kchMainMenu\').click(function(){
++i;
if(i%2==0){
$(\'.kch_nav_menu\').fadeIn(500);
$(this).css(\'color\',\'#b6b6b6\');
}else{
$(\'.kch_nav_menu\').fadeOut(500);
$(this).css(\'color\',\'#42AF41\');
}
})
</script>
</body>
</html>