Alguns dias atrás, eu assisti a um vídeo de um chefe estrangeiro usando HTML + CSS para implementar o hambúrguer. Eu estava assistindo Sass recentemente, então usei Sass para implementá -lo.
A renderização final é a seguinte:
Estrutura do arquivo no código VS (o sass fácil é usado para compilar arquivos SCSS):
Estrutura da página (index.html):
_config.scss:
/*Defina a cor e a largura máxima*/$ Primary-Color: RGBA (13.110.139, 0,75); $ Sobrevery-cor: RGBA (24,39,51, 0,85); $ max-width: 980px;/*Defina a cor do texto, se a cor de fundo é definida para preto, caso contrário, definido para White: 980px; @if (leveza ($ color)> 70) {@return #333; } @else {@return #fff; }}/*Mixer, defina a cor do fundo e o texto*/@mixin Set-background ($ color) {cor de fundo: $ color; Cor: Color de defesa-text ($ color);}style.scss:
@import '_config';*{margem: 0; preenchimento: 0;}. contêiner {max-width: $ max-width; Margem: 0 Auto;}/*Defina a cor de fundo para exibição, use a pseudo-classe para adicionar uma imagem de fundo e defina o índice z da imagem de fundo como -1 (esta imagem será exibida dentro); e então, para permitir que o texto seja exibido no meio, use o layout flex*/. Showcase {Position: relativo; Altura: 100VH; Background-Color: $ Primary-Color; &: antes {content: ''; Posição: Absoluto; Esquerda: 0; topo: 0; largura: 100%; Altura: 100%; Antecedentes: url ('../ img/pexels-photo-533923.jpeg') no centro/tampa/tampa de repetição; Z -Index: -1; } & -inner {display: flex; Altura: 100%; Direcção flexível: coluna; Justify-Content: Center; alinhado-itens: centro; Alinhamento de texto: centro; Cor: #FFF; Peso da fonte: 100; H1 {Size da fonte: 4Rem; preenchimento: 1.2rem 0; } p {espaço branco: pré-wrap; tamanho de fonte: 1.6rem; preenchimento: 0,85Rem 0; } .btn {preenchimento: .65Rem 1Rem; /*Use o misturador para definir a cor do fundo e o texto*/ @include Set-background (iluminação ($ Primary-Color, 30%)); fronteira: nenhuma; Fronteira: 1px Solid $ Primary-Color; Radio de fronteira: 5px; Decoração de texto: Nenhum; Esboço: Nenhum; Transição: Todos .2s facilitam .1s; /* Quando o mouse de botão é usado para definir um efeito de escala usando a escala do CSS3*/ &: hover {@include set-background (iluminação ($ sobreverlay-color, 30%)); Border-cor: iluminação ($ sobreposição de cor, 25%); Transform: escala (0,98); }}}}}/*Princípio: altere o estilo se deve fazer a caixa de seleção ou não (defina a transparência da caixa de seleção para 0 e o INDEX z é definido mais alto). Ao clicar, um menu aparecerá. Clique novamente e o menu desaparecerá *// *definido fixo para wrap menu, para que a vitrine preencha a tela inteira; Ao mesmo tempo, defina a opacidade da caixa de seleção para 0; Observe também que você precisa definir o índice Z da caixa de seleção para 2, porque o índice z do hambúrguer está definido como 1, caso contrário, o clique não funcionará*/. Menu-wrap {position: corrigido; Esquerda: 0; topo: 0; Z-Index: 1; .toggle {posição: absoluto; Esquerda: 0; topo: 0; Largura: 50px; Altura: 50px; opacidade: 0; Z-Index: 2; Cursor: Ponteiro; /*Quando a caixa de seleção é verificada, defina o efeito de rotação da divisão e pseudo-classe em hambúrguer*/ &: verificado ~ .hamburger> div {transform: girate (135deg); /*A pseudo-classe realmente gira 225 graus e você precisa definir a parte superior para 0, caso contrário, o comprimento do formado ❌ é inconsistente*/ &: antes, &: After {transform: girate (90deg); topo: 0; }} / * Quando a caixa de seleção for selecionada, um efeito de rotação também será definido * / &: verificado: hover ~ .hamburger> div {transform: girate (235deg); } &: verificado ~ .menu {visibilidade: visível; > div {transform: escala (1); > div {Opacity: 1; }}}}}} .hamburger {Position: Absolute; Esquerda: 0; topo: 0; Largura: 60px; Altura: 60px; preenchimento: 1Rem; Background-Color: $ Primary-Color; Timing de caixa: caixa de fronteira; exibição: flex; Direcção flexível: coluna; Justify-Content: Center; alinhado-itens: centro; Alinhamento de texto: centro; Z-Index: 1; /*Div gera a linha horizontal média, então define a posição como relativa e, em seguida, define sua pseudo-classe como absoluta e a compensa em relação à div*/> div {Position: relativa; Esquerda: 0; topo: 0; largura: 100%; Altura: 2px; Background-Color: #FFF; Transição: todos .7s facilitam; /*Use pseudo-classe para gerar a primeira e a terceira linhas horizontais*/ &: antes, &: após {content: ''; Posição: Absoluto; Esquerda: 0; topo: -10px; largura: 100%; Altura: 2px; Background-Color: herdar; } &: depois {top: 10px; }}} /*Defina o estilo do menu selecionado* / /*Defina o menu como corrigido, com largura e altura de 100%, e depois defina a exibição como flexiona, caso contrário, o menu não aparecerá no meio* / .menu {position: corrigido; Esquerda: 0; topo: 0; largura: 100%; Altura: 100%; estouro: oculto; exibição: flex; Justify-Content: Center; alinhado-itens: centro; Visibilidade: escondida; /*Defina o menu como invisível e, em seguida, defina -o como visível quando a caixa de seleção estiver selecionada*/ transição: todos .75s facilidade; > div {@include set-background ($ sobreverlay-color); Largura: 200VW; Altura: 200VH; estouro: oculto; Radio de fronteira: 50%; exibição: flex; Justify-Content: Center; alinhado-itens: centro; Alinhamento de texto: centro; Transformar: escala (0); Transição: Todos .4s facilitam; > div {max-width: 90VW; Max-Hight: 90VH; opacidade: 0; Transição: Todos .4s facilitam; > ul> li {estilo de lista: nenhum; tamanho de fonte: 2rem; preenchimento: .85rem 0; TRANSFORMA DE TEXTO: OUPERCASE; Transformar: inclinar-se (-5deg, -5deg) girar (5deg);/*Defina o texto inclinação*/ a {color: herd; Decoração de texto: Nenhum; transição: cor .4s facilitar; }}}}}}}}Este é o artigo sobre o HTML+SASS implementando o Hambergurmenu (menu no estilo Hamburger). Para obter mais html+sass implementando o hambergurinu, procure artigos anteriores do wulin.com ou continue a procurar os artigos relacionados abaixo. Espero que todos apoiem o Wulin.com no futuro!