老师能帮我看看这个下拉栏吗
来源：3-2 作业题
远世4101394
2019-08-14 17:03:49
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, minimum-scale=2, user-scalable=no, minimal-ui"> -->
<!-- <link rel="stylesheet" type="text/css" href="css/index.css"> -->
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
a{
text-decoration: none;
}
body{
height: 35rem;
}
.slide-1{
width: 100%;
height: 600px;
background-color: #B2C5CC;
}
.btn-header-container{
height: 80px;
background-color: #7da7ae;
position: relative;
}
.btn-header{
color: #fff;
font-size: 40px;
line-height: 80px;
text-align: center;
}
.btn-toggle{
width: 40px;
height: 22px;
position: absolute;
top: 30px;
right: 40px;
}
.btn-toggle-bar{
width: 40px;
height: 4px;
background-color: #fff;
display: block;
}
.btn-toggle-bar + .btn-toggle-bar{
margin-top: 5px;
}
/*nav*/
.nav-link {
display: block;
width: 100%;
height: 40px;
line-height: 40px;
font-size: 30px;
text-align: center;
background-color: #7da7ae;
border-bottom: 1px solid #fff;
color: #fff;
}
.nav-container {
overflow: hidden;
position: absolute;
top: 80px;
height: 0;
border-bottom: 1px solid #dadada;
transition: height 0.5s;
}
.nav-container-extended {
width: 100%;
height: 285px;
}
</style>
</head>
<body>
<div class="slide-1">
<div class="container">
<!-- 按钮+标题 小屏显示 -->
<div class="btn-header-container">
<div class="btn-header">imooc</div>
<div class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</div>
</div>
<!-- 标题 中屏显示 -->
<div class="header-container" style="display: none;">
<a href="#" class="active">前端</a>
<a href="#">java</a>
<a href="#">ios</a>
<a href="#">Android</a>
<a href="#">php</a>
</div>
</div>
</div>
<nav class="nav-container d-md-none" id="nav">
<ul class="container">
<li><a href="#" class="nav-link">前端</a></li>
<li><a href="#" class="nav-link">java</a></li>
<li><a href="#" class="nav-link">ios</a></li>
<li><a href="#" class="nav-link">Android</a></li>
<li><a href="#" class="nav-link">php</a></li>
</ul>
</nav>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
var nav = document.getElementById('nav');
var navExtendedClassName = 'nav-container-extended';
document.getElementById('btn-toggle').onclick = function(){
if(nav.classList.contains(navExtendedClassName)){//隐藏
nav.classList.remove(navExtendedClassName);
}else{//展开
nav.classList.add(navExtendedClassName);
}
}
</script>
</body>
</html>
1回答
-
同学你好，
① 老师这边测试代码发现的问题是，点击按钮隐藏的时候导航栏会从全屏显示，变成靠左显示之后隐藏；
修改如下：
隐藏效果：
② 如果不是这个意思，同学可以在问答区重新提问，并且详细描述问题，以便老师高效的为你解答哦~
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题