[英]Navigation bar does not work (with JS, css, HTML)
[ ADDITIONAL BELOW ] [以下补充]
I have done my first portfolio on my won and my code of navigation bar with JS, css, HTML doesn't work even I tried everything out for many times.我已经用 JS、css、HTML 在我的韩元和导航栏代码上完成了我的第一个投资组合,即使我尝试了很多次也无法正常工作。
The navigation bar shows up but the event doesn't happen.(and the menu shows up every time I load the page.) Maybe because the code of JavaScript wrong?导航栏出现,但事件没有发生。(每次我加载页面时都会显示菜单。)可能是因为 JavaScript 的代码错误? Could anyone help me out please?
有人可以帮我吗?
// JavaScript //
document
.querySelector('.btn-mobile-nav')
.addEventListener('click', function () {
console.log('.btn-mobile-nav');
document.querySelector('.mobile-menu').classList.toggle('.is-active');
});
// HTML //
<nav class="nav">
<div class="main-nav">
<ul class="main-nav-list mobile-menu">
<li>
<a class="main-nav-link mobile-menu-item" href="#intro"
>introduce</a
>
</li>
<li>
<a class="main-nav-link mobile-menu-item" href="#aboutme"
>about me</a
>
</li>
<li>
<a class="main-nav-link mobile-menu-item" href="#work">work</a>
</li>
<li>
<a class="main-nav-link mobile-menu-item" href="#skill">skill</a>
</li>
</ul>
</div>
</nav>
<button class="btn-mobile-nav">
<ion-icon class="icon-mobile-open" name="menu-outline"></ion-icon>
</button>
// CSS //
.btn-mobile-nav {
opacity: 1;
position: fixed;
color: #ccc;
background-color: rgba(255, 255, 255, 0.658);
border: none;
height: 3.2rem;
width: 3.2rem;
top: 0.2rem;
right: 0.2rem;
z-index: 2;
}
.icon-mobile-open {
height: 2.5rem;
width: 2.5rem;
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
z-index: 1;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #555;
}
.mobile-menu-item {
width: 100%;
height: auto;
padding: 0.5em 1em;
text-align: center;
color: #fff;
box-sizing: border-box;
}
/* before */
.mobile-menu {
pointer-events: none;
transition: opacity 0.3s linear;
opacity: 0;
}
/* after */
.mobile-menu .is-active {
pointer-events: auto;
opacity: 1;
}
[ ADDITIONAL QUESTION ] [附加问题]
And one more question... I want to close this navigation when the list item is clicked but only the first list item works and other does not...还有一个问题...我想在单击列表项时关闭此导航,但只有第一个列表项有效,其他无效...
document.querySelector('a[href^="#"]').addEventListener('click', function () {
document.querySelector('.mobile-menu').classList.remove('is-active');
});
There are two issues here:这里有两个问题:
.toggle()
(Remove the .
from the toggle('.is-active')
).toggle()
(从toggle('.is-active')
删除.
)mobile-menu
and is-active
classes in your CSS (Done by removing the space between .mobile-menu.is-active
)mobile-menu
和is-active
类相同的元素(通过删除.mobile-menu.is-active
之间的空格来完成) document.querySelector('.btn-mobile-nav').addEventListener('click', function() { console.log('.btn-mobile-nav'); document.querySelector('.mobile-menu').classList.toggle('is-active'); });
.btn-mobile-nav { opacity: 1; position: fixed; color: #ccc; background-color: rgba(255, 255, 255, 0.658); border: none; height: 3.2rem; width: 3.2rem; top: 0.2rem; right: 0.2rem; z-index: 2; /*Added to make the example clearer*/ border: 1px solid #000; }.icon-mobile-open { height: 2.5rem; width: 2.5rem; }.mobile-menu { position: fixed; top: 0; right: 0; z-index: 1; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #555; }.mobile-menu-item { width: 100%; height: auto; padding: 0.5em 1em; text-align: center; color: #fff; box-sizing: border-box; } /* before */.mobile-menu { pointer-events: none; transition: opacity 0.3s linear; opacity: 0; } /* after */.mobile-menu.is-active { pointer-events: auto; opacity: 1; }
<nav class="nav"> <div class="main-nav"> <ul class="main-nav-list mobile-menu"> <li> <a class="main-nav-link mobile-menu-item" href="#intro">introduce</a> </li> <li> <a class="main-nav-link mobile-menu-item" href="#aboutme">about me</a> </li> <li> <a class="main-nav-link mobile-menu-item" href="#work">work</a> </li> <li> <a class="main-nav-link mobile-menu-item" href="#skill">skill</a> </li> </ul> </div> </nav> <button class="btn-mobile-nav"> <ion-icon class="icon-mobile-open" name="menu-outline"></ion-icon> </button>
Can I add one more question here?我可以在这里再添加一个问题吗? I want to close this navigation when the list item is clicked but only the first list item works and other does not...
我想在单击列表项时关闭此导航,但只有第一个列表项有效,其他无效...
document.querySelector('a[href^="#"]').addEventListener('click', function () {
document.querySelector('.mobile-menu').classList.remove('is-active');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.