#javascript #css #next.js #navbar #hamburger-menu
Вопрос:
Я хотел написать веб-приложение, способное работать на всех устройствах, поэтому я разработал навигационную панель для полноэкранного режима, и я хотел создать меню гамбургера для небольшого устройства, но только на моей странице навыков возникла эта проблема. Когда я открою меню, меню перейдет под 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>
Ответ №1:
Для навигационной панели также есть раздел div, чтобы переместить основное содержимое справа от меню навигационной панели, когда оно появится (см. Ниже), а также раздел css, чтобы изменить стиль для меньших размеров экрана. Вы можете изучить приведенный ниже код.
<!DOCTYPE html>
<html>
<head>
<!-- <meta charset="ISO-8859-1"> -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test NavBar</title>
<style>
body {
background-image: url('background.png');
opacity: 0.7;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-size: 100% 100%;
}
a {
color:#a5e5f8;
}
/* The side navigation menu */
.sidenav {
height: 100%;
width: 200px;
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color:#FFFFFF;
opacity: 0.5;
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 0px; /* Place content 0px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
border-right-style: solid;
border-color: lightgrey;
border-width:3px;
}
/* The navigation menu links */
.sidenav a {
border-top-style: solid;
border-bottom-style: solid;
border-color: lightgrey;
border-width:3px;
padding: 16px 8px 16px 32px;
text-decoration: none;
font-size: 14px;
font-weight: bold;
color:#26acff; /*#a5e5f8*/
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #000080; /*dark blue*/
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="./jsgrid/jsgrid.css" />
<link type="text/css" rel="stylesheet" href="./jsgrid/jsgrid-theme.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
/* Set the width of the side navigation to 250px */
function openNav() {
document.getElementById("mySidenav").style.width = "230px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
document.getElementById("mySidenav").style.width = "0px";
}
</script>
</head>
<body onload="openNav()">
<div id="mySidenav" class="sidenav">
<a href="#" style="margin:0 0 0 40px; border-top-style: none;border-bottom-style: none;"><img src=".imagesapps_menu_icon.png" height="40" width="40"></a>
<a href="menu1.html"><img src=".imagesfile_clipboard_menu_icon.png" height="40" width="40">amp;nbsp;Menu 1<br/></a>
<br/><br/>
<a href="menu2.html"><img src=".imagesgraph_menu_icon.png" height="40" width="40">amp;nbsp;Menu 2<br/></a>
<br/><br/>
<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
</div>
<script>
function exit_app() {
if (confirm("Exit this app？")) {
window.location.href = "index.html";
}
}
</script>
</body>
</html>