Erstellen Sie einfach verschiebbare Hamburger Menüs mit dem jQuery Slidebars Framework

UX-Designer streiten sich über die Verwendung von Hamburger Menüs im Webdesign. Sie für mobile Benutzer einen Zweck erfüllen aber auch haben geringere Auffindbarkeit.

Ich kann nicht sagen, ob sie es wert sind, auf Ihrer Website verwendet zu werden oder nicht, aber ob Sie einen einfachen Weg suchen Ein Schiebemenü einrichten dann ist die Slidebars Framework ist eine praktische Ressource.

Slidebars ist völlig kostenlos und Open-Source gebaut auf der jQuery-Bibliothek. Es funktioniert genau so, wie Sie es erwarten würden, wenn Sie auf ein Hamburger-Symbol klicken, um ein verschiebbares Menü zu öffnen schiebt den Bildschirm von der Leinwand Platz schaffen.

Ein Feature, das ich besonders mag, ist das Tippen Sie auf, um das Setup auszublenden wo Sie auf der Seite irgendwo tippen können das Menü sofort ausblenden. Dies ist nicht in jedes verschiebbare Menü-Plugin integriert, es ist jedoch eine Funktion, die die Benutzererfahrung erheblich verbessert.

Dieses Plugin ist vollständig auf Open Source bezogen und der Code steht kostenlos zur Verfügung auf GitHub wenn du dich umschauen willst Dem Repo fehlt jedoch eine klare Dokumentation, die das Setup erschwert.

Zum Glück finden Sie dies auf der Hauptseite vollständige Gebrauchsanleitungen um Slidebars schnell zum Laufen zu bringen.

Es unterstützt gleitende Menüs von allen vier Seiten des Bildschirms, zusammen mit benutzerdefinierte Funktionen für Animationseffekte, Farbauswahl und Gesamtbreite / -höhe des Menüs.

Das gesamte verschiebbare Menü funktioniert auf einem Off-Page-Element, also musst du Richten Sie das Off-Canvas-Menü richtig ein. Dies beinhaltet sowohl richtiges HTML als auch das richtige CSS für das Styling.

All dies ist in der Dokumentation ausführlich beschrieben. Wenn Sie also Schritt für Schritt den Seiten folgen, sollten Sie es gut funktionieren lassen. Und die Standardeinstellung erfordert keine benutzerdefinierten Eigenschaften, Wenn Sie also nur die grundlegenden Schritte befolgen, haben Sie keine Probleme.

Slidebars ist wirklich ein voller rahmen und es hat sogar eine benutzerdefinierte API Sie können überarbeiten. Es erlaubt dir zu jQuery-Funktionen aufrufen Funktionen hinzufügen oder Standardfunktionen anpassen. Eine ausgezeichnete Wahl für Entwickler, die ein verschiebbares Menü benötigen, jedoch kein neues Menü erstellen möchten.

Wenn Sie mehr darüber erfahren möchten, besuchen Sie die Slidebars-Website. Es hat buchstäblich alles, was Sie wissen müssen, und viele Demos, um herumzugehen.