So erstellen Sie ein Off-Canvas-Menü mit CSS und einem Hauch von JavaScript

In diesem Tutorial werden wir eine einfache, aber effektive Methode zum Erstellen eines Off-Canvas-Menüs mit HTML, CSS und JavaScript ausführen.

Um einen ersten Eindruck von dem, was wir bauen, zu bekommen, werfen Sie einen Blick auf die zugehörige CodePen-Demo (überprüfen Sie die größere Version für ein besseres Erlebnis):

HinweisHinweis: In diesem Lernprogramm wird nicht darauf geachtet, wie das Off-Canvas-Menü zugänglich oder ansprechbar ist. Daher sind diese Schritte sicherlich für die nächsten Schritte gültig.

1. Beginnen Sie mit Markup

Unser Markup besteht aus zwei Wrapper-Elementen:

• das .Top-Banner Element
• das .Top-Nav Element

Hier ist der HTML-Code:

2. Als nächstes brauchen wir etwas CSS

Wenn das Markup fertig ist, untersuchen wir als Nächstes die wichtigsten Stile, die für unser Menü erforderlich sind.

Hinweis: Aus Gründen der Lesbarkeit wird dieser CSS-Code nicht optimiert. Sie werden doppelte Eigenschaften feststellen, die Sie möglicherweise in Ihrer eigenen Version entfernen möchten.

Styling des Top-Banner-Elements

Das .Top-Banner Element sieht so aus:

In Bezug auf seine Stile machen wir Folgendes:

• Stellen Sie seine Breite gleich der Fensterbreite minus der Breite von ein .Menü-Wrapper Element.
  
• Stellen Sie die Höhe auf die Höhe des Fensters ein.
• Definieren Sie es als Flex-Container. Dadurch wird erzwungen, dass die Überlagerung die gesamte übergeordnete Höhe abdeckt.
• Verwenden Sie die Flexbox, um den Inhalt der Überlagerung vertikal zu zentrieren.

Hier sind die Stile, die wir brauchen, um all das zu erreichen: 

.Top-Banner Anzeige: Flex; Breite: berechnet (100% - 150px); Höhe: 100 Vh; transform: translateX (150px); Hintergrund: URL (IMAGE_PATH) no-repeat center / fixed;  .top-banner-overlay display: flex; Flex-Richtung: Spalte; Inhalt rechtfertigen: Mitte; Breite: 350px; Polsterung: 20px; Übergang: transform .7s; Farbe weiß; Hintergrund: rgba (0, 0, 0, .7); 

Styling des Top-Nav-Elements

Das .Top-Nav Element sieht so aus:

In diesem Fall machen wir Folgendes:

• Legen Sie die direkten untergeordneten Elemente als fest positionierte Elemente fest, die die Fensterhöhe abdecken.
• Verwenden Sie die Flexbox zum vertikalen Ausrichten der .festes Menü Element.
• Verstecke das .Menü-Wrapper Element standardmäßig Dafür geben wir ihm keinen Eigenschaftswert wie Anzeige: keine. In der Tat verwenden wir die Übersetzen() Funktion, um es 200px nach links zu verschieben. Beachten Sie, dass die Breite des Elements 350 Pixel beträgt. Ein Teil davon befindet sich noch im Ansichtsfenster. Es ist jedoch nicht sichtbar, da sich das Element unter dem Element befindet .festes Menü Element.
• Blenden Sie die Menüliste aus.

Schauen Sie sich die entsprechenden CSS-Stile unten an:

.top-nav .menu-wrapper position: fixed; oben: 0; links: 0; unten: 0; Breite: 350px; Polsterung: 20px; transform: translateX (-200px); Übergang: transform .7s; Hintergrund: # B1FFE5;  .top-nav .menu-wrapper .menu Deckkraft: 0; Übergang: Deckkraft .4s;  .top-nav .fixed-Menü position: fixed; oben: 0; links: 0; unten: 0; Anzeige: Flex; Flex-Richtung: Spalte; Breite: 150px; Polsterung: 20px; Hintergrund: Aquamarin; 

3. Jetzt für etwas JavaScript

An dieser Stelle verwenden wir einfachen JavaScript-Code, um den Status des Off-Canvas-Menüs zu ändern. 

Beschreiben wir die notwendigen Maßnahmen:

• Wenn der .Menü öffnen Wenn Sie auf die Schaltfläche klicken, wird das Menü mit einem schönen Slide-In-Effekt angezeigt und die Überlagerung sollte gleichzeitig nach rechts gedrückt werden. Optional können wir in diesem Zustand noch viel mehr tun. In unserem Beispiel fügen wir dem einen Box-Schatten hinzu ::Vor Pseudoelement des Overlays und enthüllen die Menüliste mit einem Einblendeffekt.
• Wenn der .Menü schließen Wenn Sie auf die Schaltfläche klicken, wird das Menü mit einem schönen Slide-Out-Effekt ausgeblendet, und die Überlagerung sollte gleichzeitig nach links gedrückt werden.

Hier ist der JavaScript-Code, der dieses Verhalten implementiert:

const menuOpen = document.querySelector (". top-nav .menu-open"); const menuClose = document.querySelector (". top-nav .menu-close"); const menuWrapper = document.querySelector (". top-nav .menu-wrapper"); const topBannerOverlay = document.querySelector (". top-banner-overlay"); function toggleMenu () menuOpen.addEventListener ("click", () => menuWrapper.classList.add ("ist geöffnet"); topBannerOverlay.classList.add ("wird verschoben");); menuClose.addEventListener ("click", () => menuWrapper.classList.remove ("wird geöffnet"); topBannerOverlay.classList.remove ("is-moved"););  toggleMenu ();

Nachfolgend finden Sie die zugehörigen CSS-Stile:

.top-banner-overlay.is-moved transform: translateX (350px);  .top-banner-overlay.is-moving :: before content: "; position: absolut; oben: 0; unten: 0; rechts: 100%; Breite: 20px; Box-Schatten: 0 0 10px schwarz; .top-nav .menu-wrapper.is-geöffnet transform: translateX (150px); .top-nav .menu-wrapper.is-geöffnet .menu opacity: 1; Übergangsverzögerung: .6s;

4. Browserunterstützung

Diese Demo funktioniert nur mit Desktop-Browsern. Für mobile Geräte ist ein anderes Seitenlayout erforderlich. Dies würde jedoch den Rahmen dieses Tutorials sprengen. Wie üblich verwenden wir Babel, um den ES6-Code auf ES5 herunterzukompilieren.

Das einzige kleine Problem, auf das ich beim Testen gestoßen bin, ist die Änderung der Textdarstellung, die auftritt, wenn die Überlagerung animiert wird. Obwohl ich verschiedene Ansätze aus verschiedenen Stack Overflow-Threads ausprobiert habe, konnte ich keine einfache Lösung für alle Betriebssysteme und Browser finden. Denken Sie daran, dass beim Rendern der Überlagerung möglicherweise Probleme mit der Wiedergabe von Schriftarten auftreten.

Fazit

Das ist es, Leute! Es ist uns gelungen, ein nützliches Menü außerhalb der Leinwand mit relativ einfachem Code zu erstellen. 

Ich hoffe, Ihnen hat das Endergebnis gefallen und Sie werden es als Inspiration für die Erstellung noch leistungsfähigerer Menüs außerhalb der Leinwand verwenden. Und wenn Sie welche bauen, vergessen Sie nicht, sie mit uns zu teilen!

Erfahren Sie mehr Off-Canvas-Techniken