用到了boostrap导航条组件,但并不使用其默认的样式,便于修改。
响应式导航条效果:
代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.main-navigation{
text-align: center;
background: #ffffff;
border-top: 1px solid #ebebeb;
border-bottom: 3px solid #e1e1e1;
margin-bottom: 35px;
}
.main-navigation .menu{
margin: 0;
padding: 0;
}
.menu li{
list-style: none;
display: inline-block;
}
.menu li a{
display: block;
text-decoration: none;
outline:none;
color: #505050;
line-height: 4em;
padding: 0 21px;
}
.menu .active{
border-bottom: 3px solid #e67e22;
margin-bottom: -2px;
}
.menu li a:hover{
color:#e67e22;
}
.logo img{
width: 200px;
height: 56px;
margin-right: -60px;
margin-top: -10px;
}
.navbar-header span{
font-size: 1.5em;
line-height: 56px;
height: 56px;
}
#mynav{
float:left;
}
</style>
</head>
<body>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//jQuery改变鼠标样式
$(function(){
$('.menu li a').hover(function(){
$(this).addClass('active');
},function(){
$(this).removeClass('active');
}
);
});
</script>
<nav class="main-navigation">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a href="#" class="logo">
<img src="img/logo.jpg">
</a>
<span>XXXX</span>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mynav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="mynav">
<ul class="menu">
<li class="active"><a href="#" > 首页</a></li>
<li><a href="#"> 菜单1</a></li>
<li><a href="#"> 菜单2</a></li>
<li><a href="#"> 菜单3</a></li>
<li><a href="#"> 菜单4</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</body>
</html>