javascript - 响应式导航栏菜单在移动浏览器上不起作用
问题描述
我的响应式导航栏菜单有问题,当我从移动浏览器打开它时,一切正常,但是当我用手指向左滑动显示溢出内容时,我尝试在我的身体标签overflow:hidden
和overflow-x:hidden
我的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');
});
解决方案
不需要overflow:hide
为 body 设置样式,所以删除它,只需应用我在下面给出的样式:
在您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;
}
}
试试吧,它会起作用的,如果没有,那就告诉我问题,和平。
推荐阅读
- ios - Swift:使用 NSLock 或并发队列的安全线程
- python - 转换键和值
- drupal - Drupal WebForm - Drupal 更新后提交表单后访问被拒绝:
- flutter - Flutter 更改图标 2 次
- java - ic_launcher.png AAPT:错误:在 Android Studio v4.1.1 中找不到文件
- python - 为什么我的发送兴趣请求没有出现?就像我定义的变量不起作用
- javascript - 如何在使用 setTimeout 函数时停止循环
- mysql - 杀死进程(数字海洋 ubuntu 液滴)
- vue.js - VUE i18n 中长文本段落的国际化
- sql-server - 如何使用来自命令提示符的插入/选择查询执行 SQL Server Management Studio 上可用的存储过程