Erstellen Sie ein Slide-Out-Menü

Sep 15, 2025
wie man

Eine großartige Möglichkeit, das zu verbessern Benutzererfahrung Auf Ihrer Site soll ein Rutsch-Menü hinzugefügt werden. Es erstellt einen auffälligen Weg, um die Benutzer zu finden, um das zu finden, was sie wollen - wo immer sie auf der Seite sein können - und bedeutet, dass sie nicht zum oberen NAV blättern müssen.

Wir lieben das Slide-Out-Menü auf der Website für Eisdiele Kosmetikkosmetik , entworfen von Hiroka Hasegawa (Wenn Sie Websites sehen, möchten Sie möchten, dass Sie sie speichern Cloud-Speicherung. für Inspiration). Lesen Sie weiter, um herauszufinden, wie Sie diesen Slide-Out-Effekt auf Ihrer eigenen Website replizieren. Ich möchte eine Website erstellen, die einen Eindruck macht? Das Recht Web-Hosting Service oder Webseitenersteller Wird genau das tun.

01. Dokumentinitiierung.

Der erste Schritt besteht darin, das Seitendokument zu definieren. Dies besteht aus einem HTML-Container, der die Webseite darstellt, der den Kopf- und Körperabschnitt enthält. Während der Kopfteil verwendet wird, um die externen CSS- und JavaScript-Ressourcen zu laden, wird der Body-Abschnitt verwendet, um den in Schritt # 2 erstellten sichtbaren Seiteninhalt zu speichern. 

 & lt ;! doctype html & gt;
& lt; HTML & GT;
& lt; head & gt;
& lt; Titel & GT; Slide Out MENU & LT; / TITEL & GT;
& lt; link rel = "stylesheet" type = "text / css" media = "screen" href = "styles.css" / & gt;
& lt; Skript src = "code.js" & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
*** Schritt 2 hier
& lt; / body & gt;
& lt; / html & gt;

02. Seiteninhalt

Der Seiteninhalt besteht aus einem Überzugstitel sowie einen Navigationsbehälter. Diese Navigation speichert eine Reihe von Links und wurde ein Attribut "Datenaktion" zugewiesen. Es ist dieses Attribut, das von JavaScript und CSS verwendet wird, um Styling und Funktionalität an den Behälter und seine Elemente anzuwenden. 

 & lt; H1 & GT; Rutschen Sie das Menü & lt; / h1 & gt;
& lt; nav data-action = "expand" & gt;
  & lt; span & gt; & szgl. # 9776; & lt; / span & gt;
  & lt; ein href = "#" & gt; Seite 1 & lt; / a & gt;
  & lt; ein href = "#" & gt; Seite 2 & lt; / a & gt;
  & lt; ein href = "#" & gt; Seite 3 & lt; / a & gt;
& lt; / nav & gt;

03. CSS Initiation.

