So erstellen Sie eine verschiebbare Menüleiste mit HTML, CSS und JavaScript

Ein Menü ist das, wonach Sie suchen, wenn Sie auf einer Website landen. Es hat Optionen und gibt Ihnen Zugriff auf alles, was die Website Ihnen zu bieten hat. Sie würden definitiv sagen, dass es ein wichtiger Teil einer Website ist, oder?

Mein Freund Girish Patil und ich haben diesen Monat einen zweiwöchentlichen Newsletter für Fronted-Entwickler gestartet. Der erste Newsletter enthält verschiebbare Menüleisten, und deshalb schreibe ich hier darüber, wie wir ihn erstellt haben.

Bevor wir beginnen, richten Sie einen Container für Ihre gesamte Webseite ein und gestalten Sie die Breite und Höhe gemäß Ihren Anforderungen. Jetzt müssen Sie im Container ein Schiebemenü platzieren. In diesem Artikel wird erläutert, wie Sie ein Menü mit Linksschieber erstellen.

Lass uns anfangen

Der HTML-Code für den Schieberegler ist unten angegeben. Es ist eine einfache Version.

 Click here 

Slider

Twitter

@Supriya

@Girish

Ein Ankertag wird verwendet, um das Menü zu öffnen, wenn Sie darauf klicken. Dies löst das Öffnen des Menüs aus, sodass Sie sehen können, warum es als Slider-Trigger bezeichnet wird . Die Menükomponente ist das, was in der Slider-Parent- Klasse liegt.

Entwerfen Sie nun die Menüleiste in CSS. Achten Sie auf die Designdetails.

.slider-container { position: relative; } .slider-container .slider-parent { height: 70vh; max-width: 250px; width: 100%; background: #6C7A89; position: absolute; left: -250px; top: 50px; visibility: hidden; opacity: 0; pointer-events: none; transition: .2s all linear; } .slider-container .slider-parent.active { visibility: visible; pointer-events: inherit; transition: .2s all ease-in-out; opacity: 1; left: 0; }

Lassen Sie uns nun das obige Snippet aufschlüsseln und diskutieren, wie es funktioniert.

Maxwidth definiert die maximale Breite, bis zu der der Div belegt werden kann. In einem kleineren Fenster kann es weniger als 250px belegen. Das div nimmt 250px ein, wenn das Fenster auf dem Bildschirm ganz ausgestreckt ist.

Manchmal sieht der Benutzer die Website auf einem viel kleineren Bildschirm, daher möchten wir, dass die Größe unseres Div entsprechend geändert wird.

Schauen wir uns weiter an, warum noch: -250px? Dies geschieht, um eine reibungslose Gleitbewegung für das Menü zu erzielen. Beachten Sie, dass der Wert für left negativ ist. Dies zeigt an, dass das Menü 250px links von der Startposition (0) beginnt. So ist es derzeit nicht im sichtbaren Bereich.

Wir möchten nicht, dass das Schiebemenü überhaupt angezeigt wird. Deshalb fügen wir die Deckkraft hinzu und verbergen die Sichtbarkeit . Jeder mag Animation und es gibt ein interessantes visuelles Gefühl. Diese Animation kann mit der Übergangskomponente durchgeführt werden.

YAYYY! Der grundlegende Schieberegler ist fertig!

Original text


Nachdem der grundlegende Schieberegler fertig ist, wollen wir verstehen, was passiert, wenn der Schieberegler aktiv ist, dh wenn auf das Ankertag geklickt wird, das die Menüleiste öffnet.

Konzentrieren Sie sich auf die aktive Klasse im oben angegebenen CSS-Code. Beachten Sie, dass die Werte für Deckkraft undSichtbarkeit werden geändert. Diese Änderung wird vorgenommen, um den zuvor ausgeblendeten Schieberegler auf dem Bildschirm sichtbar zu machen.

Sie könnten sich auch fragen: Warum bleibt es jetzt : 0? Zuvor war der Schieberegler nicht auf dem Bildschirm. Nachdem das Menü auf der linken Seite des Bildschirms beginnen soll, ändern wir den Wert von left auf 0.

OH! Die Animation! Fügen Sie die Übergangskomponente erneut hinzu, damit sie bei aktivem Schieberegler problemlos von links eingeblendet wird.

Es ist fertig! Sie haben die Komponenten entworfen. Was ist der nächste Schritt? JavaScript! Das alles wird in die Tat umgesetzt.

Hinzufügen von JavaScript

var sliderTrigger = document.getElementsByClassName("slider-trigger")[0];var slider = document.getElementsByClassName('slider-parent')[0];
sliderTrigger.addEventListener( "click" , function(el){
if(slider.classList.contains("active")){ slider.classList.remove("active"); }else{ slider.classList.add("active"); }
});

Schauen wir uns an, wie JavaScript alles umschließt und den Schieberegler zum Laufen bringt. Wir möchten, dass der Schieberegler geöffnet wird, wenn auf den Schieberegler-Auslöser des Ankertags geklickt wird. Also bekommen wir dieses Element in einen variablen sliderTrigger . Später bekommen wir das gesamte Slider-Element in den variablen Slider . Jetzt fügen wir einen Ereignis-Listener hinzu, der beim sliderTrigger eine Funktion implementiertElement wird angeklickt.

sliderTrigger.addEventListener( "click" , function(el) {} );

Die geschriebene Funktion steuert die Mechanik des Öffnens und Schließens der verschiebbaren Menüleiste. Denken Sie daran, dass wir einen aktiven und einen normalen Slider-Elternteil hattenKlasse.

Der Hack, den wir hier implementieren, besteht darin, die aktive Klasse hinzuzufügen, wenn auf das sliderTrigger- Element geklickt wird, und die aktive Klasse zu entfernen, wenn dasselbe Element erneut angeklickt wird. Dazu verwenden wir den unten angegebenen Code, um zu überprüfen, ob die Variable die aktive Klasse enthält.

slider.classList.contains("active")

Wenn der Wert true ist, entfernen wir die aktive Klasse aus der Liste. Was passiert dann? Die verschiebbare Menüleiste wird geschlossen. Wenn der Wert false ist, fügen wir die aktive Klasse zur Klassenliste hinzu. Was passiert nun? Ja, die verschiebbare Menüleiste wird angezeigt. So einfach ist das.

slider.classList.add("active")
slider.classList.remove("active")

Voilà es ist geschafft !! Guck mal wer klatscht;)

Die Funktionsweise desselben Codes wird unten im CodePen gezeigt.

Während dies ein einfaches Beispiel ist, sende ich in meinem Newsletter Beispiele für komplexere und unterschiedlichere Arten von verschiebbaren Menüleisten.

Github Repo von Giyaletter

Twitter-Handle: Supriya S und Girish Patil

Thank you. Happy coding :)

Check out products by us:

paybackhub.com and certhive.com