Hamburger Responsive Navigation

Hier ist ein einfaches JavaScript-Skript, mit dem ein Burger-Button eine responsive Navigation von der rechten Seite hereinschieben lässt. Beim Klick auf einen Link innerhalb der Navigation verschwindet sie wieder.

Funktionalität:

Burger-Button:
- Beim Klick auf den Burger-Button wird die Navigation durch Hinzufügen/Entfernen der Klasse active eingeblendet oder ausgeblendet.
Navigation Links:
- Beim Klick auf einen Link innerhalb der Navigation wird die active-Klasse entfernt, wodurch die Navigation ausgeblendet wird.
Optional – Klick außerhalb schließen:
- Wenn der Benutzer außerhalb der Navigation klickt (außerhalb des navOverlay und des burgerButton), wird die Navigation geschlossen.
CSS-Transition:
- Die Klasse .active verändert die right-Eigenschaft, sodass die Navigation sanft hereingleitet oder verschwindet.

Styling:

Die Navigation belegt 70% der Bildschirmbreite und maximal 300px.
Du kannst die Farben, Breite oder Übergangsgeschwindigkeit nach Belieben anpassen.

Ergebnis:

Beim Klick auf einen Navigationslink oder außerhalb der Navigation wird sie wieder ausgeblendet.

Die Navigation slidet von rechts herein, wenn du auf den Burger-Button klickst.

HTML-Beispiel:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation</title>
    <style>
        /* Grundstil */
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .burger-button {
            position: fixed;
            top: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            background-color: #333;
            color: #fff;
            border: none;
            cursor: pointer;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .burger-button:focus {
            outline: none;
        }

        .nav-overlay {
            position: fixed;
            top: 0;
            right: -100%;
            width: 70%;
            max-width: 300px;
            height: 100%;
            background-color: #222;
            color: #fff;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            transition: right 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .nav-overlay.active {
            right: 0;
        }

        .nav-overlay a {
            color: #fff;
            text-decoration: none;
            padding: 10px 20px;
            font-size: 18px;
            margin: 5px 0;
            border-bottom: 1px solid #444;
            text-align: center;
            width: 100%;
        }

        .nav-overlay a:hover {
            background-color: #444;
        }
    </style>
</head>
<body>
    <!-- Burger Button -->
    <button class="burger-button" id="burgerButton">☰</button>

    <!-- Navigation Overlay -->
    <nav class="nav-overlay" id="navOverlay">
        <a href="#section1">Home</a>
        <a href="#section2">About</a>
        <a href="#section3">Services</a>
        <a href="#section4">Contact</a>
    </nav>

    <!-- Inhalt -->
    <div style="padding: 20px;">
        <h1>Responsive Navigation Beispiel</h1>
        <p>Inhalt der Seite...</p>
    </div>

    <script>
        // Elemente referenzieren
        const burgerButton = document.getElementById("burgerButton");
        const navOverlay = document.getElementById("navOverlay");
        const navLinks = document.querySelectorAll(".nav-overlay a");

        // Burger-Button Klick
        burgerButton.addEventListener("click", () => {
            navOverlay.classList.toggle("active"); // Navigation ein-/ausblenden
        });

        // Klick auf Links in der Navigation
        navLinks.forEach(link => {
            link.addEventListener("click", () => {
                navOverlay.classList.remove("active"); // Navigation ausblenden
            });
        });

        // Optional: Klick außerhalb der Navigation schließt diese
        document.addEventListener("click", (event) => {
            if (!navOverlay.contains(event.target) && event.target !== burgerButton) {
                navOverlay.classList.remove("active");
            }
        });
    </script>
</body>
</html>