CSS ile Hamburger Menu Yapımı

Hamburger menü deyince aklınıza ne geliyor? 3 çizgi ve tıklayınca ortadaki çizginin gizlenip diğerlerinin bir çarpı işareti oluşturması ve yandan menünün açılması değil mi? Aynen öyle :) Peki bunu nasıl yapabiliriz?

Öncelikle belli bir yükseklik ölçüsüne göre bütün menüyü şekillendirmek istiyorum. Bu da yukarıdaki görselde gördüğünüz gibi bir barın yüksekliği olacak.

Bir barın yüksekliğini 10px olarak baz aldığımızda, barların aralarındaki mesafe aralığı 25px olacaktır. Ve menünün genişliği 100px, yüksekliği ise 60px olacaktır. O yüzden ilk başta HTML yapımızı yazalım ve CSS değişkenlerini oluşturmaya başlayalım.

<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="#">Anasayfa</a>
        </li>
        <li>
            <a href="#">Hakkımda</a>
        </li>
        <li>
            <a href="#">Porfolyo</a>
        </li>
        <li>
            <a href="#">Blog</a>
        </li>
        <li>
            <a href="#">İletişim</a>
        </li>
    </ul>
</nav>

Gelin nasıl bir mantıkla yazacağız inceleyelim.

/**
    Sıfırlama ve diğer kodlar
**/
@import"https://fonts.googleapis.com/css2?family=Mulish:wght@400;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(0,0,0,.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 kodları
**/
.hamburger-menu {
    --height: 2.4px;
    --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;
    z-index: 5;
}
.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;
}

Sonuç ise