Il y a quelques jours, j'ai regardé une vidéo d'un patron étranger utilisant HTML + CSS pour implémenter Hamburrmermenu. Je regardais Sass récemment, alors j'ai utilisé SASS pour la mettre en œuvre.
Le rendu final est le suivant:
Structure de fichiers dans le code vs (le SASS facile est utilisé pour compiler les fichiers SCSS):
Structure de la page (index.html):
_config.scss:
/ * Définissez la couleur et la largeur max * / $ primaire-couleur: RGBA (13,110,139, .75); $ overlay-Color: RGBA (24,39,51, .85); $ max-width: 980px; / * définir la couleur du texte, si la couleur de fond est légère, définie en noir, autrement réglé sur blanc * / @ @ function set-text-coulor ($ colore) { @if (Lightss ($ couleur)> 70) {@return # 333; } @else {@return #fff; }} / * Mélangeur, définissez la couleur d'arrière-plan et la couleur du texte * / @ mixin set-background ($ couleur) {background-Color: $ couleur; Couleur: set-text-coulor ($ couleur);}Style.SCSS:
@Import '_config'; * {margin: 0; rembourrage: 0;}. Container {max-width: $ max-width; marge: 0 auto;} / * Définissez la couleur d'arrière-plan de la vitrine, utilisez la pseudo-classe pour ajouter une image d'arrière-plan et définissez l'index z de l'image d'arrière-plan à -1 (cette image sera affichée à l'intérieur); Et puis afin de laisser le texte afficher au milieu, utilisez Flex Layout * /. Showcase {position: relative; Hauteur: 100VH; Color en arrière-plan: $ Color primaire; &: avant {contenu: ''; Position: absolue; à gauche: 0; en haut: 0; Largeur: 100%; hauteur: 100%; CONTEXTE: URL ('../ IMG / PEXELS-PHOTO-533923.JPEG') Centre / couvercle du centre sans répétition; Z-Index: -1; } & -inner {affichage: flex; hauteur: 100%; Flex-Direction: colonne; Justification-contenu: centre; Align-Items: Centre; Texte-aligne: Centre; Couleur: #FFF; Police-poids: 100; H1 {Font-Size: 4rem; rembourrage: 1.2rem 0; } p {blanc-espace: pré-wrap; taille de police: 1.6rem; rembourrage: 0,85rem 0; } .btn {padding: .65rem 1rem; / * Utilisez le mélangeur pour définir la couleur de l'arrière-plan et la couleur du texte * / @include set-background (Lighten ($ primaire-couleur, 30%)); Border: aucun; bordure: 1px solide $ couleur primaire; Border-Radius: 5px; Décoration du texte: aucune; Aperçu: aucun; Transition: toutes les .2s facilité .1s; / * Lorsque le bouton survol est utilisé pour définir un effet de mise à l'échelle à l'aide de l'échelle de CSS3 * / &: Hover {@include set-background (Lighten ($ overlay-color, 30%)); Color à la frontière: Lighten ($ de superposition, 25%); Transformer: échelle (.98); }}}}} / * Principe: Modifiez le style en faisant ou non la case à cocher (définissez la transparence de la case à cocher sur 0, et l'index Z est réglé plus haut). En cliquant, un menu apparaîtra. Cliquez à nouveau et le menu disparaîtra * // * Set Fixed pour le menu-wrap, afin que la vitrine remplisse tout l'écran; En même temps, définissez l'opacité de CheckBox sur 0; Notez également que vous devez définir l'index z de la case à cocher sur 2, car l'index z du hamburger est défini sur 1, sinon le clic ne fonctionnera pas * /. Menu-wrap {position: fixe; à gauche: 0; en haut: 0; Z-Index: 1; .Toggle {position: Absolute; à gauche: 0; en haut: 0; Largeur: 50px; hauteur: 50px; Opacité: 0; Z-Index: 2; curseur: pointeur; / * Lorsque la case à cocher est cochée, définissez l'effet de rotation du div et de la pseudo-classe dans Hamburger * / &: vérifié ~ .hamburger> div {transform: rotate (135deg); / * La pseudo-classe tourne en fait 225 degrés, et vous devez régler le dessus sur 0, sinon la longueur du ❌ formé est incohérente * / &: avant, &: après {transform: rotate (90Deg); en haut: 0; }} / * Lorsque la boîte à cocher est sélectionnée, un effet de rotation sera également défini * / &: coché: hover ~ .hamburger> div {transform: rotate (235Deg); } &: vérifié ~ .Menu {visibilité: visible; > div {transform: échelle (1); > div {opacité: 1; }}}}}} .hamburger {position: absolue; à gauche: 0; en haut: 0; Largeur: 60px; hauteur: 60px; rembourrage: 1rem; Color en arrière-plan: $ Color primaire; Dimensionnement en boîte: Border-Box; Affichage: flex; Flex-Direction: colonne; Justification-contenu: centre; Align-Items: Centre; Texte-aligne: Centre; Z-Index: 1; / * Div génère la ligne horizontale moyenne, puis définit la position comme relative, puis définit sa pseudo-classe à Absolute, et la compense par rapport à la div * /> div {position: relative; à gauche: 0; en haut: 0; Largeur: 100%; hauteur: 2px; Color d'arrière-plan: #FFF; Transition: toutes les facilité de .7; / * Utilisez la pseudo-classe pour générer les première et troisième lignes horizontales * / &: avant, &: après {contenu: ''; Position: absolue; à gauche: 0; en haut: -10px; Largeur: 100%; hauteur: 2px; Color en arrière-plan: héritage; } &: après {top: 10px; }}} / * Définissez le style du menu sélectionné * / / * Définissez le menu Correction, avec une largeur et une hauteur de 100%, puis définir l'affichage sur Flex, sinon le menu n'apparaîtra pas dans le milieu * / .Menu {position: fixe; à gauche: 0; en haut: 0; Largeur: 100%; hauteur: 100%; débordement: caché; Affichage: flex; Justification-contenu: centre; Align-Items: Centre; Visibilité: cachée; / * Définissez le menu sur Invisible, puis définissez-le sur Visible lorsque la case à cocher est sélectionnée * / Transition: All .75S Ease; > div {@include set-background ($ overlay-color); Largeur: 200 VW; Hauteur: 200VH; débordement: caché; Border-Radius: 50%; Affichage: flex; Justification-contenu: centre; Align-Items: Centre; Texte-aligne: Centre; transformée: échelle (0); Transition: toutes les facilité de .4; > div {max-largeth: 90vw; max-height: 90vh; Opacité: 0; Transition: toutes les facilité de .4; > ul> li {list-style: aucun; taille de police: 2rem; rembourrage: .85rem 0; Text-transform: majuscules; Transform: skew (-5deg, -5deg) rotation (5deg); / * set le texte inclinable * / a {couleur: hériter; Décoration du texte: aucune; Transition: Couleur .4S Ease; }}}}}}}}Ceci est l'article sur HTML + SASS implémentant HambergurMenu (menu de style hamburger). Pour plus liés HTML + SASS implémentant HambergurMenu, veuillez rechercher des articles précédents sur Wulin.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que tout le monde soutiendra Wulin.com à l'avenir!