如何创建：菜单图标
- Página anterior Barra de iconos
- Página siguiente Acordeón
学习如何使用 CSS 创建菜单图标。
如果您没有使用图标库，您可以使用 CSS 创建一个基本的菜单图标：
如何创建菜单图标
Primero - Añadir HTML:
<div></div> <div></div> <div></div>
Segundo - Añadir CSS:
div {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
Ejemplo de explicación:
width y height Las propiedades especifican el ancho y la altura de cada barra.
Hemos añadido un color de fondo negro y márgenes superior e inferior para crear espacio entre cada barra.
Icono de animación
Usando CSS y JavaScript, cambia el icono del menú a un icono de 'cancelar/eliminar' al hacer clic:
Primero - Añadir HTML:
<div class="container" onclick="myFunction(this)"> <div class="bar1"></div> <div class="bar2"></div> <div class="bar3"></div> </div>
Segundo - Añadir CSS:
.container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}
/* Rotar la primera barra */
.change .bar1 {
transform: translate(0, 11px) rotate(-45deg);
}
/* Desvanecer la segunda barra */
.change .bar2 {opacity: 0;}
/* Rotar la última barra */
.change .bar3 {
transform: translate(0, -11px) rotate(45deg);
}
Tercero - Añadir JavaScript:
function myFunction(x) {
x.classList.toggle("change");
}
Ejemplo de explicación:
HTML y CSS: hemos utilizado el mismo estilo que antes, pero esta vez hemos envuelto cada elemento <div> con un elemento de contenedor y especificado una clase para cada elemento.
El elemento de contenedor se utiliza para mostrar un símbolo de puntero cuando el usuario pasa el ratón sobre los divs (líneas). Al hacer clic en él, ejecutará una función JavaScript que le agregará una nueva clase, lo que cambiará el estilo de cada barra horizontal: la primera y la última línea se deformarán y rotarán en la letra 'x'. Las líneas intermedias se desvanecerán gradualmente y se volverán invisibles.
- Página anterior Barra de iconos
- Página siguiente Acordeón
