https://codepen.io/Cplay/pen/WNGYezE 一个正在尝试编码的小菜鸟。 当我在移动模式下访问页面时,右侧会出现空白区域,但是当我单击导航栏的切换菜单时,它消失了。有人可以帮我解决这个问题吗? 我使用了 3 种语言,html css 和 javascript。并且已经尝试使用溢出-x: hidden;。但是我不知道把这段代码放在哪里。
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}
/* navigation bar */
nav {
background: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
text-decoration: none;
font-size: 35px;
}
.burger {
display: none;
}
.burger div {
width: 30px;
height: 3px;
background-color: black;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1336px) {
.nav-links {
display: flex;
width: 50%;
justify-content: space-around;
text-decoration: none;
}
}
@media screen and (max-width:1100px) {
.logo {
width: 10%;
}
}
@media screen and (max-width:1100px) {
.body {
overflow: hidden;
}
.body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 205vh;
top: 8vh;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.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);
}
p {
font-size: 100%;
font-family: 'Montserrat', sans-serif;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 300%;
}
<nav>
<ul class="nav-links">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Get the game</a>
</li>
</ul><img class="logo" src="logo.png" width="10%">
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//toggle
nav.classList.toggle('nav-active');
//animation
navLinks.forEach((link, index) => {
if (link.style.animation){
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 1.5}s`;
}
});
//animation
burger.classList.toggle('toggle');
});
}
navSlide();
答案 0 :(得分:0)
你的代码的每一件事都很好。只需更改 .nav-links 中的一些属性。 将以下 .nav-links 复制并替换到您的代码中。你的空白会消失。固定位置和 right:0 将使其保持在右侧。还要使 top:0 而不是 22vh。
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
burger.addEventListener('click', () => {
//toggle
nav.classList.toggle('nav-active');
//animation
navLinks.forEach((link, index) => {
if (link.style.animation){
link.style.animation = ''
} else {
link.style.animation = `navLinkFade 0.5 ease forwards ${index / 7 + 1.5}s`;
}
});
//animation
burger.classList.toggle('toggle');
});
}
navSlide();
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f4f4f4;
}
/* navigation bar */
nav {
background: none;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links {
width: 30%;
display: flex;
justify-content: space-around;
text-decoration: none;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: black;
text-decoration: none;
font-size: 35px;
}
.burger {
display: none;
}
.burger div {
width: 30px;
height: 3px;
background-color: black;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width:1336px) {
.nav-links {
display: flex;
width: 50%;
justify-content: space-around;
text-decoration: none;
}
}
@media screen and (max-width:1100px) {
.logo {
width: 10%;
}
}
@media screen and (max-width:1100px) {
.body {
overflow: hidden;
}
.body {
overflow-x: hidden;
}
.nav-links {
position: fixed;
right: 0;
height: 100vh;
top: 0;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
}
.burger {
display: block;
cursor: pointer;
}
}
.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);
}
p {
font-size: 100%;
font-family: 'Montserrat', sans-serif;
}
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 300%;
}
<nav>
<ul class="nav-links">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Get the game</a>
</li>
</ul><img class="logo" src="logo.png" width="10%">
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
@media screen and (max-width:1100px) {
.nav-links {
position: fixed;
right: 0;
height: 100vh;
top: 0;
background-color: white;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
}