Collapsible Sidebar Menu with Dark Mode – HTML CSS JS

67 0 Navigation CodeExpert Follow

Remix Open In Editor Fullscreen Discuss Publish Your Code

Collapsible Sidebar Menu with Dark Mode – HTML CSS JS

<aside class="sidebar" id="sb">
  <div class="head">
    <div class="logo">⚡</div><span class="t">Pulse</span>
    <button class="toggle" id="toggle" aria-label="Collapse sidebar">‹</button>
  </div>
  <div class="find"><span>🔍</span><input class="t" placeholder="Search…"></div>
  <ul class="menu">
    <li class="on"><a href="#"><i>🏠</i><span class="t">Home</span></a><b class="tip">Home</b></li>
    <li><a href="#"><i>📊</i><span class="t">Analytics</span><em class="t">New</em></a><b class="tip">Analytics</b></li>
    <li class="has"><a href="#"><i>📁</i><span class="t">Projects</span><s class="t">▾</s></a><b class="tip">Projects</b>
      <ul class="sub"><li><a href="#">Website redesign</a></li><li><a href="#">Mobile app</a></li><li><a href="#">Marketing</a></li></ul></li>
    <li><a href="#"><i>💬</i><span class="t">Messages</span><em class="t n">5</em></a><b class="tip">Messages</b></li>
    <li><a href="#"><i>📅</i><span class="t">Calendar</span></a><b class="tip">Calendar</b></li>
    <li><a href="#"><i>⚙️</i><span class="t">Settings</span></a><b class="tip">Settings</b></li>
  </ul>
  <div class="foot">
    <label class="mode"><i>🌙</i><span class="t">Dark mode</span><input type="checkbox" id="dark" checked class="t"></label>
    <div class="user"><div class="av">MS</div><div class="t"><b>Maya S.</b><small>Designer</small></div></div>
  </div>
</aside>
<button class="mobile" id="mobile" aria-label="Open menu">☰</button>
<main><h1>Collapsible Sidebar</h1><p>Click the arrow to collapse it into an icon rail. Hover icons for tooltips. On mobile it becomes a slide-in drawer.</p></main>

CSS

:root { --bg:#f4f6fb; --sb:#ffffff; --text:#1f2433; --muted:#8a91a6; --hover:#eef0f7; --acc:#6c5ce7; }
body.dark { --bg:#0f111a; --sb:#181b27; --text:#e9ebf4; --muted:#7d8499; --hover:#232737; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "Poppins", "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); display: flex; min-height: 100vh; transition: background .3s; }
.sidebar { width: 260px; background: var(--sb); padding: 16px 12px; display: flex; flex-direction: column; gap: 14px; transition: width .35s cubic-bezier(.6,0,.3,1); position: sticky; top: 0; height: 100vh; box-shadow: 2px 0 20px rgba(0,0,0,.06); z-index: 10; }
.head { display: flex; align-items: center; gap: 10px; position: relative; padding: 4px; }
.logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--acc); display: grid; place-items: center; font-size: 1.2rem; }
.head .t { font-weight: 700; font-size: 1.2rem; }
.toggle { position: absolute; right: -24px; top: 10px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--acc); color: #fff; cursor: pointer; font-size: 1rem; transition: transform .35s; }
.find { display: flex; align-items: center; gap: 12px; background: var(--hover); border-radius: 10px; padding: 0 12px; height: 42px; overflow: hidden; }
.find input { border: 0; background: none; outline: none; color: var(--text); width: 100%; font: inherit; }
.menu { list-style: none; flex: 1; overflow-y: auto; overflow-x: hidden; }
.menu > li { position: relative; margin-bottom: 4px; }
.menu a { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; color: var(--text); text-decoration: none; white-space: nowrap; transition: background .2s; }
.menu a:hover { background: var(--hover); }
.menu li.on > a { background: var(--acc); color: #fff; }
.menu i { font-style: normal; width: 20px; text-align: center; flex-shrink: 0; }
.menu em { margin-left: auto; font-style: normal; font-size: .7rem; background: #00b894; color: #fff; padding: 2px 8px; border-radius: 99px; }
.menu em.n { background: #ff7675; }
.menu s { margin-left: auto; text-decoration: none; transition: transform .3s; }
.has.open s { transform: rotate(180deg); }
.sub { list-style: none; max-height: 0; overflow: hidden; transition: max-height .35s; padding-left: 46px; }
.has.open .sub { max-height: 200px; }
.sub a { padding: 8px 10px; font-size: .9rem; color: var(--muted); }
.tip { position: absolute; left: 70px; top: 50%; transform: translateY(-50%) scale(.8); background: var(--text); color: var(--sb); font-size: .8rem; padding: 6px 10px; border-radius: 6px; opacity: 0; pointer-events: none; transition: .2s; white-space: nowrap; }
.foot { border-top: 1px solid var(--hover); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.mode { display: flex; align-items: center; gap: 14px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.mode input { margin-left: auto; accent-color: var(--acc); width: 18px; height: 18px; }
.user { display: flex; gap: 10px; align-items: center; padding: 6px; white-space: nowrap; overflow: hidden; }
.av { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, #fd79a8, #6c5ce7); color: #fff; display: grid; place-items: center; font-weight: 700; }
.user small { display: block; color: var(--muted); }
.t { transition: opacity .25s; }

/* collapsed */
.sidebar.mini { width: 78px; }
.sidebar.mini .t { opacity: 0; pointer-events: none; }
.sidebar.mini .toggle { transform: rotate(180deg); }
.sidebar.mini .sub { max-height: 0 !important; }
.sidebar.mini .menu > li:hover .tip { opacity: 1; transform: translateY(-50%) scale(1); }
.sidebar.mini .menu { overflow: visible; }

main { padding: 48px; max-width: 640px; }
main h1 { margin-bottom: 12px; }
main p { color: var(--muted); line-height: 1.6; }
.mobile { display: none; }
@media (max-width: 700px) {
  .sidebar { position: fixed; left: 0; transform: translateX(-100%); transition: transform .35s, width .35s; }
  .sidebar.show { transform: none; }
  .toggle { display: none; }
  .mobile { display: block; position: fixed; top: 14px; left: 14px; width: 42px; height: 42px; border-radius: 10px; border: 0; background: var(--acc); color: #fff; font-size: 1.2rem; z-index: 11; }
  main { padding: 80px 20px; }
}

// Collapsible sidebar with submenu, tooltips, dark mode & mobile drawer
var sb = document.getElementById('sb');
document.getElementById('toggle').onclick = function () { sb.classList.toggle('mini'); };
document.getElementById('mobile').onclick = function (e) { e.stopPropagation(); sb.classList.toggle('show'); };
document.addEventListener('click', function (e) { if (!sb.contains(e.target)) sb.classList.remove('show'); });

var dark = document.getElementById('dark');
function applyTheme() { document.body.classList.toggle('dark', dark.checked); }
dark.onchange = applyTheme; applyTheme();

Comments 0

…

Collapsible Sidebar Menu with Dark Mode – HTML CSS JS

Recommended

Comments 0