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

总结响应式网站的导航栏

2017-07-11 14:17 357 查看

这是我们在PC端浏览的效果

这是我们在手机上浏览的效果

完整代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
ul {
padding: 0;
margin: 0;
}

a {
text-decoration-style: none;
color: white;
text-decoration: none;
}

li {
list-style: none;
}

nav {
text-align: center;
background: #25383c;
}

.nav-list-item a{
color:white;
display:block;
padding:20px 40px;
}

.nav-list-item:hover> ul{
display:block;
}

.nav-submenu-list {
display: none;
}

.menu-btn{
border:none;
padding:8px 0;
}

.clearfix{
content:'';
display:block;
clear:both;
}

.btn-icon-close{
background:url("./images/cross.png") no-repeat center center;
}

.btn-icon-menu {
background: url("./images/icon.png") no-repeat center center;
}

.menu-btn-icon{
border:none;
width:30px;
height:30px;
background-size:cover;
float:left;
cursor:pointer;
margin-left:10px;
}

.nav-submenu-list {
background: gray;
}

@media all and (min-width:480px){
.nav-list-item{
display:inline-block;
position:relative;
}

.nav-submenu-list{
display:none;
position:absolute;
left:0;
top:100%;
}

.nav-container-list{
max-width:1280px;
margin:0 auto;
}

.menu-btn{
display:none;
}
}
</style>
</head>
<body>
<nav>
<div class="menu-btn">
<a href="javascript:void(0)" class="menu-btn-icon btn-icon-close"></a>
<div class="clearfix"></div>
</div>
<ul class="nav-container-list">
<li class="nav-list-item"><a href="">首页</a></li>
<li class="nav-list-item"><a href="">关于我</a></li>
<li class="nav-list-item">
<a href="">开源项目</a>
<ul class="nav-submenu-list">
<li class="nav-submenu-item"><a href="">subitem1</a></li>
<li class="nav-submenu-item"><a href="">subitem1</a></li>
<li class="nav-submenu-item"><a href="">subitem1</a></li>
<li class="nav-submenu-item"><a href="">subitem1</a></li>
</ul>
</li>
<li class="nav-list-item"><a href="">订阅</a></li>
</ul>
</nav>

<script type="text/javascript">
var btn = document.querySelector('.menu-btn-icon');
var menu = document.querySelector('.nav-container-list');
var menuIsCollapse = false;

btn.onclick = function () {
menuIsCollapse = !menuIsCollapse;
if (menuIsCollapse) {
menu.style.display = 'none';
btn.classList.remove('btn-icon-close');
btn.classList.add('btn-icon-menu');
} else {
menu.style.display = 'block';
btn.classList.remove('btn-icon-menu');
btn.classList.add('btn-icon-close');
}
}
</script>
</body>
</html>

代码摘抄自《高性能响应式web开发》

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

标签：

相关文章推荐

新的分享

章节导航

总结 响应式网站的导航栏

总结响应式网站的导航栏