我有一个响应式导航栏,该导航栏以一定宽度折叠到汉堡菜单中。当我单击菜单时,链接从右侧滑入。但是,当我将浏览器的大小调整为可以恢复标准导航栏的宽度时,然后我将浏览器的大小调整为导航折叠到汉堡菜单的宽度时,导航链接仍然存在,而不仅仅是菜单。我需要它,以便即使我不手动关闭菜单,当我将其调整为桌面宽度时也将关闭,如果返回到移动宽度,则必须再次打开菜单才能看到链接。仅当我打开菜单,不关闭菜单,调整大小然后返回时,这才是问题。如果我关闭它,则调整大小然后返回,当然导航链接不存在。
的HTML
<nav>
<ul class="nav-links">
<li><a href="file.html" class="nav-link" id="active">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
</ul>
</nav>
<div class="menu" onclick="closeFunction(this);">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
CSS(滚动查看全部)
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.menu {
display: none;
cursor: pointer;
margin-bottom: 4px;
z-index: 2;
opacity: .5;
transition: .2s;
}
@media only screen and (max-width: 1200px) {
.nav-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
right: 0px;
align-items: center;
background-color: var(--media-nav-links-background-color);
z-index: 1;
transform: translateX(100%);
}
.menu {
display: block;
}
}
.nav-active {
transform: translateX(0%);
transition: .4s;
}
的JavaScript
const navSlide = () => {
const menu = document.querySelector('.menu');
const nav = document.querySelector('.nav-links');
menu.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
navSlide();
我猜应该在JS中添加一些内容。
新问题
@ 54ka的答案有效。但是,现在我有同样的问题,但是汉堡菜单动画。菜单栏在单击时变为X,然后在再次单击时返回。如果单击菜单,则出现X,我调整大小然后返回,X仍然存在,而不是菜单,然后当然,与导航链接滑入的同步再次被b / c抛弃@ 54ka的答案解决了导航问题滑动。我尝试将相同的解决方案应用到控制X过渡的JS上,但它起作用了,但是后来取消了解决原始问题的解决方案,即使已固定,导航链接现在也无法关闭调整大小。很奇怪。
这是有关关闭功能的信息:
的HTML
<div class="menu" onclick="closeFunction(this);">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
的CSS
.menu {
display: none;
cursor: pointer;
margin-bottom: 4px;
z-index: 2;
opacity: .5;
transition: .2s;
}
.menu:hover {
opacity: 1;
}
.menu div {
width: 25px;
height: 2px;
margin: 5px;
background-color: var(--menu-div-background-color);
transition: .4s;
}
.close .line1 {
transform: rotate(-45deg) translate(-4px, 6px);
}
.close .line2 {
opacity: 0;
}
.close .line3 {
transform: rotate(45deg) translate(-4px, -6px);
}
的JavaScript
function closeFunction(x) {
x.classList.toggle('close');
}
我尝试过的JS
function closeFunction(x) {
x.classList.toggle('close');
window.onresize = function () {
var w = window.outerWidth;
if (w > 1200) {
x.classList.remove('close');
}
};
}
再次,我尝试解决此JS,但随后它“无效”,可以说解决了我的原始问题的JS:
const navSlide = () => {
const menu = document.querySelector('.menu');
const nav = document.querySelector('.nav-links');
menu.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
window.onresize = function () {
var w = window.outerWidth;
if (w > 1200) {
nav.classList.remove('nav-active');
}
};
}
有什么建议?也许有一种方法可以合并这些JavaScript,使所有事情都发生在一起?
您需要为屏幕尺寸添加代码窗口侦听器,如果屏幕尺寸nav-active
大于指定值,则将其删除
window.onresize = function () {
var w = window.outerWidth;
if (w > 1200) {
nav.classList.remove('nav-active');
}
};
例:
在示例中,我将最大分辨率更改为600px。而且我删除onclick ="closeFunction (this);
了我不知道该怎么做的代码,并且由于未在代码中定义它而返回了错误
const navSlide = () => {
const menu = document.querySelector('.menu');
const nav = document.querySelector('.nav-links');
menu.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
window.onresize = function () {
var w = window.outerWidth;
if (w > 600) {
nav.classList.remove('nav-active');
}
};
}
navSlide();
.nav-links {
display: flex;
justify-content: space-around;
list-style: none;
}
.menu {
display: none;
cursor: pointer;
margin-bottom: 4px;
z-index: 2;
opacity: .5;
transition: .2s;
}
@media only screen and (max-width: 600px) {
.nav-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
height: 100%;
/* right: 0px; */
align-items: center;
background-color: var(--media-nav-links-background-color);
z-index: 1;
transform: translateX(100%);
}
.menu {
display: block;
width: 50px;
height: 50px;
background: #000;
}
}
.nav-active {
transform: translateX(0%);
transition: .4s;
}
<nav>
<ul class="nav-links">
<li><a href="file.html" class="nav-link" id="active">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
<li><a href="file.html" class="nav-link">Text</a></li>
</ul>
</nav>
<div class="menu" onclick="">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
回答新任务:
function closeFunction(x) {
x.classList.toggle('close');
}
const navSlide = () => {
const menu = document.querySelector('.menu');
const nav = document.querySelector('.nav-links');
menu.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
window.onresize = function () {
var w = window.outerWidth;
if (w > 1200) {
nav.classList.remove('nav-active');
document.getElementsByClassName('menu')[0].setAttribute('class', 'menu');
}
};
}
navSlide();
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句