En este post te voy a mostrar como crear un ícono de menú de barras para dispositivos móviles, utilizando CSS3 y JavaScript.
Normalmente, cuando deseamos añadir este tipo de icono al menú de navegación para móviles, empleamos font icons o fuentes de íconos de sitios como Fontawesome, IcoMoon, Material Design, entre otros. Sin embargo, en este tutorial vamos a prescindir de este tipo de fuentes y vamos a crear nuestro propio ícono desde cero, simplemente con HTML, CSS y algo de código JavaScript.
Lo primero que haremos será crear nuestra estructura HTML. Para esto agreganos un <div> que a su vez va a contener 3 elementos <div>, los cuales representarán cada una de las barras horizontales de nuestro ícono.
<div class="contenedor">
<div class="barraIcono1"></div>
<div class="barraIcono 2"></div>
<div class="barraIcono3"></div>
</div>
De inmediato aplicamos estilos CSS:
.contenedor {
display: inline-block;
cursor: pointer;
}
.barraIcono1, .barraIcono2, .barraIcono3 {
width: 30px;
height: 4px;
background-color: #000;
margin: 5px 0;
}
Con la primera regla hacemos que los elementos <div> hijos del contenedor se comporten como elementos de línea y bloque a la vez, y además, logramos que el puntero del ratón cambie su forma cuando lo coloquemos encima del ícono.
Con la segunda regla simplemente hacemos que los elementos <div> que llevan la clase “barraIcono*” tengan la forma de una barra horizontal, con un color de fondo y unas dimensiones definidas.
Y con esto ya tenemos listo nuestro ícono de menú. Sin embargo, queremos que sea animado, así que se hace necesario añadir otras reglas CSS para crear el efecto de animación.
Lo que haremos será rotar y trasladar la primera y la segunda barra, de tal manera que formen una equis (“x”), con lo cual nuestro ícono tendrá el aspecto de un botón de cierre. También haremos que la segunda barra se muestre totalmente transparente.
/* Rotar y trasladar la primera barra*/
.cambaiarForma .barraIcono1 {
transform: rotate(-45deg) translate(-8px, 3px);
}
/* Hacer la segunda barra transparente */
.cambaiarForma .barraIcono2 {
opacity: 0;
}
/* Rotar y trasladar la tercera barra */
.cambaiarForma .barraIcono3 {
transform: rotate(45deg) translate(-8px, -8px) ;
}
Este efecto se aplicará solamente cuando pulsemos sobre nuestro ícono, y por tanto, para lograr esto será necesario escribir código JavaScript.
function myFunction(x) {
x.classList.toggle(".cambaiarForma ");
}
Y este es el código completo:
See the Pen Crear un ícono de menú de barras con CSS3 y JavaScript by simplicitytree (@simplicitytree) on CodePen.0
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- Cascada CSS - agosto 24, 2023
- El objeto Math - agosto 23, 2023
- Diferencia entre null y undefined en JavaScript - agosto 16, 2023
