【发布时间】：2021-09-02 02:28:25
【问题描述】：
我想编写适用于所有设备的网络应用程序，所以我设计了全屏导航栏，我想为小型设备设计汉堡菜单，但只是我的技能页面有这个问题。当我打开菜单时，菜单将位于 div 下，菜单上的其余链接无法单击。这是我的应用链接https://yasamanforouzesh.herokuapp.com/
.nav-container {
width: 100vw;
height: 80px;
}
.Hnavbar {
align-items: center;
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.navbar-logo {
display: block;
margin: 0;
justify-self: start;
float: left;
width: 65px;
height: 75px;
}
.nav-menu {
margin: 0;
width: 100%;
position: absolute;
top: 70px;
left: -100%;
opacity: 0;
transition: all 0.5s ease;
text-align: center;
justify-self: end;
background-color: red;
height: 57vh;
z-index: 3;
}
.nav-links {
color: white;
text-decoration: none;
text-align: center;
line-height: 10px;
width: 100%;
display: table;
}
.nav-menu.active {
background-color: black;
left: 0;
opacity: 1;
transition: all 0.5s ease;
}
#mobile-menu {
position: absolute;
top: 20%;
right: 5%;
transform: translate(5%, 20%);
cursor: pointer;
display: block;
}
.menu-toggle .bar {
width: 25px;
height: 3px;
margin: 5px auto;
display: block;
transition: all 0.3s ease-in-out;
background: white;
}
<div className="nav-container">
<nav className="Hnavbar">
<img className="navbar-logo" src="/yasi1.jpg"/>
<div className={`menu-toggle ${isactive}`}id="mobile-menu" onClick={checkClass}>
<span className="bar"></span>
<span className="bar"></span>
<span className="bar"></span>
</div>
<ul className={`nav-menu ${active}`}>
<li className="list"><a href="/" className="nav-links">Home</a></li>
<li className="list"><a href="/about" className="nav-links">About</a></li>
<li className="list"><a href="/skills" className="nav-links">Skills</a></li>
<li className="list"><a href="/projects" className="nav-links">Projects</a></li>
<li className="list"><a href="/contact" className="nav-links">Contact</a></li>
</ul>
</nav>
</div>
【问题讨论】：
标签： javascript css next.js navbar hamburger-menu