Das HTML ist jetzt vollständig, sodass eine neue Datei namens 'styles.css' erstellen, um die Präsentationsformatierung zu initiieren. Dieser Schritt setzt das HTML-Dokument und seinen Körper, um keinen sichtbaren Grenzabstand mit einem schwarzen Hintergrund zu haben. Die Farbe wird auf weiß wie die Standardfarbe für den Inhaber von Inhalten eingestellt. 

 HTML, Körper {
  Bildschirmsperre;
  Breite: 100%;
  Höhe: 100%;
  Hintergrund: # 000;
  Farbe: #FFF; }

04. Navigations-Setup.

Die Navigation besteht darin, mit fester Positionierung und mit einem Z-Index über alles anzuzeigen, sodass er den Vollbildmodus unabhängig davon, wo der Benutzer gescrollt ist, anzeigt. Auf der linken Seite des sichtbaren Ansichtsfensters des Bildschirms ist es anfangs außerhalb der Sichtweise positioniert. Eine Übergangsregel wird angewendet, um Änderungen über eine Dauer einer Sekunde zu animieren. 

 NAV {
  Bildschirmsperre;
  Position: Fixiert;
  Box-Dimensionierung: Border-Box;
  oben: 0;
  links: -100vw;
  Z-Index: 9999;
  Polsterung: .5EM 1EM .5EM 1EM ;;
  Breite: 100VW;
  Höhe: 100VH;
  Text-ALIGN: CENTER;
  Hintergrund: rot;
  Übergang: Alle 1s; }

05. Nav Öffnen und Symbol

Die linke Position der Navigation wird auf Null gesetzt, wenn eine 'offene' Klasse angewendet wurde, wodurch der in dem vorherigen Schritt definierte Animationsübergang ausgelöst wurde. Das erste Kind der Navigation ist das erweiterte Symbol, das eine feste Positionierung verwendet, um in der Mitte der linken Bildschirmseite immer sichtbar zu bleiben. 

 nav.open {
  links: 0;
}
NAV *: First-Child {
  Position: Fixiert;
  Polsterung: 1EM;
  Cursor: Zeiger;
  links: 0;
  oben: 50 vh;
  Lösche beide; }

06. Navigationsverbindungen.

Jede Ankerverbindung innerhalb des Navigationscontainers ist vierfache der Größe des Standardtexts. Ihre Farbe ist auf Schwarz gesetzt, wobei sich ein Rand an der Oberseite anlegt, um den vertikalen Abstand zu gewährleisten, ist sichtbar. Wenn Sie ihre Anzeige als "Block" einstellen, scheint jeder Link automatisch senkrecht gestapelt zu sein. 

 NAV A {
  Bildschirmsperre;
  Schriftgröße: 4EM;
  Farbe: # 000;
  Schriftfamilie: Arial;
  Textdekoration: Keine;
  Margin-Top: .2EM;
}

07. Javascript-Listener.

Erstellen Sie eine neue Datei mit dem Namen 'code.js'. Dieser Schritt wartet, bis die Seite geladen hat, auf der er nach dem ersten Kind aller Navigationen mit dem Attribut 'Data-Action' sucht, das auf 'expand' eingestellt ist. Dieses erste Kind, das offene Symbol ist, hat einen "Klick" -ereignis-Listener, auf dem das Element eingeschaltet ist, um eine "offene" Klasse aufgetragen haben oder nicht. 

 Window.AdDeventLister ("Load", Funktion () {
  var knoten = document.queryselectorall ('nav [dataction = "expandieren"] *: First-Child');
  für (var i = 0; i & lt; knoten.länge; i ++) {
  Knoten [I].adDeventListener ("Klicken", Funktion () {
  if (the.parentnode.classname == "offen") this.parentnode.classname = "";
  sonst.parentnode.classname = "offen";
  });
  }
});
***

Dieser Artikel wurde ursprünglich in Ausgabe 274 des Kreativen Webdesigns der Webdesign-Zeitschriften-Webdesigner veröffentlicht. AUSGABEN 274 HIER KAUFEN oder Abonnieren Sie den Webdesigner hier .

Zum Thema passende Artikel:

  • Top Web Navigation Trends
  • 10 Regeln großer Benutzererfahrung
  • Fügen Sie Ihren Standort visuelle Hinweise hinzu

wie man - Die beliebtesten Artikel

10 Möglichkeiten, Ihre 3D-Anatomie zu verbessern

wie man Sep 15, 2025

(Bildkredite: Ryan Kingslien) Die Erneuerung der menschlichen Figur ist eines der härtesten Herausforderungen, denen..

Wie löst man einen kniffligen Design-Kurz?

wie man Sep 15, 2025

[Bild: Jack Renwick Studio] Wenn jemand weiß, wie man mit einem kniffligen Brief umgehen kann, sind es die klugen De..

Procreate Tutorial: So malen Sie wie die alten Meister

wie man Sep 15, 2025

Es gibt immer etwas Neues, um von den alten Meistern zu lernen, ob es sich um Komposition, Beleuchtung oder sogar eine Geschichte..

Erstellen Sie ein Multi-Exposition-Bild mit Adobe CC

wie man Sep 15, 2025

Adobe hat mich mit der Erstellung einer Illustration, um das Konzept des Multilokalismus auszudrücken, und darüber kann ich meine Antwort sehen. In diesem Tutorial gehe ich durch meinen kre..

So erstellen Sie massive Explosionen mit V-Ray

wie man Sep 15, 2025

Das Erstellen und Zusammenstellen von 3D-Explosionen ist in der Regel eine Aufgabe für zwei verschiedene Künstler oder Studioab..

Alter ein Foto in Photoshop CC

wie man Sep 15, 2025

Altern Ein Foto in Photoshop ist eine klassische Technik, die sogar ein HO-HUM-, vollfarbiges Bild in etwas Schläkiges drehen ka..

7 Killer-Wege, um das Benutzerverhalten zu beeinflussen

wie man Sep 15, 2025

Websites verwenden psychologische Techniken, um das Verhalten ihrer Nutzer zu beeinflussen. Ziehung von jahrzehntelanger akademischer Forschung, der erklärt, wie unser Verstand arbeitet und ..

Erstellen Sie eine Spielumgebung in der Unreal Engine 4

wie man Sep 15, 2025

Verwenden meines Unreal Engine 4 Projekt Die letzte Haltestelle als Beispiel möchte ich Ihnen einige wichtige Schritte zeigen, u..

Kategorien