22 CSS Transition Effects 09 / 22

Navigation Hover Transition

Five navigation styles: sliding pill, underline slide, diagonal wipe, translateX sidebar and mega dropdown reveal with smooth transitions.

Pure CSS MIT licensed
Live Demo Open in tab

This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.

Open in playground

The code

<div class="intro">
  <h1>Navigation Hover Transitions</h1>
  <p>5 polished CSS navigation styles — hover the links in each navbar</p>
</div>

<div class="nav-showcase">
  <div class="ns-label">Style 01 — Sliding pill (light)</div>
  <nav class="nav1">
    <div class="nav1-logo">◈ Studio</div>
    <div class="nav1-links">
      <div class="nav1-link active">Home</div>
      <div class="nav1-link">Work</div>
      <div class="nav1-link">About</div>
      <div class="nav1-link">Journal</div>
      <div class="nav1-link">Contact</div>
    </div>
    <button class="nav1-cta">Get started</button>
  </nav>

  <div class="ns-label">Style 02 — Underline slide (dark)</div>
  <nav class="nav2">
    <div class="nav2-logo">◈ Nexus</div>
    <div class="nav2-link active">Dashboard</div>
    <div class="nav2-link">Analytics</div>
    <div class="nav2-link">Campaigns</div>
    <div class="nav2-link">Audience</div>
    <div class="nav2-link">Settings</div>
  </nav>

  <div class="ns-label">Style 03 — Diagonal wipe</div>
  <nav class="nav3">
    <div class="nav3-logo">◈ BOLD</div>
    <div class="nav3-links">
      <div class="nav3-link"><span>Work</span></div>
      <div class="nav3-link"><span>Studio</span></div>
      <div class="nav3-link"><span>Awards</span></div>
      <div class="nav3-link"><span>Journal</span></div>
      <div class="nav3-link"><span>Contact</span></div>
    </div>
    <button class="nav3-cta">Hire us</button>
  </nav>

  <div class="ns-label">Style 04 — Vertical sidebar with slide</div>
  <div class="layout4">
    <aside class="sidebar">
      <div class="sidebar-head">Main menu</div>
      <div class="sidebar-link active"><span class="icon">🏠</span>Overview</div>
      <div class="sidebar-link"><span class="icon">📊</span>Analytics</div>
      <div class="sidebar-link"><span class="icon">🗂️</span>Projects</div>
      <div class="sidebar-link"><span class="icon">👥</span>Team</div>
      <div class="sidebar-link"><span class="icon">💬</span>Messages</div>
      <div class="sidebar-link"><span class="icon">⚙️</span>Settings</div>
    </aside>
    <div class="sidebar-content"><p>Sidebar links slide right on hover<br>with a soft purple background</p></div>
  </div>

  <div class="ns-label">Style 05 — Mega dropdown reveal</div>
  <nav class="nav5">
    <div class="nav5-logo">◈ Orbit</div>
    <div class="nav5-item">
      <div class="nav5-link">Products <span class="arr">▾</span></div>
      <div class="nav5-drop">
        <div class="drop-item"><div class="drop-icon" style="--c:#eff6ff">📊</div><div><div class="drop-title">Analytics Suite</div><div class="drop-desc">Real-time dashboards and reports</div></div></div>
        <div class="drop-item"><div class="drop-icon" style="--c:#f0fdf4">🤖</div><div><div class="drop-title">AI Automation</div><div class="drop-desc">Intelligent workflow automation</div></div></div>
        <div class="drop-item"><div class="drop-icon" style="--c:#fdf4ff">🔗</div><div><div class="drop-title">Integrations</div><div class="drop-desc">Connect 200+ tools seamlessly</div></div></div>
      </div>
    </div>
    <div class="nav5-item">
      <div class="nav5-link">Solutions <span class="arr">▾</span></div>
      <div class="nav5-drop">
        <div class="drop-item"><div class="drop-icon" style="--c:#fff7ed">🏢</div><div><div class="drop-title">Enterprise</div><div class="drop-desc">SSO, audit logs, 99.9% SLA</div></div></div>
        <div class="drop-item"><div class="drop-icon" style="--c:#f0fdf4">🚀</div><div><div class="drop-title">Startups</div><div class="drop-desc">Ship faster, scale smarter</div></div></div>
      </div>
    </div>
    <div class="nav5-item"><div class="nav5-link">Pricing</div></div>
    <div class="nav5-item"><div class="nav5-link">Docs</div></div>
  </nav>
</div>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f1f5f9;color:#0f172a;min-height:100vh;padding:0}

