Kako ustvariti interaktivno hamburger ikono

Interaktivna hamburger ikona je ključni element mobilnih spletnih strani. Omogoča nam, da navigacijski meni skrijemo in ga prikažemo le takrat, ko ga uporabnik potrebuje. Za delovanje potrebujemo tri komponente: HTML za strukturo, CSS za izgled in JavaScript, ki ob kliku zamenja ikono (iz treh črtic v X).

Celoten primer kode

Spodaj je kompletna koda HTML dokumenta. Vključuje povezavo do knjižnice Bootstrap Icons, potrebne sloge in JavaScript logiko za preklapljanje ikon.

<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="UTF-8">
<title>Hamburger Menu Icon</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Povezava do Bootstrap ikon -->
<link rel="stylesheet" href="[https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css](https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css)">

<style>
    .menu-toggle {
        width: 45px;
        height: 45px;
        border: none;
        background: #1e1e1e;
        color: #87d5fe;
        cursor: pointer;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }
    .menu-toggle i {
        font-size: 28px;
    }
    .menu-toggle:hover {
        background-color: #333;
    }<br><br>    /* Ikona se pojavi pri resoluciji 1280px ali nastavite drugače */
    @media screen and (max-width: 1280px) {
        .menu-toggle {
            display: flex; /* Prikaže gumb na mobilnih napravah in tablicah */
        }
    }
</style>
</head>
<body>
<!-- Gumb z ikono -->
<button class="menu-toggle" id="hamburger-btn" type="button" aria-label="Meni">
    <i class="bi bi-list" id="nav-icon"></i>
</button>

<script>
    const btn = document.getElementById('hamburger-btn');
    const icon = document.getElementById('nav-icon');

    btn.addEventListener('click', () => {
        if (icon.classList.contains('bi-list')) {
            icon.classList.replace('bi-list', 'bi-x-lg');
        } else {
            icon.classList.replace('bi-x-lg', 'bi-list');
        }
    });
</script>
</body>
</html>