Hace unos días, vi un video de un jefe extranjero usando HTML + CSS para implementar hamburgo. Estaba viendo Sass recientemente, así que usé Sass para implementarlo.
La representación final es la siguiente:
Estructura de archivo en el código VS (el SASS fácil se usa para compilar archivos SCSS):
Estructura de página (index.html):
_config.scss:
/*Establezca el color y el ancho máximo*/$ primario-color: RGBA (13,110,139, .75); $ Overlay-Color: RGBA (24,39,51, .85); $ max-width: 980px;/*Establezca el color de texto, si el color de fondo es luz, establecido en negro, de lo contrario, se establece en blanco*/@function-tolor ($ color) {{{{{{{{ @if (Ligera ($ color)> 70) {@return #333; } @else {@return #fff; }}/*Mezclador, establezca el color de fondo y el color de texto*/@mixin set-background ($ color) {fondo de fondo: $ color; Color: set-text-color ($ color);}style.scss:
@import '_config';*{margen: 0; Pading: 0;}. Container {max-width: $ max-width; Margen: 0 Auto;}/*Establezca el color de fondo para Showcase, use la pseudo-clase para agregar una imagen de fondo y establezca el índice Z de la imagen de fondo en -1 (esta imagen se mostrará dentro); y luego para que el texto se muestre en el medio, use el diseño flexible*/. showcase {posición: relativo; Altura: 100 VH; Color de fondo: $ primario color; &: antes {content: ''; Posición: Absoluto; Izquierda: 0; arriba: 0; Ancho: 100%; Altura: 100%; Antecedentes: URL ('../ img/Pexels-Photo-533923.jpeg') Centro central sin repetición/cubierta; Índice Z: -1; } & -inner {display: flex; Altura: 100%; Dirección flexible: columna; Justify-Content: Center; Alineación de ítems: Centro; Text-Align: Center; Color: #fff; Font-peso: 100; H1 {Font-Size: 4Rem; relleno: 1.2rem 0; } P {White-Space: Pre-Wrap; tamaño de fuente: 1.6rem; relleno: 0.85rem 0; } .btn {Padding: .65Rem 1Rem; /*Use el mezclador para establecer el color de fondo y el color de texto*/ @include set-background (aclarar ($ primario, 30%)); borde: ninguno; borde: 1px sólido $ color primario; Border-Radius: 5px; Decoración de texto: ninguna; Esquema: ninguno; Transición: todos los .2s facilitados .1s; /* Cuando el botón se utiliza para establecer un efecto de escala utilizando la escala de CSS3*/ &: Hover {@include Set-Background (Light ($ superpuesto, 30%)); Color de la frontera: Lighten ($ superpuesto, 25%); transformación: escala (.98); }}}}}/*Principio: cambie el estilo si debe hacer la casilla de verificación o no (configure la transparencia de la casilla de verificación en 0, y el índice Z se establece más alto). Al hacer clic, aparecerá un menú. Haga clic nuevamente y el menú desaparecerá *// *Establecer arreglado para menú-envoltura, de modo que la exhibición llene toda la pantalla; Al mismo tiempo, establezca la opacidad de la casilla de verificación en 0; También tenga en cuenta que debe establecer el índice Z de la casilla de verificación en 2, porque el índice Z de Hamburger está configurado en 1, de lo contrario el clic no funcionará*/. Izquierda: 0; arriba: 0; índice z: 1; .toggle {posición: absoluto; Izquierda: 0; arriba: 0; Ancho: 50px; Altura: 50px; Opacidad: 0; índice z: 2; cursor: puntero; /*Cuando se verifica la casilla de verificación, establezca el efecto de rotación del DIV y la pseudo-clase en la hamburguesa*/ &: checked ~ .hamburger> div {transform: rotate (135deg); /*La pseudo-clase en realidad gira 225 grados, y debe establecer la parte superior en 0, de lo contrario la longitud del ❌ formado es inconsistente*/ &: antes, &: después de {transformar: rotar (90deg); arriba: 0; }} / * Cuando se selecciona la casilla de verificación, también se establecerá un efecto de rotación * / &: marcado: hover ~ .hamburger> div {transform: rotar (235deg); } &: checked ~ .menu {visibilidad: visible; > div {transform: escala (1); > div {opacidad: 1; }}}}}} .hamburger {posición: absoluto; Izquierda: 0; arriba: 0; Ancho: 60px; Altura: 60px; relleno: 1rem; Color de fondo: $ primario color; dimensionamiento de la caja: border-box; Pantalla: Flex; Dirección flexible: columna; Justify-Content: Center; Alineación de ítems: Centro; Text-Align: Center; índice z: 1; /*Div genera la línea horizontal media, luego establece la posición como relativa, y luego establece su pseudo-clase en absoluto, y la compensa con respecto al div*/> div {posición: relativo; Izquierda: 0; arriba: 0; Ancho: 100%; Altura: 2px; Color de fondo: #fff; Transición: todas las facilidad de .7s; /*Use pseudo-clase para generar las líneas horizontales de primera y tercera*/ &: antes, &: después {content: ''; Posición: Absoluto; Izquierda: 0; arriba: -10px; Ancho: 100%; Altura: 2px; Color de fondo: heredar; } &: después {top: 10px; }}} /*Establezca el estilo del menú seleccionado* / /*Establecer el menú fijo, con ancho y altura del 100%, y luego establecer la pantalla para flexionar, de lo contrario el menú no aparecerá en el medio* / .menu {posición: fijo; Izquierda: 0; arriba: 0; Ancho: 100%; Altura: 100%; desbordamiento: oculto; Pantalla: Flex; Justify-Content: Center; Alineación de ítems: Centro; Visibilidad: oculto; /*Establezca el menú en invisible, y luego configúrelo en visible cuando se selecciona la casilla de verificación*/ Transición: todas las facilidad de .75s; > div {@include set-background ($ superpuesto-color); Ancho: 200VW; Altura: 200 VH; desbordamiento: oculto; Radio fronterizo: 50%; Pantalla: Flex; Justify-Content: Center; Alineación de ítems: Centro; Text-Align: Center; transformar: escala (0); Transición: todos los .4 facilitados; > div {max-width: 90vw; MAX-HEGHT: 90VH; Opacidad: 0; Transición: todos los .4 facilitados; > ul> li {list-style: none; tamaño de fuente: 2rem; relleno: .85rem 0; Texto-transformación: upcase; transformación: skew (-5deg, -5deg) Rotate (5deg);/*Establezca la inclinación de texto*/ a {color: heredar; Decoración de texto: ninguna; Transición: color .4S facilidad; }}}}}}}}Este es el artículo sobre HTML+SASS implementando Hambergurmenu (menú de estilo de hamburguesa). Para obtener más HTML+SASS relacionados implementando Hambergurmenu, busque artículos anteriores de Wulin.com o continúe navegando por los artículos relacionados a continuación. ¡Espero que todos apoyen a Wulin.com en el futuro!