Wie erstelle ich ein CSS-animiertes Off-Canvas-Menü?
Aug 01, 2025 am 07:39 AM
Verwenden Sie eine versteckte Checkbox -Eingabe und deren Beschriftung, um den Menüstatus ohne JavaScript umzuschalten. 2. Positionieren Sie das Menü au?erhalb des Bildschirms mit CSS mit links: -250px und setzen Sie feste Abmessungen. 3. Anwenden: überprüft die Pseudoklasse, um das Menü in die Anzeige zu verschieben, indem Sie links einstellen: 0 Wenn das Kontrollk?stchen umgeschaltet ist. V. 5. Verwenden Sie Medienabfragen, um das Menü reaktionsschnell zu machen und auf ein horizontales Layout auf gr??eren Bildschirmen zu wechseln. Das Ergebnis ist ein leichtes, zug?ngliches und animiertes Off-Canvas-Menü mit nur HTML und CSS.
Das Erstellen eines CSS-animierten Off-Canvas-Menüs ist v?llig machbar-und es ist eine gro?artige M?glichkeit, Ihre Website leicht zu halten, ohne sich auf JavaScript zu verlassen. Der Trick besteht darin, eine versteckte Kontrollk?stchen-Eingabe zu verwenden und die :checked Pseudo-Klasse, um den Menüstatus zu umschalten, kombiniert mit reibungslosen CSS-überg?ngen für Animation.
Hier erfahren Sie, wie Sie einen Schritt für Schritt einen Schritt erstellen:
? 1. HTML -Struktur: Verwenden Sie ein verstecktes Kontrollk?stchen als Umschalten
Wir werden ein <input type="checkbox"> verwenden, um den ge?ffneten/geschlossenen Status des Menüs zu steuern. Es bleibt visuell versteckt, treibt aber die Interaktion an.
<nav class = "off-canvas-menu">
<Eingabe type = "checkBox" id = "Menü-Toggle" class = "Menü-Toggle">
<Label für = "Menü-Toggle" class = "Menü-Button"> ? Menü </label>
<ul class = "Menü-Inhalt">
<li> <a href = "#"> home </a> </li>
<li> <a href = "#"> über </a> </li>
<li> <a href = "#"> dienste </a> </li>
<li> <a href = "#"> Kontakt </a> </li>
</ul>
</nav> Der <label> fungiert als sichtbare Schaltfl?che, die das Kontrollk?stchen beim Klicken umschaltet.
? 2. stylen Sie das Menü und positionieren Sie es au?erhalb der Kors
Wir werden das Menü zun?chst aus dem Bildschirm positionieren und beim Umschalten hineinrutschen.
.off-canvas-menu {
Position: Relativ;
Z-Index: 1000;
}
.Menu-Toggle {
Anzeige: Keine; / * Verstecken das Kontrollk?stchen */
}
.Menu-Button {
Anzeige: Block;
Polsterung: 1Rem;
Hintergrund: #333;
Farbe: wei?;
Text-Align: Mitte;
Cursor: Zeiger;
Schriftfamilie: Sans-Serif;
}
.Menu-in-in-Intent {
Position: fest;
Top: 0;
links: -250px; / * Au?erhalb des Bildschirms starten */
Breite: 250px;
H?he: 100%;
Hintergrund: #222;
Farbe: wei?;
übergang: Links 0,3s Leichtigkeit;
Padding-Top: 50px;
Box-Shadow: 2PX 0 5PX RGBA (0,0,0,0,3);
} ? 3 :checked
Wenn das Kontrollk?stchen aktiviert ist (Menü ?ffnen), verschieben Sie die .menu-content in die Anzeige.
.Menu-Toggle: überprüft ~ .Menu-in-incontent {
links: 0; / * In Sichtweise überrutschen */
} Dieser Selektor bedeutet: "Wenn das Kontrollk?stchen aktiviert ist, w?hlen Sie die nach ihm gelangen .menu-content und wenden Sie sich left: 0 "
? 4. Fügen Sie reibungslose Animation und Overlay hinzu (optional)
Lassen Sie es sich mit einer subtilen überlagerung besser anfühlen, die die Seite im ?ffnen des Menüs dimmiert.
.Menu-Toggle: überprüft ~ .Menu-Overlay {
Deckkraft: 1;
Sichtbarkeit: sichtbar;
}
.Menu-Overlay {
Position: fest;
Top: 0;
links: 0;
Breite: 100%;
H?he: 100%;
Hintergrund: RGBA (0,0,0,0,5);
Deckkraft: 0;
Sichtbarkeit: versteckt;
übergang: Deckkraft von 0,3s Leichtigkeit;
Z-Index: 999;
}Fügen Sie das Overlay kurz vor dem Menüinhalt in HTML hinzu:
<Label für = "Menü-Toggle" class = "Menü-Overlay"> </label>
Wenn Sie nun auf das Overlay klicken, schlie?en Sie auch das Menü-dank des Verhaltens der Etikett for="menu-toggle" .
? 5. Machen Sie es reaktionsschnell (optional)
Auf gr??eren Bildschirmen m?chten Sie m?glicherweise, dass das Menü ge?ffnet bleibt oder auf Inline wechselt. Anpassen mit Medienanfragen:
@media (min-Width: 768px) {
.Menu-in-in-Intent {
Position: statisch;
Breite: Auto;
H?he: Auto;
Hintergrund: Keine;
übergang: Keine;
Anzeige: Flex;
Lücke: 1Rem;
}
.Menu-Overlay, .Menu-Button {
Anzeige: Keine;
}
.Menu-Toggle: überprüft ~ .Menu-in-incontent {
Links: Auto; / * Ignorieren Sie das Verhalten au?erhalb der Kanal. *//
}
}? Schlussnotizen
- Barrierefreiheit : Fügen Sie bei Bedarf
aria-hiddenundaria-expandedüber JavaScript hinzu (aber reine CSS wird das nicht bew?ltigen). - Kein JS : Dies funktioniert ohne JavaScript, kann aber in CSS
heightvon0bisautoreibungslos animieren - so sind feste H?he odertransform/leftsicherer. - Berührungsfreundlich : Funktioniert hervorragend auf dem Handy. Stellen Sie einfach sicher, dass die Tap -Ziele gro? genug sind.
Das war's! Sie haben ein reibungsloses, animiertes Off-Canvas-Menü mit nur HTML und CSS. Der Schlüssel nutzt den Kontrollk?stchen Hack- und Geschwister -Selektoren, um Interaktivit?t zu erzeugen. Es ist einfach, schnell und effektiv für leichte Websites.
Grunds?tzlich nur: Ausblenden Sie ein Kontrollk?stchen aus, stylen Sie ein Etikett, verschieben Sie das Menü mit left oder transform und animieren Sie sie mit transition .
Das obige ist der detaillierte Inhalt vonWie erstelle ich ein CSS-animiertes Off-Canvas-Menü?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Hei?e Themen
1597
29
1487
72
CSS-Animationshandbuch: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Blitzeffekte erstellen
Oct 20, 2023 pm 03:55 PM
CSS-Animationsleitfaden: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Blitzeffekte erstellen. Einführung: CSS-Animationen sind ein unverzichtbarer Bestandteil des modernen Webdesigns. Es kann lebendige Effekte und Interaktivit?t auf Webseiten bringen und das Benutzererlebnis verbessern. In dieser Anleitung werfen wir einen genaueren Blick darauf, wie man mit CSS einen Blitzeffekt erzeugt, zusammen mit konkreten Codebeispielen. 1. Erstellen Sie eine HTML-Struktur: Zuerst müssen wir eine HTML-Struktur erstellen, um unsere Blitzeffekte zu berücksichtigen. Wir k?nnen ein <div>-Element verwenden, um den Blitzeffekt zu umschlie?en und bereitzustellen
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Umbl?ttereffekte erzielen
Oct 24, 2023 am 09:30 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Umbl?ttereffekte implementieren. Spezielle Codebeispiele sind erforderlich. CSS-Animationen sind ein unverzichtbarer Bestandteil des modernen Website-Designs. Es kann Webseiten lebendiger machen, die Aufmerksamkeit der Benutzer erregen und die Benutzererfahrung verbessern. Einer der h?ufigsten CSS-Animationseffekte ist der Umbl?ttereffekt. In diesem Tutorial werde ich Sie Schritt für Schritt anleiten, um diesen auff?lligen Effekt zu erzielen, und konkrete Codebeispiele bereitstellen. Zuerst müssen wir eine grundlegende HTML-Struktur erstellen. Der Code lautet wie folgt: <!DOCTYPE
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den besonderen Effekt von flie?endem Wasser erzielen
Oct 21, 2023 am 08:52 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie man den besonderen Effekt von flie?endem Wasser umsetzt. Vorwort: CSS-Animation ist eine h?ufig verwendete Technologie im Webdesign. Sie macht Webseiten lebendiger und interessanter ' Aufmerksamkeit. In diesem Tutorial lernen wir, wie man mit CSS einen flie?enden Wassereffekt erzielt, und stellen spezifische Codebeispiele bereit. Fangen wir an! Schritt eins: HTML-Struktur Zuerst müssen wir eine grundlegende HTML-Struktur erstellen. Fügen Sie ein <di zum <body>-Tag hinzu
Tipps und Methoden zur Verwendung von CSS, um Jitter-Effekte zu erzielen, wenn die Maus schwebt
Oct 21, 2023 am 08:37 AM
Tipps und Methoden zur Verwendung von CSS zum Erzielen von Jitter-Effekten beim Schweben der Maus. Die Jitter-Effekte beim Schweben der Maus k?nnen der Webseite etwas Dynamik und Interesse verleihen und die Aufmerksamkeit des Benutzers erregen. In diesem Artikel stellen wir einige Techniken und Methoden zur Verwendung von CSS vor, um Jitter-Effekte beim Bewegen der Maus zu erzielen, und stellen spezifische Codebeispiele bereit. Das Prinzip des Jitters In CSS k?nnen wir Keyframe-Animationen (Keyframes) und Transformationseigenschaften verwenden, um den Jitter-Effekt zu erzielen. Mit der Keyframe-Animation k?nnen wir eine Animationssequenz definieren
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Pulseffekte implementieren
Oct 21, 2023 pm 12:09 PM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Impulseffekte implementieren. Es sind spezifische Codebeispiele erforderlich. Einführung: CSS-Animationen sind ein h?ufig verwendeter Effekt im Webdesign. Sie k?nnen Webseiten Lebendigkeit und visuelle Attraktivit?t verleihen. In diesem Artikel erhalten Sie ein detailliertes Verst?ndnis dafür, wie Sie mit CSS Impulseffekte erzielen, und stellen spezifische Codebeispiele bereit, die Ihnen Schritt für Schritt zeigen, wie Sie dies durchführen. 1. Verstehen Sie den Pulseffekt. Der Pulseffekt ist ein zyklischer Animationseffekt. Er wird normalerweise auf Schaltfl?chen, Symbolen oder anderen Elementen verwendet, um ihm einen schlagenden und blinkenden Effekt zu verleihen. Animieren von Eigenschaften und Schlüsseln über CSS
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Ein- und Ausblendeffekt erzielen
Oct 18, 2023 am 09:22 AM
CSS-Animations-Tutorial: Bringen Sie Ihnen Schritt für Schritt bei, wie Sie den Ein- und Ausblendeffekt implementieren, einschlie?lich spezifischer Codebeispiele. Bei Webdesign und -entwicklung k?nnen Animationseffekte die Seite lebendiger und attraktiver machen. CSS-Animationen sind eine einfache und leistungsstarke M?glichkeit, diesen Effekt zu erzielen. In diesem Artikel erfahren Sie Schritt für Schritt, wie Sie mit CSS den Fade-Effekt erzielen, und stellen spezifische Codebeispiele als Referenz bereit. 1. Einblendeffekt Der Einblendeffekt bezieht sich auf den Effekt, bei dem ein Element allm?hlich von einer Transparenz von 0 zu einer Transparenz von 1 wechselt. Hier sind die Schritte und das Codebeispiel, um den Einblendeffekt zu erzielen: Schritt 1:
Erkundung der CSS-Animationseigenschaften: übergang und Transformation
Oct 20, 2023 pm 03:54 PM
Erkundung der CSS-Animationseigenschaften: übergang und Transformation. Um die Interaktivit?t und die visuellen Effekte von Webseiten zu erh?hen, verwenden wir in der Webentwicklung h?ufig CSS-Animationen, um den übergang und die Transformation von Elementen zu realisieren. In CSS gibt es zwei h?ufig verwendete Eigenschaften, mit denen Animationseffekte erzielt werden k?nnen: übergang und Transformation. In diesem Artikel wird die Verwendung dieser beiden Eigenschaften ausführlich untersucht und spezifische Codebeispiele gegeben. 1. übergangsattribut transitio
Tipps und Methoden zur Verwendung von CSS zur Erzielung spezieller Effekte für die Bildanzeige
Oct 24, 2023 pm 12:52 PM
Tipps und Methoden zur Verwendung von CSS zur Erzielung spezieller Effekte für die Bildanzeige Ob es sich um Webdesign oder Anwendungsentwicklung handelt, die Bildanzeige ist eine sehr h?ufige Anforderung. Um das Benutzererlebnis zu verbessern, k?nnen wir mithilfe von CSS einige coole Bildanzeigeeffekte erzielen. In diesem Artikel werden mehrere h?ufig verwendete Techniken und Methoden vorgestellt und entsprechende Codebeispiele bereitgestellt, um den Lesern den schnellen Einstieg zu erleichtern. 1. Bildzoom-Spezialeffekte Zoom-Maus-Hover-Effekt Wenn die Maus über dem Bild schwebt, kann die Interaktivit?t durch den Zoom-Effekt erh?ht werden. Das Codebeispiel lautet wie folgt: .image-zoom{
