WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Navigationsmenü
1196
ledoc
Im Editor öffnen
Veröffentlichen Sie Ihren Code
21 July 2025
CSS-Radiobutton-Navigationsmenü
7 July 2025
Navigationsmenüanzeige
HTML
Copy
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> <li class="nav-item"> <a class="nav-link disabled">Disabled</a> </li> </ul> </div> </div> </nav>
CSS
Copy
.navbar-collapse { position: absolute; top: 0; left: 0; right: 0; height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; background-color: #3e4149; } .navbar-toggler, .navbar-brand { z-index: 1; } .navbar-brand { font-size: 1.8em; } .navbar-toggler:focus { box-shadow: none; } .navbar-collapse .nav-link { font-size: 1.5em; letter-spacing: 2px; color: #fff; } .navbar-collapse .nav-link:hover, .navbar-collapse .nav-link.active { color: darkseagreen; } .nav-item:not(:last-child) { border-bottom: 1px solid gray; padding: 0.2em 4em; } @media screen and (min-width: 768px) { .nav-item:not(:last-child) { padding: 0.5em 8em; } } .navbar-collapse.show { transition: all 0.5s; }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
