Verstecktes Javascript-Menü

JavaScript-verstecktes Menü

In diesem digitalen Zeitalter sind Websites zu einer der wichtigsten Möglichkeiten für Menschen geworden, Informationen zu erhalten und zu kommunizieren. Um das Benutzererlebnis zu verbessern, liegt beim Website-Design zunehmend der Fokus auf Interaktivität und Praktikabilität. Aus diesem Grund ist auch die Gestaltung der Menüleiste zu einem wichtigen Bestandteil der Website-Gestaltung geworden. Manchmal ist die Menüleiste jedoch zu umständlich und nimmt viel Platz auf der Seite ein, was zu Unannehmlichkeiten und Unterdrückung für die Benutzer führt. Daher ist die Entstehung versteckter Menüs für Designer zu einer der effektivsten Möglichkeiten geworden, dieses Problem zu lösen.

Das ausgeblendete Menü kann ausgeblendet werden, wenn der Benutzer es nicht benötigt, und bei Bedarf erweitert werden. Auf diese Weise spart das Ausblenden von Menüs nicht nur Platz auf der Seite, sondern ermöglicht auch eine bessere Klassifizierung von Informationen. Daher verfügen immer mehr Websites über versteckte Menüs. Es gibt viele Möglichkeiten, versteckte Menüs zu implementieren. In diesem Artikel wird eine Methode zum Implementieren versteckter Menüs basierend auf JavaScript vorgestellt.

1. HTML-Struktur

Zuerst müssen wir eine Menüleiste auf der Seite definieren, wie unten gezeigt:

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

Dies ist eine einfache Menüleiste mit vier Optionen: Startseite, Blog, Arbeit und Kontakt. Wir werden JavaScript verwenden, um diese Menüleiste auszublenden.

2. CSS-Stil

Bevor wir das Menü ausblenden, müssen wir zuerst den CSS-Stil definieren. Wir können das Anzeigeattribut eines Menüelements wie unten gezeigt ausblenden:

nav ul {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:row;
    justify-content:flex-end;
}

nav ul li {
    margin:0 10px;
}

nav ul li a {
    color:#333;
    text-decoration:none;
}

.hidden-menu {
    display:none;
}

Diese CSS-Stile werden verwendet, um das Menüelement zu formatieren und das Menü auszublenden. Unter ihnen ist der Stil des ausgeblendeten Menüs display:none, was der Schlüssel zum Ausblenden des Menüs ist.

3. JavaScript-Implementierung

Jetzt können wir mit der Implementierung des versteckten Menüs über JavaScript beginnen. Wir müssen der Menüleiste eine Schaltfläche hinzufügen. Wenn der Benutzer auf diese Schaltfläche klickt, verschwindet die Menüleiste. Nachdem wir auf die Schaltfläche geklickt haben, ändern wir den Anzeigestatus der Menüleiste über JavaScript. Um diese Funktion zu implementieren, müssen Sie die addEventListener-Methode von JavaScript verwenden, um auf Schaltflächenklickereignisse zu warten.

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button id="menu-button">Menu</button>
</nav>

Im Menü-Barcode haben wir ein Schaltflächenelement hinzugefügt und sein ID-Attribut auf „menu-button“ gesetzt. Jetzt können wir mit dem Schreiben von JavaScript-Code beginnen. Wir müssen dieses Schaltflächenelement abrufen und den Anzeigestatus der Menüleiste ändern, wenn auf die Schaltfläche geklickt wird. Wir können diesen Schritt mit dem folgenden Code ausführen:

const button = document.getElementById("menu-button");
const menu = document.querySelector("nav ul");

button.addEventListener("click", () => {
    menu.classList.toggle("hidden-menu");
});

Dieser JavaScript-Code wird verwendet, um das Schaltflächenelement und das Menüleistenelement abzurufen und den Status der Menüleiste umzuschalten, wenn auf die Schaltfläche geklickt wird. Wir verwenden die Methode classList.toggle, um das Klassenattribut der Menüleiste so umzuschalten, dass die Menüleiste ausgeblendet und angezeigt wird.

4. Passen Sie den CSS-Stil an

Nachdem der Code fertiggestellt ist, müssen wir den CSS-Stil anpassen, damit die Wirkung des ausgeblendeten Menüs besser den tatsächlichen Anforderungen entspricht. Standardmäßig sollte der Anfangszustand der Menüleiste ausgeblendet sein und erst angezeigt werden, nachdem der Benutzer auf die Schaltfläche geklickt hat. Daher müssen wir den Standardstatus der Menüleiste anpassen. Wir müssen nur die Anzeigeeigenschaft der Menüleiste auf „Keine“ setzen, um sie standardmäßig in den ausgeblendeten Zustand zu versetzen, wie unten gezeigt:

nav ul {
    display:none;
    flex-direction:row;
    justify-content:flex-end;
}

.hidden-menu {
    display:flex;
}

Auf diese Weise wird die Menüleiste ausgeblendet, wenn der Benutzer die Webseite lädt Standardmäßig wird es erst angezeigt, nachdem der Benutzer auf die Schaltfläche geklickt hat.

5. Implementierungseffekt

Jetzt haben wir die Implementierung des versteckten JavaScript-Menüs abgeschlossen. Schauen wir uns als Nächstes den Implementierungseffekt an:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript隐藏菜单</title>
    <style>
        nav ul {
            display:none;
            flex-direction:row;
            justify-content:flex-end;
            list-style:none;
            margin:0;
            padding:0;
        }

        nav ul li {
            margin:0 10px;
        }

        nav ul li a {
            color:#333;
            text-decoration:none;
        }

        .hidden-menu {
            display:flex;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Work</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <button id="menu-button">Menu</button>
    </nav>
    
    <script>
        const button = document.getElementById("menu-button");
        const menu = document.querySelector("nav ul");
        
        button.addEventListener("click", () => {
            menu.classList.toggle("hidden-menu");
        });
    </script>
</body>
</html>

In diesem Beispiel wird die Menüleiste standardmäßig ausgeblendet, wenn der Benutzer die Webseite lädt. Die Menüleiste wird erst angezeigt, nachdem der Benutzer auf die Schaltfläche geklickt hat, wie unten gezeigt:

Wenn die Schaltfläche erneut geklickt wird, kehrt die Menüleiste in ihren ausgeblendeten Zustand zurück.

6. Erweiterte Anwendung

Mit dieser Methode können wir einen einfachen versteckten Menüeffekt erzielen. Wenn die Menüleiste jedoch zu viele Optionen enthält, kann das ausgeblendete Menü unsere Anforderungen nicht vollständig erfüllen. Derzeit können wir dieses Problem mit Responsive Design lösen. Durch Responsive Design können wir auf verschiedenen Geräten unterschiedliche Menüleisten anzeigen. Auf Mobiltelefonen können wir beispielsweise Dropdown-Menüs verwenden, um alle Optionen anzuzeigen. Diese Methode kann sich besser an die Bedürfnisse verschiedener Geräte anpassen und das Benutzererlebnis verbessern.

Das obige ist der detaillierte Inhalt vonVerstecktes Javascript-Menü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!