javascript - 固定位置的导航栏问题
问题描述
我的主要目标是制作一个位置固定的导航栏。我无法介绍它,因为一旦我将元素放入我.nav{}
所有的子元素挤压到左上角。现在这就是我所拥有的:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
} else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.3}s`;
}
});
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
position: fixed;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
font-family: 'Poppins', sans-serif;
background-color: #5D4954;
}
.logo {
color: rgb(226, 226, 226);
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 80%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: rgb(226, 226, 226);
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
cursor: pointer;
}
.burger div {
width: 25px;
height: 3px;
background-color: rgb(226, 226, 226);
margin: 5px;
transition: all 0.3 ease;
}
@media screen and (max-width:1024px) {
.nav-links {
width: 60%;
}
}
/* Commented so as to reproduce the problem visually
@media screen and (max-width:768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #5D4954;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5 ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
}
}*/
.nav-active {
transform: translateX(0%);
}
@keyframes navLinkFade {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0px);
}
}
.toggle .line1 {
transform: rotate(-45deg) translate(-5px, 6px);
}
.toggle .line2 {
opacity: 0;
}
.toggle .line3 {
transform: rotate(45deg) translate(-5px, -6px);
}
<html>
<link href="https://fonts.googleapis.com/css2?family=Poppins" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<body>
<nav>
<div class="logo">
<h4>The Nav</h4>
</div>
<ul class="nav-links">
<li>
<a href="#start">Get Started</a>
</li>
<li>
<a href="#information">Information</a>
</li>
<li>
<a href="#survey">Contact Us</a>
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
<script src="app.js"></script>
</body>
</html>
解决方案
添加width: 100%;
到您的nav{}
规则
推荐阅读
- javascript - Vue printing page without footer and header
- zeromq - zmq_ctx_destroy freezes - how to solve?
- javascript - 对象内的映射数组
- r - Shinydashboard:选项卡框中项目的垂直渲染不正确
- php - 何时在 Laravel Horizon 中使用多个主管
- reactjs - React:点击任何卡片时显示模式
- javascript - 当 numColumns > 1 时防止 FlatList 重新呈现
- bash - 查找具有匹配字符串的文件并对其执行操作 UNIX
- python - 代码完成后是否可以重新运行代码并添加代码行?
- c - lambda 宏是如何创建 lambda 的?