Tutorial zum Erkennen des Display -Effekts des Hamburger -Menüs Klicken Sie auf

Dieser Artikel soll Entwicklern helfen, das Problem zu lösen, dass das Hamburger -Menü nicht angezeigt werden kann. Durch die Analyse der HTML -Struktur, CSS -Stile und JavaScript -Code erläutern wir ausführlich, wie die Anzeige- und Ausblendenfunktionen des Hamburger -Menüs korrekt implementiert werden und optimierte Code -Beispiele bereitgestellt werden, um sicherzustellen, dass die Leser sie schnell beherrschen und auf tatsächliche Projekte anwenden können. Gleichzeitig wird auch eingeführt, um das Bootstrap -Framework zu verwenden, um schnell eine reaktionsschnelle Navigationsleiste zu erstellen.

Frage verstehen: Zeigen Sie die Logik des Hamburger -Menüs an

Das Burger -Menü wird häufig auf kleinen Bildschirmgeräten verwendet, um herkömmliche Navigationsleisten zu ersetzen und den Bildschirm zu speichern. Das Grundprinzip ist:

1. Navigationsleiste ausblenden: Unter dem kleinen Bildschirm ist die Navigationsleiste standardmäßig versteckt.
2. Hamburger -Symbol anzeigen: Zeigen Sie ein Hamburger -Symbol (normalerweise drei horizontale Linien).
3. Klicken Sie auf Ereignis: Wenn der Benutzer auf das Hamburger -Symbol klickt, wird die Navigationsleiste angezeigt.
4. Klicken Sie erneut: Verstecken Sie die Navigationsleiste, wenn Sie erneut auf das Hamburger -Symbol klicken.

Analysieren Sie den vorhandenen Code

Nach den bereitgestellten Informationen enthält die HTML -Struktur einen Kopfzeilenbereich, der die Navigationsleiste -Navigationsleiste und einen mobilen Bereich enthält, der das Hamburger -Symbol enthält. Der CSS -Stil wird verwendet, um die Navigationsleiste unter einem kleinen Bildschirm zu verbergen und Hamburger -Symbole im mobilen Bereich anzuzeigen. JavaScript Code wird verwendet, um auf Klickereignisse von Hamburger -Symbolen anzuhören und die aktive Klasse von Navbar hinzuzufügen oder zu entfernen, wodurch die Anzeige und das Verstecken der Navigationsleiste gesteuert werden.

HTML -Struktur

 <abschnitt id="Header">
    <a href="#"> <img id="icon-home" src="iconos/mseu.jpg" alt=""> </a>
    <div>
        <ul id="navbar">
            <li> <a class="active" href="index.html"> home </a> </li>
            <li> <a href="Shop.html"> Shop </a> </li>
            <li> <a href="blog.html"> blog </a> </li>
            <li> <a href="about.html"> über </a> </li>
            <li> <a href="contact.html"> Kontakt </a> </li>
            <li> <a href="cart.html"> <i> <svg xmlns="http://www.w3.org/2000/svg" width="16" h fill="currentColor" class="bi-bag" viewbox="0 0 0 16"> <paths d="m8 1A2.5 2.5 0,5 2.5 22 16"> <paths d="M8 1A2.5 2.5 22 0 0 0 16"> <paths d="m8 1A2.5 2.5 22 0 0 0 16"> <paths d=" V4H-5V-5A2,5 2,5 0 0 1 8 1ZM3.5 3V-. 1-1-1v5z "></paths> </paths></paths></paths></svg> </i> </a> </li>
        </ul>
    </div>
    <div id="mobile">
        <a href="cart.html"> <i> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-bag" viewbox="0 0 16 16"> <path v4h-5v-. id="bar" class="fas fa-outdent"> </path></svg></i>
    </a>
</div>
</abschnitt>

