我正在尝试创建一个多屏兼容的导航栏（主要是移动和台式机用户）。我已经创建了导航栏所需的样式，但是，我有一个小问题：在中型设备（768px或以下）上展开导航栏然后关闭它时，如果用户将分辨率大小更改为> 768px，则侧面导航栏没有显示。
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
console.log(window.getComputedStyle(sidenav).display);
if (window.getComputedStyle(sidenav).display == "none") {
sidenav.style.display = "block";
} else {
sidenav.style.display = "none";
}
}html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
font-family: "Poppins", sans-serif;
}
.mobile-nav {
height: 70px;
width: 100%;
position: fixed;
background-color: darkblue;
color: grey;
}
.nav-brand {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: #1a1a27;
}
.nav-heading {
display: inline-block;
}
.nav-heading h2 {
color: white;
white-space: nowrap;
}
.nav-icon {
text-align: center;
}
.sidenav {
display: none;
height: 100%;
width: 280px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #1e1e2d;
overflow-x: hidden;
color: grey;
transition: width 0.5s;
}
.sidenav .nav-brand {
padding: 25px 20px;
height: 50px;
background-color: #1a1a27;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.sidenav .nav-heading h2 {
margin: 0;
color: white;
white-space: nowrap;
opacity: 1;
max-width: 0;
transition: 0.16s;
}
#expand-icon {
transition: transform 0.5s;
}
#sidenav-links {
margin: 15px 0px;
}
.sidenav-links a {
padding: 10px 18px;
display: block;
text-decoration: none;
color: #9697aa;
white-space: nowrap;
}
.link {
display: inline-block;
font-size: 20px;
padding-left: 15px;
vertical-align: middle;
color: #9697aa;
opacity: 1;
max-width: 100vw;
}
.active {
background-color: #1b1b28;
}
.active i {
color: #5d78ff;
}
.active .link {
color: white;
}
.fas {
vertical-align: middle;
}
@media only screen and (min-width: 768px) {
.mobile-nav {
display: none;
}
.sidenav {
display: block;
}
.sidenav .nav-brand {
display: flex;
}
.sidenav:not(:hover) {
width: 75px;
}
.sidenav:not(:hover) .nav-heading h2 {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
.sidenav:not(:hover) #expand-icon {
transform: rotate(180deg);
}
.sidenav-links a:hover {
background-color: #1b1b28;
color: #5d78ff;
}
.sidenav-links a:hover .link {
color: white;
transition: none;
}
.sidenav:not(:hover) .link {
opacity: 0;
max-width: 0;
visibility: hidden;
transition: 0.1s 0.2s;
}
}
@media only screen and (max-width: 768px) {
.sidenav .nav-brand {
display: none;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Online CV</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<link
href="https://fonts.googleapis.com/css?family=Poppins&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/6cc49d804e.js"
crossorigin="anonymous"
></script>
<script src="scripts.js"></script>
</head>
<body>
<div class="mobile-nav">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<button onclick="sideNavAction()">
<i id="collapse-icon" class="fas fa-fw fa-bars fa-2x"></i>
</button>
</div>
</div>
</div>
<div class="sidenav" id="sideNavBar">
<div class="nav-brand">
<div class="nav-heading">
<h2>Navbar</h2>
</div>
<div class="nav-icon">
<i id="expand-icon" class="fas fa-fw fa-angle-double-left fa-2x"></i>
</div>
</div>
<div class="sidenav-links">
<a class="active" href="#">
<i class="fas fa-fw fa-id-card fa-2x"></i>
<p class="link">Link 1</p>
</a>
<a href="#">
<i class="fas fa-fw fa-graduation-cap fa-2x"></i>
<p class="link">Link 2</p>
</a>
<a href="#">
<i class="fas fa-fw fa-briefcase fa-2x"></i>
<p class="link">Link 3</p>
</a>
<a href="#">
<i class="fas fa-fw fa-smile-beam fa-2x"></i>
<p class="link">Link 4</p>
</a>
</div>
</div>
</body>
</html>我意识到我的JS函数是造成这种情况的原因，因为它会将侧面导航的显示设置为“无”，但是我无法想到一个优雅的解决方案。
感谢@chriskirknielsen，我得以提出此解决方案，从而解决了我遇到的问题。
/* --- Function to Open/Close Mobile Nav --- */
function sideNavAction() {
let sidenav = document.getElementById("sideNavBar");
if (sidenav.classList.contains("sidenav-mobile-visible")) {
sidenav.classList.remove("sidenav-mobile-visible");
} else {
sidenav.classList.add("sidenav-mobile-visible");
}
}
然后将其添加到我的css文件中
.sidenav-mobile-visible {
display: block;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句