Open hamburger menu - {dev} blondie;

С този snippet искам да ти покажа интеракция, която навярно присъства в над 90% от уеб сайтовете, а именно – т.нар. hamburger menu.

Започваме с HTML markup-a:

<header class="header" id="header">
    <div class="max-w-container w-1600">
        <div class="top-header">
            <div class="logo-wrap" id="logo">
                <a href="index.html" title="Site title link">Jacob Grønberg</a>
            </div>
            <div class="menu-opener" id="menu-open" tabindex="0" role="button" aria-label="Open menu button">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
        <div class="menu" id="menu">
            <div class="content-wrap">
                <nav class="nav-menu">
                    <a href="index.html" class="nav-link" title="nav link to homepage">Home</a>
                    <a href="projects.html" class="nav-link" title="nav link to projects">Projects</a>
                    <a href="exhibitions.html" class="nav-link" title="nav link to exhibitions">Exhibitions</a>
                    <a href="contacts.html" class="nav-link" title="nav link to contacts">Contacts</a>
                </nav>
            </div>
        </div>
    </div>
</header>

Какво имаме в него? header елемент (не забравяй да използваш семантичен HTML, важно е за уеб достъпността и не само), в който държим цялото съдържание на header-a. В първият child контейнер държим логото и хамбургера – елементът, който ще служи като trigger за отваряне на менюто. Във вторият контейнер държим самото навигационнно меню, което първоначално е скрито посредством CSS:

.menu {
  display: none;
}

Преминаваме и към най-важната част от този snippet, а именно JavaScript логиката:

const menu = document.querySelector('.menu');
const menuBtn = document.getElementById('menu-open');
    
function toggleMenu() {
    menuBtn.classList.toggle('opened-menu-btn');
    menu.classList.toggle('opened-menu');
}

// add event listeners
menuBtn.addEventListener('click', toggleMenu);

// accessibility event listener
menuBtn.addEventListener('keydown', (event) => {
    if (event.key === 'Enter' || event.key === ' ') {
        toggleMenu();
    }
})

Какво се случва в този скрипт? Първо, в две променливи запазваме двата елемента, с които ще работим – хамбургера (menuBtn) и самото меню (menu).

В една функция – toggleMenu вземаме хамбургера и използвайки classList добавяме/премахваме клас „opened-menu-btn„, вземаме и menu елемента и му добавяме/премахваме клас „opened-menu„.

В два eventListener-a по-надолу ще видиш и как инициализирам toggleMenu функцията. Съвсем възможно е и цялата функция да е поместена в един eventListener, който слуша за клик, но в този случай съм предприела това решение, за да имам възможност да инициализирам функцията и при клик на бутон Enter от клавиатурата (за хора с нарушено зрение).

Вече на добавените HTML класове можем да добавим и съответните CSS стилове:

.menu-opener {
    position: relative;
    cursor: pointer;
    span {
        display: block;
    }
    &.opened-menu-btn {
        span {
            &:nth-child(1), &:nth-child(3) {
                visibility: hidden;
            }
        }
    }
}

.menu {
    display: none;
    &.opened-menu {
        position: fixed;
    }
}

Happy coding 🙂

Нова работилница

Популярни уроци и статии