Lorsque l'utilisateur clique sur un lien pour naviguer sur le site, la barre de navigation n'est pas fermée ?
J'ai essayé d'ajouter des écouteurs d'événements de clic à chaque lien pour fermer la barre de navigation mais cela ne fonctionne pas ! De plus, l'icône du menu hamberberger en position active (c'est-à-dire le X) n'est pas bien alignée. Mais le principal problème est que la barre de navigation s’effondre lorsque l’on clique dessus.
$(document).ready(function() { $('.container').click(function() { $('.navbar .menu').toggleClass("active"); }); }); function myFunction(x) { x.classList.toggle("change"); }
@media (max-width: 1104px) { .about .about-content .left img { height: 350px; width: 350px; } } @media (max-width: 991px) { .max-width { padding: 0 50px; } } @media (max-width: 947px) { .menu-btn { display: block; z-index: 999; } /* .menu-btn i.active:before { content: "\f00d"; } */ .navbar .menu { position: fixed; height: 100vh; width: 100%; left: -100%; top: 0; background: #111; text-align: center; padding-top: 80px; transition: all 0.3s ease; } .navbar .menu.active { left: 0; } .navbar .menu li { display: block; } .navbar .menu li a { font-family: 'Josefin Sans', sans-serif; display: inline-block; margin: 20px 0; font-size: 25px; } } .navbar { position: fixed; width: 100%; z-index: 999; padding: 30px 0; font-family: 'Ubuntu', sans-serif; transition: all 0.3s ease; } .navbar.sticky { padding: 15px 0; background: crimson; } .navbar .max-width { display: flex; align-items: center; justify-content: space-between; } .navbar .logo a { position: relative; color: #fff; font-size: 35px; font-weight: bold; text-transform: uppercase; font-family: 'Orbitron', sans-serif; border: 3px solid #fff; padding: 0px 10px; text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); letter-spacing: 2px; } .navbar .logo a::after { content: 'PANDEY'; position: absolute; font-size: 15px; font-weight: bold; bottom: -12px; /* color: crimson; */ right: 15px; background: crimson; border-radius: 5px; /* box-shadow: inset 3px 1px 8px 2px rgb(0 0 0 / 50%); */ padding: 0px 4px; letter-spacing: 2px; } .navbar .logo a span { color: crimson; transition: all 0.3s ease; } .navbar.sticky .logo a::after { border-radius: 4px; background: #fff; color: crimson; text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.9); } .container { display: inline-block; cursor: pointer; box-sizing: border-box; } .bar1 { width: 35px; height: 3px; background-color: #fff; margin: 6px 0; transition: 0.4s; } .bar2 { width: 25px; height: 3px; background-color: #fff; margin: 6px 0; transition: 0.4s; } .bar3 { width: 15px; height: 3px; background-color: #fff; margin: 6px 0; transition: 0.4s; } .change .bar1 { transform: translate(0, 11px) rotate(-45deg); } .change .bar2 { opacity: 0; } .change .bar3 { transform: translate(0, -6px) rotate(40deg); width: 35px; } .navbar.sticky .logo a span { color: #fff; } .navbar .menu li { list-style: none; display: inline-block; } .navbar .menu li a { font-family: 'Josefin Sans', sans-serif; display: block; color: #fff; font-size: 18px; font-weight: 500; margin-left: 25px; transition: color 0.3s ease; } .navbar .menu li a:hover { position: relative; color: #fff; } .navbar.sticky .menu li a:hover { color: #fff; }
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Je suppose que vous avez rendu votre menu réactif, c'est-à-dire également adapté aux appareils mobiles.
J'espère que cette solution vous aidera
Vous pouvez vous référer au code à barres de navigation de la vue mobile suivant avec l'icône hamburger.
body { margin: 0; padding: 0; background: blue; color: #cdcdcd; } #togglmenu { display: block; position: relative; top: 50px; left: 50px; z-index: 1; -webkit-user-select: none; user-select: none; } #togglmenu a { text-decoration: none; color: #232323; transition: color 0.3s ease; } #togglmenu a:hover { color: tomato; } #togglmenu input { display: block; width: 40px; height: 32px; position: absolute; top: -7px; left: -5px; cursor: pointer; opacity: 0; /* hide this */ z-index: 2; /* and place it over the hamburger */ -webkit-touch-callout: none; } #togglmenu span { display: block; width: 33px; height: 4px; margin-bottom: 5px; position: relative; background: #cdcdcd; border-radius: 3px; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; } #togglmenu span:first-child { transform-origin: 0% 0%; } #togglmenu span:nth-last-child(2) { transform-origin: 0% 100%; } #togglmenu input:checked ~ span { opacity: 1; transform: rotate(45deg) translate(-2px, -1px); background: #232323; } #togglmenu input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); } #togglmenu input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0, -1px); } #menu { position: absolute; width: 300px; margin: -100px 0 0 -50px; padding: 50px; padding-top: 125px; background: #ededed; list-style-type: none; -webkit-font-smoothing: antialiased; transform-origin: 0% 0%; transform: translate(-100%, 0); transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); } #menu li { padding: 10px 0; font-size: 22px; } #togglmenu input:checked ~ ul { transform: none; }