Como criar: Ícone de menu

Como criar ícones de menu

Primeiro passo - Adicionar HTML:

<div></div>
<div></div>
<div></div>

Segundo passo - Adicionar CSS:

div {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

Experimente pessoalmente

Exemplo de explicação:

width e height Atributos especificam a largura e altura de cada barra.

Adicionamos uma cor de fundo preta e margens superior e inferior para criar espaçamento entre cada barra.

Ícone de animação

Usando CSS e JavaScript, altere o ícone de menu para 'cancelar/excluir' ao clicar:

Primeiro passo - Adicionar HTML:

<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>

Segundo passo - Adicionar CSS:

.container {
  display: inline-block;
  cursor: pointer;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}
/* Rotação da primeira barra */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}
/* Desaparecimento gradual da segunda barra */
.change .bar2 {opacity: 0;}
/* Rotação da última barra */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

Terceiro passo - Adicionar JavaScript:

function myFunction(x) {
  x.classList.toggle("change");
}

Experimente pessoalmente

Exemplo de explicação:

HTML e CSS: Usamos a mesma estilização que antes, mas dessa vez envolvemos cada elemento <div> com um elemento de contêiner e atribuímos uma classe a cada elemento.

Os elementos de contêiner são usados para exibir um símbolo de ponteiro quando o usuário coloca o mouse sobre os divs (linhas). Quando clicado, ele executa uma função JavaScript que adiciona uma nova classe, alterando o estilo de cada barra horizontal: as primeiras e últimas linhas se deformam e giram em uma letra 'x'. As linhas do meio desaparecem gradualmente e tornam-se invisíveis.