le javascript de m'a navbar responsive ne fonctione pas

Par blowsom70, il y a 3 ans

Les bases HTML/CSS
Javascript

j'ai essayé de tout changé mais rien n'y faire mobile-menu ne s'active pas.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>QRlod-Scan</title> <style> body { margin: 0px; padding: 0px; width: 100%; height: 150vh; background-color: #101728; } header { height: 100vh; width: 100vw; } .background { opacity: 0.15; padding-top: 5px; background-image: url(IMAGE/QRlod-backlop.png); background-size: cover; width: 100%; height: 100%; color: aliceblue; background-position: center; } .logo img { margin-top: 20px; width: 350px; } .navbar { position: absolute; padding: 30px; display: flex; justify-content: space-between; width: 98%; box-sizing: border-box; align-items: center; } .navbar .nav-links ul { display: flex; } .navbar .nav-links ul li { margin: 0 25px; } .navbar .burger { display: none; position: absolute; width: 40px; top: 50px; right: 50px; } @media screen and (max-width: 900px) { .navbar { padding: 0; } .navbar .burger { display: block; } .nav-links { top: 0; left: 0; position: absolute; background-color: rgba(0, 0, 0, 0.491); backdrop-filter: blur(3px); width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; margin-left: -100%; transition: all 0.5s ease; } .nav-links .mobile-menu { margin-left: 0; } .nav-links ul { display: flex; flex-direction: column; align-items: center; } .navbar .nav-links ul li { margin: 25px 0; font-size: 35px; } } </style> </head> <body> <header style="position: absolute; color: rgb(255, 255, 255);"> <nav class="navbar"> <div class="logo"> <img src="IMAGE/QRlodlobt.png"> </div> <div class="nav-links"> <ul> <li>DFBHY</li> <li>HGUFYTE5</li> <li>HHVYR</li> <li>VJIBHUVYF</li> <li>HVFUGY</li> </ul> </div> <img src="IMAGE/navcam.png" alt="menu hamburger" class="burger"> </nav> </header> <div class="background"> </div> <script> const navSlide = () => { const menuHamburger = document.querySelector(".burger") const navLinks = document.querySelector(".nav-links") menuHamburger.addEventListener('clic', () => { navLinks.classList.toggle('mobile-menu') }) } </script> </body> </html>

Ce que je veux

c'est que quand on touche sur le burger.

.nav-links .mobile-menu { margin-left: 0; }

s'active.

Ce que j'obtiens

rien du tout :(

3 réponses

Smith john, il y a 3 ans

Salut, peux tu ajouter un k à clic dans l'eventListener et nous dire si maintenant ça fonctionne stp ?

blowsom70, il y a 3 ans

je l'ai mis sauf que mobile-menu ne veux pas s'affiché à coté de nav-links

blowsom70, il y a 3 ans

j'ai réglé le probleme
le .navbar .burger n'était pas cliquable il fallait le mettre au-dessus des autres avec z-index: 999;

    .navbar .burger {
        z-index: 999;
        display: none;
        position: absolute;
        width: 40px;
        top: 50px;
        right: 50px;
    }