Vor ein paar Tagen habe ich mir ein Video eines fremden Chefs angesehen, das HTML + CSS verwendet, um Hamburgermenu zu implementieren. Ich habe Sass in letzter Zeit gesehen, also habe ich Sass verwendet, um es implementieren zu können.
Das endgültige Rendering ist wie folgt:
Dateistruktur im VS -Code (mit dem einfachen Sass wird zum Kompilieren von SCSS -Dateien verwendet):
Seitenstruktur (index.html):
_config.scss:
/*Setzen Sie die Farbe und die maximale Breite*/$ Primärfarbe: RGBA (13.110.139, .75); @if (hell ($ color)> 70) {@return #333; } @else {@return #fff; }}/*Mixer, stellen Sie die Hintergrundfarbe und die Textfarbe ein*/@mixin set-background ($ color) {Hintergrundfarbe: $ color; Farbe: Set-Text-Color ($ color);}style.scss:
@import '_config';*{Margin: 0; Polsterung: 0;}. Container {max-Width: $ max-Width; Rand: 0 Auto;}/*Legen Sie die Hintergrundfarbe für das Showcase fest, verwenden Sie die Pseudo-Klasse, um ein Hintergrundbild hinzuzufügen, und setzen Sie den Z-Index des Hintergrundbildes auf -1 (dieses Bild wird innen angezeigt); und dann, um den Text in der Mitte anzuzeigen, verwenden Sie Flex Layout*/. Showcase {Position: Relativ; Höhe: 100VH; Hintergrundfarbe: $ Primary-Color; &: vor {Inhalt: ''; Position: absolut; links: 0; Top: 0; Breite: 100%; Höhe: 100%; Hintergrund: URL ('../ img/pexels-photo-533923.jpeg') No-Repeat Center/Cover; Z -Index: -1; } & -rinner {display: flex; Höhe: 100%; Flex-Richtung: Säule; Justify-Content: Center; Ausrichtung: Zentrum; Text-Align: Mitte; Farbe: #fff; Schriftgewicht: 100; H1 {Schriftgröße: 4REM; Polsterung: 1,2Rem 0; } p {weißer Raum: vor der Wrap; Schriftgröße: 1,6rem; Polsterung: 0,85REM 0; } .btn {padding: .65rem 1rem; /*Verwenden Sie den Mixer, um die Hintergrundfarbe und die Textfarbe zu setzen Grenze: Keine; Grenze: 1PX Solid $ Primary Color; Border-Radius: 5px; Textdekoration: Keine; Umriss: Keine; Übergang: Alle .2s erleichtern .1s; /* Wenn der Schaltflächenschwebe verwendet wird, um einen Skalierungseffekt mithilfe der CSS3-Skala zu setzen Grenzfarbe: Aufhöhlen ($ Overlay-Color, 25%); Transformation: Skala (.98); }}}}}/*Prinzip: Ändern Sie den Stil, indem Sie das Kontrollkästchen in oder nicht durchführen (das Kontrollkästchen-Transparenz auf 0 festlegen und der Z-Index höher eingestellt ist). Beim Klicken wird ein Menü angezeigt. Klicken Sie erneut, und das Menü verschwindet *// *Setzen Sie für Menüschreibungen behoben, damit der Showcase den gesamten Bildschirm füllt. Setzen Sie gleichzeitig die Deckkraft des Kontrollkasten auf 0; Beachten Sie auch, dass Sie das Z-Index des Kontrollkästchens auf 2 festlegen müssen, da der Z-Index von Hamburger auf 1 gesetzt ist, andernfalls funktioniert der Klick nicht*/. Menüumrap {Position: behoben; links: 0; Top: 0; Z-Index: 1; .Toggle {Position: absolut; links: 0; Top: 0; Breite: 50px; Höhe: 50px; Deckkraft: 0; Z-Index: 2; Cursor: Zeiger; /*Wenn das Kontrollkästchen überprüft wird, stellen Sie den Rotationseffekt der Div- und Pseudoklasse in Hamburger ein*/ &:::: Hamburger> div {transformation: rotate (135de); /*Die Pseudoklasse dreht sich tatsächlich um 225 Grad, und Sie müssen die Oberseite auf 0 einstellen, ansonsten ist die Länge der gebildeten ❌ inkonsistent*/ &:: Vorher, &: nach {Transformation: Drehen (90 Grad); Top: 0; }} / * Wenn das Kontrollkästchen ausgewählt ist, wird auch ein Rotationseffekt festgelegt * / &:: Hover ~ .Hamburger> div {transform: rotate (235DEG); } &: ~ .menu {Sichtbarkeit: sichtbar; > div {transform: scale (1); > Div {Opazität: 1; }}}}}} .Hamburger {Position: absolut; links: 0; Top: 0; Breite: 60px; Höhe: 60px; Polsterung: 1Rem; Hintergrundfarbe: $ Primary-Color; Kastengrößen: Border-Box; Anzeige: Flex; Flex-Richtung: Säule; Justify-Content: Center; Ausrichtung: Zentrum; Text-Align: Mitte; Z-Index: 1; /*Div erzeugt die mittlere horizontale Linie, setzt dann die Position als relativ und setzt dann ihre Pseudoklasse auf absolut und setzt sie in Bezug auf die Div*/> div {Position: Relativ aus; links: 0; Top: 0; Breite: 100%; Höhe: 2px; Hintergrundfarbe: #fff; Übergang: Alle .7s Leichtigkeit; /*Verwenden Sie die Pseudo-Klasse, um die ersten und dritten horizontalen Linien zu generieren*/ &:::: nach {Inhalt: ''; Position: absolut; links: 0; Top: -10px; Breite: 100%; Höhe: 2px; Hintergrundfarbe: Erbe; } &: nach {top: 10px; }}} /*Setzen Sie den Stil des ausgewählten Menüs* / /*Menü mit Breite und Höhe von 100%fest, und setzen Sie dann die Anzeige auf Flex fest. Andernfalls wird das Menü nicht in der Mitte angezeigt. links: 0; Top: 0; Breite: 100%; Höhe: 100%; Überlauf: versteckt; Anzeige: Flex; Justify-Content: Center; Ausrichtung: Zentrum; Sichtbarkeit: versteckt; /*Stellen Sie das Menü auf Invisible ein und setzen Sie es dann auf sichtbar, wenn das Kontrollkästchen ausgewählt ist > div {@include set-background ($ overlay-color); Breite: 200VW; Höhe: 200VH; Überlauf: versteckt; Grenzradius: 50%; Anzeige: Flex; Justify-Content: Center; Ausrichtung: Zentrum; Text-Align: Mitte; Transformation: Skala (0); Übergang: Alle .4s Leichter; > div {max-Width: 90VW; MAX-Höhe: 90 VH; Deckkraft: 0; Übergang: Alle .4s Leichter; > ul> li {Listenstil: Keine; Schriftgröße: 2Rem; Polsterung: .85rem 0; Texttransformierung: Großbuchstaben; Transformation: SCEW (-5 Grad, -5 Grad) drehen (5deg);/*Text Tilt*/ a {color: erben; Textdekoration: Keine; Übergang: Farbe .4s Leichtigkeit; }}}}}}}}Dies ist der Artikel über HTML+SASS implementiert Hambergurmenu (Menü im Hamburger-Stil). Weitere verwandte HTML+SASS -Implementierungen von Hambergurmenu finden Sie in früheren Artikeln von Wulin.com oder stöbern Sie weiter nach unten zu verwandten Artikeln. Ich hoffe, jeder wird Wulin.com in Zukunft unterstützen!