WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
नेविगेशन मेनू
1059
ledoc
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
10 July 2025
HTML रेस्तरां मेनू टेम्पलेट
14 October 2024
"एन्स डेवलपमेंट" के लिए एक स्वागत संदेश और नेविगेशन के साथ एक वेब पेज
5 May 2024
रेस्तरां मेनू HTML टेम्पलेट
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) */