/* page intro */
.intro{padding:60px 24px 40px;text-align:center;max-width:800px;margin:0 auto}
.intro h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin-bottom:8px;letter-spacing:-.03em}
.intro p{color:#64748b;font-size:.95rem}

/* nav containers */
.nav-showcase{display:flex;flex-direction:column;gap:0}
.ns-label{font-size:.65rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:#94a3b8;padding:24px 40px 10px;background:#f1f5f9}

/* ──────────────────────── */
/* NAV 1 — Sliding pill indicator (like Apple) */
.nav1{background:#fff;padding:12px 32px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 1px 0 #e2e8f0;position:sticky;top:0;z-index:10}
.nav1-logo{font-weight:800;font-size:1.1rem;letter-spacing:-.02em}
.nav1-links{display:flex;gap:4px;background:#f8fafc;border-radius:30px;padding:4px}
.nav1-link{padding:8px 18px;border-radius:26px;font-size:.88rem;font-weight:500;color:#64748b;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s;white-space:nowrap}
.nav1-link:hover,.nav1-link.active{background:#0f172a;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.nav1-link.active{color:#fff}
.nav1-cta{background:#3b82f6;color:#fff;border-radius:20px;padding:9px 20px;font-size:.88rem;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:background .2s,transform .1s}
.nav1-cta:hover{background:#2563eb;transform:translateY(-1px)}

/* ──────────────────────── */
/* NAV 2 — Underline slide (bold agency style) */
.nav2{background:#0f172a;padding:0 40px;display:flex;align-items:center;gap:0}
.nav2-logo{font-weight:800;font-size:1.1rem;color:#fff;margin-right:auto;padding:20px 0}
.nav2-link{display:flex;align-items:center;padding:20px 20px;font-size:.9rem;font-weight:600;color:rgba(255,255,255,.5);cursor:pointer;position:relative;transition:color .3s}
.nav2-link::after{content:'';position:absolute;bottom:0;left:20px;right:20px;height:3px;background:#38bdf8;transform:scaleX(0);transform-origin:center;transition:transform .3s cubic-bezier(.7,0,.2,1)}
.nav2-link:hover{color:#fff}
.nav2-link:hover::after{transform:scaleX(1)}
.nav2-link.active{color:#fff}
.nav2-link.active::after{transform:scaleX(1)}

/* ──────────────────────── */
/* NAV 3 — Diagonal wipe (retro bold) */
.nav3{background:#18181b;padding:0 40px;display:flex;align-items:center;gap:0;overflow:hidden}
.nav3-logo{font-weight:800;font-size:1.1rem;color:#fff;margin-right:40px;padding:18px 0;letter-spacing:-.02em}
.nav3-links{display:flex;gap:0}
.nav3-link{padding:18px 22px;font-size:.9rem;font-weight:600;color:#71717a;cursor:pointer;position:relative;overflow:hidden;transition:color .3s}
.nav3-link::before{content:'';position:absolute;inset:-4px;background:#fbbf24;transform:skewX(-12deg) scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.7,0,.2,1)}
.nav3-link:hover{color:#18181b}
.nav3-link:hover::before{transform:skewX(-12deg) scaleX(1.3);transform-origin:left}
.nav3-link span{position:relative;z-index:1}
.nav3-cta{margin-left:auto;padding:10px 22px;background:#fff;color:#18181b;font-size:.88rem;font-weight:700;border:none;font-family:inherit;cursor:pointer;transition:background .2s}
.nav3-cta:hover{background:#fbbf24}

/* ──────────────────────── */
/* NAV 4 — Vertical sidebar nav */
.layout4{display:grid;grid-template-columns:240px 1fr;min-height:300px}
.sidebar{background:#faf5ff;border-right:1px solid #e9d5ff;padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.sidebar-head{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#a78bfa;padding:8px 12px;margin-bottom:8px}
.sidebar-link{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;font-size:.9rem;font-weight:500;color:#6b21a8;cursor:pointer;transition:background .2s,color .2s,transform .15s}
.sidebar-link:hover{background:#ede9fe;transform:translateX(4px)}
.sidebar-link.active{background:#7c3aed;color:#fff}
.sidebar-link .icon{font-size:1rem;width:20px;text-align:center}
.sidebar-content{padding:32px;display:flex;align-items:center;justify-content:center;background:#fff}
.sidebar-content p{color:#94a3b8;font-size:.9rem;text-align:center}

/* ──────────────────────── */
/* NAV 5 — Mega hover dropdown */
.nav5{background:#fff;padding:0 40px;display:flex;align-items:center;border-bottom:1px solid #e2e8f0;position:relative;z-index:20}
.nav5-logo{font-weight:800;font-size:1.1rem;margin-right:40px;padding:18px 0;letter-spacing:-.02em}
.nav5-item{position:relative;padding:18px 0;margin-right:8px}
.nav5-link{display:flex;align-items:center;gap:5px;padding:6px 14px;border-radius:6px;font-size:.88rem;font-weight:500;color:#475569;cursor:pointer;transition:background .2s,color .2s}
.nav5-link:hover,.nav5-item:hover .nav5-link{background:#f1f5f9;color:#0f172a}
.nav5-link .arr{font-size:.65rem;transition:transform .2s;display:inline-block}
.nav5-item:hover .nav5-link .arr{transform:rotate(180deg)}
.nav5-drop{position:absolute;top:calc(100% - 8px);left:0;min-width:280px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:16px;box-shadow:0 20px 40px rgba(0,0,0,.1);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;transform:translateY(-8px)}
.nav5-item:hover .nav5-drop{opacity:1;pointer-events:auto;transform:translateY(0)}
.drop-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s}
.drop-item:hover{background:#f8fafc}
.drop-icon{width:36px;height:36px;border-radius:8px;background:var(--c,#eff6ff);display:grid;place-items:center;font-size:1rem;flex:0 0 auto}
.drop-title{font-size:.88rem;font-weight:600;color:#0f172a}
.drop-desc{font-size:.75rem;color:#64748b;margin-top:1px}

@media(max-width:700px){.layout4{grid-template-columns:1fr}.nav5-drop{left:-20px;right:0;min-width:260px}}
@media(max-width:540px){.nav2,.nav3{padding:0 16px}.nav2-link,.nav3-link{padding:16px 12px;font-size:.8rem}}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

More from 22 CSS Transition Effects

Number Counter AnimationCard Tilt 3D HoverStaggered List AnimationCursor Trail EffectMagnetic Button EffectSplit Text Reveal TransitionProgress Bar AnimationButton Hover TransitionsFlip Card 3D TransitionText Reveal AnimationImage Zoom Hover TransitionBackground Color Transition
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →