Die Webentwicklung schreitet derzeit rasant voran, und interaktive Elemente werden immer beliebter. Ein solches Element ist das ausfahrende Menü. Mit diesem Element können Sie eine spektakuläre und benutzerfreundliche Interaktion auf einer Webseite erstellen. In diesem Artikel betrachten wir schrittweise Anweisungen zum Erstellen eines ausfahrenden Menüs mit der HTML-Markupsprache.
Bevor Sie mit der Erstellung eines ausfahrenden Menüs beginnen, müssen Sie verstehen, wie es aussehen und funktionieren soll. Vielleicht möchten Sie, dass das Menü an der Seite oder oben auf der Seite angezeigt wird, oder Sie möchten lieber die Hamburger-Schaltfläche verwenden, um das Menü aufzurufen. Beachten Sie diese Details bei der Planung und Erstellung Ihres Reisemenüs.
Beim Erstellen eines HTML-abfahrenden Menüs besteht der erste Schritt darin, das Menüelement selbst mit den entsprechenden Tags zu erstellen. Sie können beispielsweise ein beliebiges Tag verwenden oder einen Wrapper für Ihr Menü erstellen. Es ist wichtig, die richtigen Tags auszuwählen, die Ihnen helfen, Ihren Code zu strukturieren und Ihr Menü für Suchmaschinen und Benutzer zugänglich zu machen.
Erstellen Sie ein ausfahrendes Menü in HTML: Schritt für Schritt Anleitung
Schritt 1: Erstellen von HTML-Markups
Der erste Schritt beim Erstellen eines ausfahrenden Menüs besteht darin, HTML-Markup hinzuzufügen. Erstellen Sie zunächst mit einer ID, die zum Formatieren und JavaScript-Code verwendet werden soll.
Schritt 2: Hinzufügen von CSS-Stilen
Der nächste Schritt ist das Hinzufügen von CSS-Stilen zum ausfahrenden Menü. Erstellen Sie Stile für mit der ID "menu" und definieren Sie ihre Startposition, Breite, Hintergrundfarbe und andere Stile, die zu Ihrem Design passen.
#menu
Schritt 3: Hinzufügen von JavaScript-Code
Schließlich fügen Sie JavaScript-Code hinzu, der für das Öffnen und Schließen des Menüs verantwortlich ist, wenn Sie auf eine Schaltfläche oder ein anderes Element klicken. Verwenden Sie Methoden .querySelector() und .addEventListener() um ein Element auszuwählen und ein Click-Ereignis hinzuzufügen.
const menu = document.querySelector("#menu");const toggleButton = document.querySelector("#toggle-button");toggleButton.addEventListener("click", function() );Schritt 4: Zusätzliche Stile
Wenn Sie beim Öffnen des Menüs zusätzliche Stile hinzufügen möchten, können Sie eine Pseudoklasse verwenden .open in CSS. Sie können beispielsweise eine neue Menüposition definieren und eine Animation hinzufügen, um ein reibungsloses Öffnen und Schließen zu ermöglichen.
#menu.open #menu.open ul
Schritt 5: Schlussfolgerung
Jetzt ist Ihr ausfahrendes Menü einsatzbereit! Wenn Sie auf die Schaltfläche klicken, wird das Menü auf der linken Seite der Seite angezeigt. Sie können seine Stile anpassen und zusätzliche Funktionen nach Ihren Bedürfnissen hinzufügen.
Schritt 1: Erstellen Sie eine grundlegende HTML-Codestruktur
Der Hauptinhalt der Seite wird in diese Zelle eingefügt.
Das Auswärtsmenü wird in diese Zelle eingefügt.
Wenn Sie eine solche Struktur erstellen, befindet sich das ausfahrende Menü rechts vom Hauptinhalt der Seite und kann durch Klicken auf eine Schaltfläche oder ein anderes Steuerelement abgerufen werden.
Schritt 2: Stilisieren Sie den Hauptbehälter und die Schaltfläche
Nachdem Sie die grundlegende Strukturorganisation für Ihr Ausreisemenü erstellt haben, ist es an der Zeit, es zu stilisieren.
Um zu beginnen, geben Sie die Stile für den Container Ihres Menüs an. Fügen Sie dem Element die Klasse "menu-container" hinzu div, die Sie als Menücontainer verwenden.
Fügen Sie dann Ihrer CSS-Datei Stile für diese Klasse hinzu. Sie können die Eigenschaftswerte entsprechend Ihren Designvorlieben ändern. Hier ist ein Beispiel für Stile für die Klasse "menu-container":
.menu-container position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 9999;
>
Beachten Sie die Eigenschaft "display: none;", die den Standardmenücontainer ausblendet.
Der nächste Schritt besteht darin, die Schaltfläche zu stylen, auf die der Benutzer klickt, um das Menü aufzurufen oder zu schließen. Fügen Sie ein Element hinzu button geben Sie im Menücontainer die Klasse "menu-button" an. Zum Beispiel:
Fügen Sie dann Ihrer CSS-Datei Stile für diese Klasse hinzu. Hier ist ein Beispiel für Stile für die Klasse "menu-button":
.menu-button position: fixed;
top: 20px;
right: 20px;
padding: 10px 20px;
background-color: #e5e5e5;
border: none;
border-radius: 4px;
outline: none;
cursor: pointer;
>
Nachdem Sie diese Stile angewendet haben, sollten Ihr Menücontainer und Ihre Schaltfläche einsatzbereit sein und weiter angepasst werden.
