响应式导航栏菜单不适用于移动浏览器
[英]Responsive nav bar menu not working on mobile browser
问题描述
我有一个响应式导航栏菜单的问题，当我从移动浏览器打开它时一切正常，但是当我用手指向左滑动时，溢出内容显示，我尝试使用overflow:hidden和overflow-x:hidden在我的 body 标签和我的 div 包装标签上，我玩过不同的显示位置，我在这里看到了很多类似问题的可能解决方案，我已经尝试了所有这些，但我还没有找到解决方案，有没有人对这个问题有任何想法？
这是我的带有导航栏的网页的链接： https : //unruffled-wright-0b9f34.netlify.app
这是我的 html、css 和 javascript 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@500;600&family=Lobster&family=Poppins:ital,wght@0,300;1,200&display=swap"
rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
<title>El Foraneo</title>
</head>
<body>
<nav>
<div class="logo">
<h1>EL Foraneo </h1>
</div>
<ul class="nav-links">
<li><a href="#">item1 </a></>
<li><a href="#">item2 </a></>
<li><a href="#">item3 </a></>
</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>
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: #E08876;
font-family: "Poppins", sans-serif;
}
.logo {
display: flex;
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-family: "Lobster", cursive;
font-size: 22px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 60%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
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: white;
margin: 5px;
transition: all 0.3s ease;
}
@media screen and (max-width: 1024px) {
.nav-links {
width: 60%;
}
}
@media screen and (max-width: 768px) {
body{
overflow: hidden;
}
.nav-links {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: #E08876;
display: flex;
flex-direction: column;
align-items: center;
width: 40%;
transform: translateX(100%);
transition: transform 0.3s 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);
}
//function declaration
const navSlide = () => {
//variables
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
//Event Listener
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
//links with animation
navLinks.forEach((link, index) => {
if (link.style.animation) {
link.style.animation = '';
}
else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.2}s`;
}
});
//Burger animation
burger.classList.toggle('toggle');
});
2 个解决方案
解决方案1
0 2020-09-09 07:22:36
没有必要overflow:hide身体的样式所以删除它，然后应用我在下面给出的样式：
在媒体查询中的style.css中添加或附加以下规则：
@media screen and (max-width: 768px) {
.nav-links {
// all your other styles
display: none; // add this new line
}
// add below new rule for nav-active class.
.nav-active {
display: flex;
}
}
尝试一下，它会起作用，如果没有，请告诉我问题，和平。
解决方案2
-2 已采纳 2021-02-16 15:42:33
您可以将导航链接位置从绝对位置更改为固定位置。 这应该可以解决问题。
导航栏折叠菜单不适用于移动和表格视口
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.