Cómo - Ícono de menú
Aprende a 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 de menú básico con CSS:
Icono de menú:
Icono de menú animado (haga clic en él):
Paso 1) Agregar HTML:
Ejemplo
<div></div>
<div></div>
<div></div>
Paso 2) Agregar CSS:
Ejemplo
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Ejemplo explicado
La propiedad width
y height
especifica el ancho y el alto de cada barra.
Hemos agregado un negro background-color
, y la parte superior e inferior margin
se usan para crear cierta distancia entre cada barra.
Icono animado
Use CSS y JavaScript para cambiar el ícono del menú a un ícono de "cancelar/eliminar" cuando se hace clic en él:
Paso 1) Agregar HTML:
Ejemplo
<div class="container" onclick="myFunction(this)">
<div
class="bar1"></div>
<div class="bar2"></div>
<div
class="bar3"></div>
</div>
Paso 2) Agregar 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) Agregar JavaScript:
Ejemplo
function myFunction(x) {
x.classList.toggle("change");
}
Ejemplo explicado
HTML y CSS: usamos los mismos estilos que antes, solo que esta vez envolvemos un elemento contenedor alrededor de cada elemento <div> y especificamos un nombre de clase para cada uno.
El elemento contenedor se usa para mostrar un símbolo de puntero cuando el usuario mueve el mouse sobre los divs (barras). Cuando se hace clic en él, ejecutará una función de JavaScript que le agrega un nuevo nombre de clase, que cambiará los estilos de cada barra horizontal: la primera y la última barra se transforman y giran a la letra "x". La barra en el medio se desvanece y se vuelve invisible.