Making Hamburger Menu with CSS

What comes to mind when you say the hamburger menu? Isn't it that when you click 3 lines and the middle line is hidden and the others form a cross and the menu is opened from the side? Exactly :) So how can we do that?

First of all, I want to shape the whole menu according to a certain height. This will be the height of a bar as you can see in the image above.

When we base the height of a bar as 10px, the distance between the bars will be 25px. And the width of the menu will be 100px and the height will be 60px. So let's write our HTML structure first and start creating CSS variables.

<input type="checkbox" id="menu-toggle">

<div class="container">
    <div class="header">
        <label class="hamburger-menu" for="menu-toggle">
            <span></span>
        </label>
        <a href="#" class="logo">
            LOGO
        </a>
        <div class="actions">
            test
        </div>
        <label for="menu-toggle" class="backdrop"></label>
    </div>
</div>

<nav class="menu">
    <ul>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Gallery</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>

Let's examine how to write with a logic.

@import"https://fonts.googleapis.com/css2?family=Mulish:[email protected];500;600;700&display=swap";

* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    box-sizing: border-box;
    outline: 0;
    text-decoration: none;
    font-family: 'Mulish', sans-serif;
    -webkit-font-smoothing: antialiased;
}

:root {
    --animation-speed: 300ms;
}

html, body {
    height: 100%;
    overflow-x: hidden;
}
.backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(#000,.5);
    opacity: 0;
    visibility: hidden;
    transition: var(--animation-speed) all;
    cursor: pointer;
}

.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    background: #fff;
    border-right: 1px solid #ddd;
    transform: translateX(-100%);
    transition: var(--animation-speed) transform;
}
.menu ul li {
    border-bottom: 1px solid #ddd;
}
.menu ul li a {
    display: block;
    font-size: 20px;
    letter-spacing: 2px;
    padding: 15px 20px;
    color: #333;
}
.menu ul li a:hover {
    background-color: lime;
}

.container {
    height: 100%;
    background: #eee;
    transition: var(--animation-speed) transform;
}
.container .header {
    height: 60px;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    background: #fff;
    padding: 0 20px;
}
.container .actions {
    margin-left: auto;
}
.container .logo {
    color: #222;
    margin-left: 20px;
    font-weight: bold;
    font-size: 30px;
    text-transform: uppercase;
}


.hamburger-menu {
    --height: 10px;
    --space: calc(var(--height) * 2.5);
    --animation-speed: 300ms;
    width: calc(var(--space) * 4);
    height: calc(var(--height) + (var(--space) * 2));
    display: block;
    cursor: pointer;
    position: relative;
}
.hamburger-menu span,
.hamburger-menu span::before,
.hamburger-menu span::after {
    content: '';
    display: block;
    height: var(--height);
    width: 100%;
    background: #222;
}
.hamburger-menu span {
    transform: translateY(var(--space));
    transition: var(--animation-speed) var(--animation-speed) background-color;
}
.hamburger-menu span::before {
    position: absolute;
    bottom: var(--space);
    transition: var(--animation-speed) transform, var(--animation-speed) var(--animation-speed) bottom;
}
.hamburger-menu span::after {
    position: absolute;
    top: var(--space);
    transition: var(--animation-speed) transform, var(--animation-speed) var(--animation-speed) top;
}

#menu-toggle {
    display: none;
}
#menu-toggle:checked ~ nav.menu {
    transform: translateX(0);
}
#menu-toggle:checked ~ .container {
    transform: translateX(300px);
}
#menu-toggle:checked ~ .container .backdrop {
    opacity: 1;
    visibility: visible;
}
#menu-toggle:checked ~ .container .hamburger-menu span {
    background: transparent;
    transition: var(--animation-speed) background-color;
}
#menu-toggle:checked ~ .container .hamburger-menu span::before {
    transform: rotate(-45deg);
    bottom: 0;
    background-color: #fff;
    transition: var(--animation-speed) var(--animation-speed) transform, var(--animation-speed) bottom;
}
#menu-toggle:checked ~ .container .hamburger-menu span::after {
    transform: rotate(45deg);
    top: 0;
    background-color: #fff;
    transition: var(--animation-speed) var(--animation-speed) transform, var(--animation-speed) top;
}