Como fazer - Ícone do menu
Aprenda como criar um ícone de menu com CSS.
Como criar um ícone de menu
Se você não estiver usando uma biblioteca de ícones, poderá criar um ícone de menu básico com CSS:
Ícone do menu:
Ícone de menu animado (clique nele):
Etapa 1) Adicionar HTML:
Exemplo
<div></div>
<div></div>
<div></div>
Etapa 2) Adicionar CSS:
Exemplo
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Exemplo explicado
A width
e a height
propriedade especifica a largura e a altura de cada barra.
Adicionamos um preto background-color
e a parte superior e inferior margin
são usadas para criar alguma distância entre cada barra.
Ícone animado
Use CSS e JavaScript para alterar o ícone do menu para um ícone "cancelar/remover" quando for clicado:
Etapa 1) Adicionar HTML:
Exemplo
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Etapa 2) Adicionar CSS:
Exemplo
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotate
first bar */
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}
/* Fade out the
second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
-webkit-transform:
rotate(45deg) translate(-8px, -8px) ;
transform:
rotate(45deg) translate(-8px, -8px) ;
}
Etapa 3) Adicione JavaScript:
Exemplo
function myFunction(x) {
x.classList.toggle("change");
}
Exemplo explicado
HTML & CSS: Usamos os mesmos estilos de antes, só que desta vez, envolvemos um elemento container em torno de cada elemento <div> e especificamos um nome de classe para cada um.
O elemento container é usado para mostrar um símbolo de ponteiro quando o usuário move o mouse sobre as divs (barras). Ao clicar nele, ele executará uma função JavaScript que adiciona um novo nome de classe a ele, o que alterará os estilos de cada barra horizontal: a primeira e a última barra são transformadas e giradas para a letra "x". A barra no meio desaparece e se torna invisível.