Aprender cómo crear un icono de menú con CSS.
Cómo crear un icono de menú
Si no está utilizando una biblioteca de iconos, puede crear un icono del menú básico con CSS:
Icono de menú:
Icono de menú animados (click on it) :
Paso 1) Añadir HTML:
Ejemplo
<div></div>
<div></div>
<div></div>Paso 2) Añadir CSS:
Ejemplo
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
} Inténtalo tú mismo " ejemplo Explicación
La width y la height propiedad especifica la anchura y la altura de cada barra.
Hemos añadido un negro background-color , y la parte superior e inferior margin se utiliza para crear algo de distancia entre cada barra.
Icono animado
Usar CSS y JavaScript para cambiar el icono de menú a un "cancel/remove" icono cuando se hace clic en:
Paso 1) Añadir HTML:
Ejemplo
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>Paso 2) Añadir CSS:
Ejemplo
.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) ;
}Paso 3) Añadir JavaScript:
ejemplo Explicación
HTML y CSS: Utilizamos los mismos estilos como antes, sólo que esta vez, nos envuelva un elemento contenedor alrededor de cada <div> elemento y se especifica un nombre de clase para cada uno.
El elemento contenedor se utiliza para mostrar un símbolo puntero cuando el usuario mueve el ratón sobre los divs (bars) . Cuando se hace clic en, se ejecutará una función de JavaScript que añade un nuevo nombre de la clase a la misma, que va a cambiar los estilos de cada barra horizontal: la primera y la última barra se transforma y se hace girar a la letra "x" . El bar en el medio se desvanece y se vuelve invisible.