Simple Sidebar Hamburger Menu In CSS

Category: CSS & CSS3 , Menu & Navigation | February 5, 2023
Author:WebDevSimplified
Views Total:1,355 views
Official Page:Go to website
Last Update:February 5, 2023
License:MIT

Preview:

Simple Sidebar Hamburger Menu In CSS

Description:

A really simple sidebar hamburger menu written in plain HTML and CSS.

It uses the native HTML checkbox to toggle the side menu, without writing any JavaScript code.

How to use it:

1. Create a checkbox input for the hamburger toggle button.

<label class="hamburger-menu">
  <input type="checkbox" />
</label>

2. Add your menu items to the sidebar.

<aside class="sidebar">
  <nav>
    <div>This</div>
    <div>Is</div>
    <div>The</div>
    <div>Sidebar</div>
  </nav>
</aside>

3. The main CSS styles. Feel free to override the default CSS variables in the :root to create your own menu styles.

:root {
  --bar-width: 60px;
  --bar-height: 8px;
  --hamburger-gap: 6px;
  --foreground: #333;
  --background: white;
  --hamburger-margin: 8px;
  --animation-timing: 200ms ease-in-out;
  --hamburger-height: calc(var(--bar-height) * 3 + var(--hamburger-gap) * 2);
}
.hamburger-menu {
  --x-width: calc(var(--hamburger-height) * 1.41421356237);
  display: flex;
  flex-direction: column;
  gap: var(--hamburger-gap);
  width: max-content;
  position: absolute;
  top: var(--hamburger-margin);
  left: var(--hamburger-margin);
  z-index: 2;
  cursor: pointer;
}
.hamburger-menu:has(input:checked) {
  --foreground: white;
  --background: #333;
}
.hamburger-menu:has(input:focus-visible)::before,
.hamburger-menu:has(input:focus-visible)::after,
.hamburger-menu input:focus-visible {
  border: 1px solid var(--background);
  box-shadow: 0 0 0 1px var(--foreground);
}
.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input {
  content: "";
  width: var(--bar-width);
  height: var(--bar-height);
  background-color: var(--foreground);
  border-radius: 9999px;
  transform-origin: left center;
  transition: opacity var(--animation-timing), width var(--animation-timing),
    rotate var(--animation-timing), translate var(--animation-timing),
    background-color var(--animation-timing);
}
.hamburger-menu input {
  appearance: none;
  padding: 0;
  margin: 0;
  outline: none;
  pointer-events: none;
}
.hamburger-menu:has(input:checked)::before {
  rotate: 45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / -2);
}
.hamburger-menu:has(input:checked)::after {
  rotate: -45deg;
  width: var(--x-width);
  translate: 0 calc(var(--bar-height) / 2);
}
.hamburger-menu input:checked {
  opacity: 0;
  width: 0;
}
.sidebar {
  transition: translate var(--animation-timing);
  translate: -100%;
  padding: 0.5rem 1rem;
  padding-top: calc(var(--hamburger-height) + var(--hamburger-margin) + 1rem);
  background-color: var(--foreground);
  color: var(--background);
  max-width: 10rem;
  min-height: 100vh;
}
.hamburger-menu:has(input:checked) + .sidebar {
  translate: 0;
}

You Might Be Interested In:


Leave a Reply