CSS -Stil

 #Mobile{
    Anzeige: Keine;
    Ausrichtung: Zentrum;
}  
@media (max-Width: 799px) {
    #navbar {
        Anzeige: Flex;
        Flex-Richtung: Säule;
        Ausrichtung: Flex-Start;
        Justify-Incontent: Flex-Start;
        Position: fest;
        Top: 0;
        Rechts: -300px;
        Höhe: 100VH;
        Breite: 300px;
        Hintergrundfarbe: #fefefe;
        Box-Shadow: 0 40px 60px RGB (0, 0, 0, 0,1);
        Polsterung: 80px 0 0 10;
    }

    #navbar.active {
        Rechts: 0px;
    }

    #Navbar li {
        Randboden: 25px;
    }
    #Mobile{
        Anzeige: Flex;
        Ausrichtung: Zentrum;
    }    
    #mobil i {
        Farbe: #1a1a1a;
        Schriftgröße: 24px;
        Padding-Links: 20px;

    }
}

JavaScript -Code

 const bar = document.getElementById ('bar');
const nav = document.getElementById ('navbar');

if (bar) {
    bar.addeventListener ('klick', () => {
        nav.classlist.add ('active');
    })
};

Problemanalyse und Lösungen

Das Problem mit dem obigen Code ist:

• Fehlende Logik zum Entfernen von aktiven Klassen: Wenn Sie auf das Hamburger -Symbol klicken, werden nur aktive Klassen hinzugefügt, wodurch die Navigationsleiste angezeigt werden. Wenn Sie erneut erneut klicken, kann dies nicht ausblenden.

Lösung:

Ändern Sie den JavaScript -Code, um die Funktion des Klickens zu realisieren, um aktive Klassen zu wechseln.

 const bar = document.getElementById ('bar');
const nav = document.getElementById ('navbar');

if (bar) {
    bar.addeventListener ('klick', () => {
        nav.classlist.toggle ('active');
    });
};

Mit der Methode classList.toggle ('Active') können Sie aktive Klassen im Navigationselement hinzufügen oder entfernen, um die Schaltung zwischen Anzeige und verborgenem zu erreichen.

Optimierungsvorschläge

1. Verwenden Sie mehr semantische Klassennamen: Sie können beispielsweise IS-aktiv anstatt aktiv zu verbessern, um die Code-Lesbarkeit zu verbessern.

2. Übergangseffekt hinzufügen: Durch die Übergangseigenschaft von CSS können Sie dem Display und Versteck der Navigationsleiste einen Übergangseffekt hinzufügen, um die Benutzererfahrung zu verbessern.

 #navbar {
       / * ... vorhandene Stile ... */
       Übergang: Rechte 0,3s Leichtigkeit; /* Übergangseffekt hinzufügen*/
   }

3. Betrachten Sie die Barrierefreiheit: Stellen Sie sicher, dass das Burger -Menü unter Tastaturnavigation und Bildschirmleser gut funktioniert. Fügen Sie zum Beispiel ein Aria-Label-Attribut zum Hamburger-Symbol hinzu, um seine Funktionalität zu beschreiben.

 <i id="bar" class="fas fa-outdent" aria-label="Toggle Navigation"> </i>

Implementieren Sie schnell reaktionsschnelle Navigationsbalken mit Bootstrap

Bootstrap ist ein beliebtes Front-End-Framework, das umfangreiche Komponenten und Stile bietet, um reaktionsschnelle Webseiten schnell zu erstellen. Durch die Verwendung von Bootstrap kann die Implementierung des Hamburger -Menüs vereinfacht werden.

 

<kopf>
    <meta charset="utf-8">
    <meta name="viewPort" content="width = Gerätebreite, initial-scale = 1,0">
    <title> Bootstrap Navbar </title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.csss">



    <nav class="navbar navbar-expand-lg navi-light bg-light">
        <a class="navbar-brand" href="#"> navi </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarnav" aria-controls="navbarnav" aria-expanded="false" aria-label="
            <span class = " navbar-toggler-icon> 
        </button>
        <div class="Collapse Navi-Collapse" id="navbarnav">
            <ul class="navbar-nav">
                <li class="nav-iTem active">
                    <a class="nav-link" href="#"> home <span class="sr-nur"> (aktuell) </span> </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"> features </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#"> Preisgestaltung </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link deaktiviert" href="#" tabindex="-1" aria-disabled="true"> deaktiviert </a>
                </li>
            </ul>
        </div>
    </nav>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"> </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/poper.min.js"> </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script>


</kopf>

Das obige ist der detaillierte Inhalt vonTutorial zum Erkennen des Display -Effekts des Hamburger -Menüs Klicken Sie auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!