Navbar – Responsive Nav Bar with Dropdown Menu, Search & Hamburger

63 0 Navigation codex Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Navbar – Responsive Nav Bar with Dropdown Menu, Search & Hamburger

<header class="nav" id="nav">
  <a href="#" class="logo"><span>◆</span> Brand</a>
  <nav class="links" id="links">
    <a href="#" class="on">Home</a>
    <div class="dd"><a href="#">Services ▾</a>
      <div class="mega">
        <a href="#"><b>🎨 Web Design</b><small>Beautiful responsive sites</small></a>
        <a href="#"><b>🛒 E-commerce</b><small>Online shops that sell</small></a>
        <a href="#"><b>📈 SEO</b><small>Rank higher on Google</small></a>
        <a href="#"><b>📱 Mobile Apps</b><small>iOS & Android</small></a>
      </div>
    </div>
    <a href="#">Portfolio</a><a href="#">About</a><a href="#">Contact</a>
    <span class="ink" id="ink"></span>
  </nav>
  <form class="search" id="search"><input placeholder="Search…" aria-label="Search"><button aria-label="Search">🔍</button></form>
  <a href="#" class="cta">Get started</a>
  <button class="burger" id="burger" aria-label="Menu"><i></i><i></i><i></i></button>
</header>
<section class="hero"><h1>Responsive Navbar</h1><p>Sticky nav bar with sliding indicator, mega dropdown menu, search bar and animated hamburger menu on mobile. Scroll down to see it shrink.</p></section>
<section class="filler"></section>

CSS

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { overflow-x: clip; }
body { font-family: "Segoe UI", system-ui, sans-serif; background: #f4f6fb; color: #1d2135; }
.nav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 22px; padding: 18px 5vw; background: rgba(255,255,255,.8); backdrop-filter: blur(14px); transition: padding .3s, box-shadow .3s; }
.nav.small { padding: 10px 5vw; box-shadow: 0 6px 24px rgba(20,30,80,.1); }
.logo { font-weight: 800; font-size: 1.4rem; color: #1d2135; text-decoration: none; }
.logo span { color: #5b5bf7; }
.links { position: relative; display: flex; gap: 6px; margin-left: auto; }
.links > a, .dd > a { display: block; padding: 10px 14px; color: #3a3f58; text-decoration: none; font-weight: 600; border-radius: 10px; position: relative; z-index: 1; }
.links a.on { color: #5b5bf7; }
.ink { position: absolute; bottom: 2px; height: 3px; border-radius: 3px; background: #5b5bf7; transition: left .35s cubic-bezier(.6,0,.3,1.4), width .35s; }
.dd { position: relative; }
.mega { position: absolute; top: 120%; left: -40px; width: 420px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(20,30,80,.18); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .25s; }
.dd:hover .mega, .dd.open .mega { opacity: 1; visibility: visible; transform: none; }
.mega a { padding: 12px; border-radius: 10px; text-decoration: none; color: #1d2135; }
.mega a:hover { background: #f0f1ff; }
.mega small { display: block; color: #7a8099; font-size: .8rem; margin-top: 2px; }
.search { display: flex; background: #eef0f7; border-radius: 99px; overflow: hidden; width: 42px; transition: width .35s; }
.search.open, .search:focus-within { width: 220px; }
.search input { border: 0; background: none; outline: none; padding: 0 0 0 14px; width: 100%; font: inherit; }
.search button { border: 0; background: none; width: 42px; height: 40px; flex-shrink: 0; cursor: pointer; }
.cta { padding: 10px 18px; border-radius: 99px; background: #5b5bf7; color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.burger { display: none; width: 42px; height: 42px; border: 0; background: none; cursor: pointer; flex-direction: column; justify-content: center; gap: 6px; padding: 9px; }
.burger i { display: block; height: 3px; background: #1d2135; border-radius: 3px; transition: .3s; }
.burger.x i:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger.x i:nth-child(2) { opacity: 0; }
.burger.x i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.hero { padding: 120px 5vw; text-align: center; }
.hero h1 { font-size: clamp(2rem, 6vw, 3.6rem); margin-bottom: 14px; }
.hero p { max-width: 560px; margin: 0 auto; color: #5a607a; line-height: 1.6; }
.filler { height: 120vh; background: linear-gradient(#f4f6fb, #dfe3f3); }
@media (max-width: 900px) {
  .burger { display: flex; }
  .cta { display: none; }
  .search { margin-left: auto; }
  .links { position: fixed; top: 0; right: 0; height: 100vh; width: min(300px, 80vw); flex-direction: column; background: #fff; padding: 80px 20px; box-shadow: -10px 0 40px rgba(0,0,0,.15); transform: translateX(100%); transition: transform .35s; margin: 0; z-index: -1; }
  .links.open { transform: none; }
  .ink { display: none; }
  .mega { position: static; width: auto; grid-template-columns: 1fr; box-shadow: none; display: none; opacity: 1; visibility: visible; transform: none; }
  .dd.open .mega { display: grid; }
}

// Responsive navbar: sliding ink indicator, shrink on scroll, mega dropdown, hamburger menu
var nav = document.getElementById('nav'), links = document.getElementById('links'), ink = document.getElementById('ink');
function moveInk(a) { if (!a) return; ink.style.left = a.offsetLeft + 10 + 'px'; ink.style.width = a.offsetWidth - 20 + 'px'; }
var tops = links.querySelectorAll(':scope > a, .dd > a');
tops.forEach(function (a) {
  a.addEventListener('mouseenter', function () { moveInk(a.closest('.dd') || a); });
  a.addEventListener('click', function (e) {
    e.preventDefault();
    if (a.parentElement.classList.contains('dd') && innerWidth <= 900) { a.parentElement.classList.toggle('open'); return; }
    tops.forEach(function (x) { x.classList.remove('on'); }); a.classList.add('on');
  });
});
links.addEventListener('mouseleave', function () { moveInk(links.querySelector('a.on')); });
addEventListener('load', function () { moveInk(links.querySelector('a.on')); });
moveInk(links.querySelector('a.on'));
addEventListener('scroll', function () { nav.classList.toggle('small', scrollY > 30); });
var burger = document.getElementById('burger');
burger.onclick = function () { burger.classList.toggle('x'); links.classList.toggle('open'); };
document.getElementById('search').onsubmit = function (e) { e.preventDefault(); var v = this.querySelector('input').value; if (v) alertLike('Searching for “' + v + '”'); };
function alertLike(t) { var d = document.createElement('div'); d.textContent = t; d.style.cssText = 'position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#1d2135;color:#fff;padding:10px 18px;border-radius:99px;z-index:99'; document.body.appendChild(d); setTimeout(function () { d.remove(); }, 2000); }

Comments 0

…

Navbar – Responsive Nav Bar with Dropdown Menu, Search & Hamburger

Recommended

Comments 0