自适应导航栏
程序员文章站
2023-12-30 18:33:58
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2443051_erm4fc6b5a.css">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.box {
width: 100px;
height: 100px;
overflow: hidden;
overflow-x: auto;
display: flex;
}
.box ul {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
}
.box li {
/* display: flex; */
/* width: 100px; */
height: 20px;
line-height: 20px;
margin-left: 12px;
/* margin: 0 9px; */
background-color: royalblue;
}
header {
width: 100%;
background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo_icon {
display: none;
}
.menu ul {
display: flex;
/* flex-direction:column */
}
.menu ul li {
margin: 0 10px;
}
.logo {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width:1366px) {
header {
background-color: yellowgreen;
}
header {
flex-direction: column;
}
.logo {
display: flex;
width: 100%;
align-items: flex-start
}
.menu {
width: 100%;
text-align: left;
transition: all .5s;
}
.menu ul {
display: flex;
flex-direction: column;
}
.menu ul li {
margin: 0;
}
.logo_icon {
display: block;
}
input[type='checkbox'] {
cursor: pointer;
position: relative;
width: 13px;
height: 13px;
font-size: 13px;
margin-right: 5px;
background-color: red;
display: none;
}
.choose_img {
font-size: 25px;
}
}
</style>
</head>
<body>
<header>
<div class="logo">
<div class="logo_img">logo</div>
<div class="logo_icon">
<label for="choose">
<i class="choose_img iconfont icon-zhankai"></i>
<input type="checkbox" id="choose">
</label>
</div>
</div>
<div class="menu">
<ul>
<li>我们</li>
<li>中心</li>
<li>退出</li>
</ul>
</div>
</header>
<script>
window.onload = function () {
let choose = document.getElementById("choose")
let choose_img = document.getElementsByClassName("choose_img")[0]
let menu = document.querySelector(".menu")
choose.addEventListener('change', function () {
menu.style.display = choose.checked ? 'none' : 'block'
choose_img.className = choose.checked ? 'choose_img iconfont icon-shouqi' :
'choose_img iconfont icon-zhankai';
})
}
</script>
</body>
</html>
也可以直接通过css样式，checkbox是否选中来控制显示和隐藏，