WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Barre de navigation CSS responsive
9886
webleb
Publiez votre code
Recommandé
13 October 2025
Animation de chargement CSS : Pulse & Sparks
30 August 2024
Effet de parallaxe du curseur
29 September 2025
Animation de chargement CSS avec image d'arrière-plan
index.html
Copy
Webleb
Webleb
Home
about
blog
contact
styles.css
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Poppins", sans-serif; } .container { max-width: 1050px; width: 90%; margin: auto; } .navbar { width: 100%; box-shadow: 0 1px 4px rgb(146 161 176 / 15%); } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 62px; } .navbar .menu-items { display: flex; } .navbar .nav-container li { list-style: none; } .navbar .nav-container a { text-decoration: none; color: #0e2431; font-weight: 500; font-size: 1.2rem; padding: 0.7rem; } .navbar .nav-container a:hover{ font-weight: bolder; } .nav-container { display: block; position: relative; height: 60px; } .nav-container .checkbox { position: absolute; display: block; height: 32px; width: 32px; top: 20px; right: 20px; z-index: 5; opacity: 0; cursor: pointer; } .nav-container .hamburger-lines { display: block; height: 26px; width: 32px; position: absolute; top: 17px; right: 20px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; } .nav-container .hamburger-lines .line { display: block; height: 4px; width: 100%; border-radius: 10px; background: #0e2431; } .nav-container .hamburger-lines .line1 { transform-origin: 0% 0%; transition: transform 0.4s ease-in-out; } .nav-container .hamburger-lines .line2 { transition: transform 0.2s ease-in-out; } .nav-container .hamburger-lines .line3 { transform-origin: 0% 100%; transition: transform 0.4s ease-in-out; } .navbar .menu-items { padding-top: 120px; box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5); height: 100vh; width: 100%; transform: translate(-150%); display: flex; flex-direction: column; margin-left: -40px; padding-left: 50px; transition: transform 0.5s ease-in-out; text-align: center; } .navbar .menu-items li { margin-bottom: 1.2rem; font-size: 1.5rem; font-weight: 500; } .logo { position: absolute; top: 5px; left: 15px; font-size: 1.2rem; color: black; z-index:20; } .nav-container input[type="checkbox"]:checked ~ .menu-items { transform: translateX(0); } .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 { transform: rotate(45deg); } .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 { transform: scaleY(0); } .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 { transform: rotate(-45deg); }
main.js
Copy
Nothing to copy