老师帮忙检查一下

来源：4-4 自由编程

大师兄js

2020-05-25 15:07:34

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="grid.css">
<title>导航栏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

li {
list-style: none;
}

header {
display: flex;
align-items: center;
border-bottom: 1px solid darkgray;
}

.nav-list {
display: flex;
}

.nav-list li {
margin-left: 20px;
}

.logo {
margin: 0 auto;
}

.logo img {
display: flex;
}

.btn-cricle {
width: 80px;
height: 80px;
background: red;
border-radius: 0 80px 0 0;
display: flex;
justify-content: center;
align-items: center;
}

.yuan {
width: 30px;
height: 30px;
}

.yuan .hr {
width: 30px;
height: 2px;
color: white;
background: white;
margin: 10px 0;
}

.list-nav {
overflow: hidden;
background: darkgray;
height: 0;
transition: height 0.5s;
}

.list-nav-extended {
height: 130px;
}

.li {
padding: 10px 10px;
}

.li + .li {
border-top: 1px solid lightgray;

}

</style>
</head>
<body>
<header>
<div class="d-none d-md-block">
<ul class="nav-list">
<li>首页</li>
<li>关于</li>
<li>商业合作</li>
</ul>
</div>

<div class="btn-cricle d-md-none">
<div class="yuan" id="yuan">
<div class="hr"></div>
<div class="hr"></div>
</div>
</div>
<div class="logo">
<img src="img/logo.png" alt="">
</div>

</header>
<div class="list-nav d-md-none" id="nav">

<li class="li">首页</li>
<li class="li">关于</li>
<li class="li">商业合作</li>

</div>

<script type="text/javascript">
var nav = document.getElementById("nav");
var extendedName = 'list-nav-extended';
document.getElementById("yuan").onclick = function () {
if (nav.classList.contains(extendedName)) {
nav.classList.remove(extendedName)
} else {
nav.classList.add(extendedName)
}
}

</script>
</body>
</html>