WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Barre de navigation réactive
3385
bhanu.sharma55
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
25 August 2024
Découverte des produits d'animation d'interface utilisateur
3 March 2025
OrbDesign
24 July 2025
Morphing des données
HTML
Copy
Responsive_Navbar
Shau-nay
Home
About-Us
Service
Contact-Us
Feedback
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */ * { margin: 0; padding: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body { font-family: monospace; } nav { background-color: rgb(17, 17, 51); height: 80px; width: 100%; } .logo { color: white; font-size: 35px; line-height: 80px; padding: 0 100px; font-weight: bold; } nav ul { float: right; margin-right: 20px; } nav ul li { display: inline-block; line-height: 80px; margin: 0 5px; } nav ul li a { color: white; font-size: 17px; padding: 7px 13px; border-radius: 3px; text-transform: uppercase; } .active,a:hover { background: #1B9BFF; transition: .5s; } .checkbtn { font-size: 30px; color: white; float: right; line-height: 80px; margin-right: 40px; cursor: pointer; display: none; } #check { display: none; } .main { background-image: url("background.jpg"); width: 100%; height: 89vh; background-repeat: no-repeat; background-size: cover; } @media (max-width : 950px) { .logo { font-size: 30px; padding-left: 50px; } nav ul li a { font-size: 16px; } } @media (max-width : 850px) { .checkbtn { display: block; } ul { position: fixed; width: 100%; height: 100vh; background: #2C3E50; top: 80px; left: -100%; text-align: center; transition: all .5s; } nav ul li { display: block; margin: 50px 0; line-height: 30px; } nav ul li a { font-size: 20px; } a:hover,.active { background: none; color: #0083E6; } #check:checked ~ ul { left: 0; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */