请老师审批
来源：4-4 自由编程
丶筱云
2019-12-11 11:21:34
1、index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/twelveGrid.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<header class="header">
<div class="container">
<div class="row">
<div class="header-btn-container col-4 d-sm-none">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container d-none d-sm-block col-sm-4">
<ul class="header-nav">
<li class="header-nav-item"><a href="###" class="header-nav-link">首页</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">关于</a></li>
<li class="header-nav-item"><a href="###" class="header-nav-link">商业合作</a></li>
</ul>
</div>
<div class="header-logo-container col-8">
<a href="###" class="header-logo">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
</header>
<nav class="nav" id="nav">
<ul>
<li class="nav-item"><a href="###" class="nav-link">首页</a></li>
<li class="nav-item"><a href="###" class="nav-link">关于</a></li>
<li class="nav-item"><a href="###" class="nav-link">商业合作</a></li>
</ul>
</nav>
<script>
var btn = document.getElementById('btn-toggle');
var nav = document.getElementById('nav');
var navExtendedClassName = 'nav-extended';
btn.onclick =function() {
if(nav.classList.contains(navExtendedClassName)){
nav.removeEventListener('transitionend',bindEvent);
nav.addEventListener('transitionend',bindEvent,false);
nav.classList.remove(navExtendedClassName);
}else{
nav.removeEventListener('transitionend',bindEvent);
nav.style.display = 'block';
nav.classList.add(navExtendedClassName);
}
};
function bindEvent() {
this.style.display = 'none';
}
</script>
</body>
</html>
2、index.css
/*--布局 start--*/
/*header*/
.header{
background-color: #fff;
border-bottom: 1px solid #dadada;
}
.header-btn-container,
.header-nav-container,
.header-logo-container{
height: 65px;
}
/*nav*/
.nav{
height: 0;
background-color: #eee;
overflow: hidden;
transition: height .5s;
}
.nav-extended{
height: 123px;
}
/*--布局 end--*/
/*--组件 start--*/
.btn-toggle {
padding-left: 10px;
padding-right: 20px;
height: 100%;
background-color: #f00;
border:none;
border-radius: 0 100% 0 0;
margin-left: -15px;
cursor: pointer;
outline: none;
}
.btn-toggle-bar {
display: block;
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 4px;
}
.btn-toggle-bar + .btn-toggle-bar{
margin-top: 10px;
}
/*--组件 end--*/
/*--内容 start--*/
.header-logo{
display: flex;
width: 176px;
height: 100%;
justify-content: center;
}
.header-logo img{
width: auto;
height: 100%;
}
.header-nav {
display: flex;
height: 100%;
justify-content: flex-start;
}
.header-nav-item {
margin-left: 20px;
}
.header-nav-item:first-of-type{
margin-left: 0;
}
.header-nav-link {
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
}
.nav-item{
height: 41px;
line-height: 41px;
border-bottom: 1px solid #dadada;
}
.nav-link{
display: block;
height: 100%;
padding:0 10px;
}
/*--内容 end--*/
1回答
-
好帮手慕码
2019-12-11
同学你好，老师测试时候没有twelveGrid文件，引入的是grid.css，效果没有问题，很棒：
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题