Cómo crear un menú con íconos circulares que se extienden para hacer clic en Div

Un menú con íconos circulares es una solución elegante para agregar un menú simple a su DIV. Este estilo de menú es intuitivo y funciona muy bien como un menú fijo para sus dispositivos móviles. Hoy, mostraremos cómo crear un menú con íconos circulares en DIV de una manera que realmente resalte las fuertes capacidades de diseño de Divi Builder. Y proporcionaremos un fragmento ligero de JavaScript para abrir y cerrar el menú al hacer clic. Empecemos a tirar de los ojos aquí hay una breve mirada al menú con íconos circulares que construiremos.



Descargue el aspecto del menú de icono de círculo de forma gratuita para poner su mano en el diseño de este tutorial, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Para importar el aspecto en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON en Divi Builder.
Pasemos al tutorial, ¿no? ¿Qué tienes que comenzar a comenzar? Deberás hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de la Divica Instalado (o el creador de Divi Plugin si no usa el tema Div).
Cree una nueva página en WordPress y active Divi Builder para editar la página en el frente (compilación visualmente).
Para este tutorial, utilizaremos los iconos del módulo de división Built -In, por lo que no se necesitan activos externos. Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Parte 1 Una vez que Divi Builder se activa para editar la página principal, agregue una fila de una columna a la sección predeterminada habitual.
Luego abra la configuración de la fila y agregue el siguiente relleno: revestimiento: top 300 px

Esto es simplemente para dar un espacio para que aparezcan los elementos del menú circular en clic. Creación de los íconos de los módulos de propaganda # 1 Después del llenado de la fila está en su lugar, agregue un módulo de propaganda en la columna. Este será el primero de los 5 borrones totales que agregaremos para hacer nuestro menú con íconos circulares. Nos referiremos a esto como propaganda # 1.

Luego actualice el contenido de la propaganda eliminando el título y el texto del cuerpo. Luego agregue un icono a la propaganda de la siguiente manera.

Use icono: sí icono: ver captura de pantalla
A continuación, actualizaremos la configuración de diseño de la siguiente manera: Color del icono: # 29A1F2 ícono Círculo: Sí Circle Color: # 222222 Muestra el borde del círculo: Dé el color del círculo: # 29a1f2 Use el tamaño de la fuente del icono: Sí Fuente del tamaño del icono: 25 PX Dimensión Texto del cuerpo: 20 PX Marja: 0 PXPE junto a la estilización del icono circular, también agregué un tamaño del texto del cuerpo. No hay texto del cuerpo, pero esto será útil más adelante cada vez que usemos la unidad de longitud EM (que es relativa al tamaño del texto del padre) para ahorrar los elementos del menú / borrones utilizando la transformación transformada. Más sobre esto más tarde.

Después de eso, elimine la imagen / icono de animación de definición. Animación / icono de imagen: sin animación, luego establece el índice Z para este módulo a 1, de modo que estén por encima de los otros que estarán detrás de él. IND ÍNDICE: 1 y, finalmente, elimine el margen inferior predeterminado debajo del icono agregando el siguiente CSS personalizado en la imagen de la propaganda. Botón de margen: 0px;

PROBAJE # 2 Para crear la segunda propaganda, simplemente duplique la propaganda # 1.
Luego abra la configuración para la nueva propaganda (propaganda # 2) y cambie el icono y configure el índice Z nuevamente en el valor predeterminado (0).

Después de eso, reduzcamos el icono utilizando la escala de transformación de la siguiente manera: la escala de transformación: el 70% se crea Blurbs # 3, # 4 y # 5 Las siguientes tres blurbbs se pueden crear duplicando la Blurb # 2 y actualizando el icono para cada uno .

Las borrones apiladas en la misma posición absoluta, el estado implícito de nuestro menú tendrá todas las propagaciones en una posición absoluta, con los cuatro elementos del menú bordeados apilados detrás del icono de la propaganda de la hamburguesa principal. Para obtener las borrones en la misma posición absoluta, use la función multiselección (mantenga presionado CTRL / CMD y haga clic en cada uno) para seleccionar los cinco módulos de propaganda. Luego, abra la configuración de una de las opciones seleccionadas para actualizar la configuración del elemento para las 5 al mismo tiempo. Luego agregue los siguientes CSS personalizados al elemento principal: Posición: ¡Absoluto! Importante;

Abajo: 20px;

Izquierda: 20px;

Se coloca en la parte inferior izquierda de la fila.
Posicionamiento de los iconos del menú Usando Transforms Translates Una vez que toda la propaganda se coloca para el estado predeterminado, podemos comenzar a colocar los elementos del menú para el estado de clic (donde llegarán después de hacer clic en el botón Menú principal). Para hacer esto, podemos usar la propiedad de transformarse en el Builder Divi. No hay un estado de clic en el generador Divi (como Hover), ya que JavaScript gestiona. Por lo tanto, posicionaremos los elementos del menú donde queremos hacer clic ahora. Luego usaremos JavaScript para cambiar la posición activada y desactivada al hacer clic en el botón Menú principal.
Queremos mantener la Blurb # 1 en su lugar porque es el botón del menú principal. Sin embargo, queremos mover la Blurb # 2, # 3, 4 y # 5. Y dado que nuestro desenfoque ahora está apilado en el Visual Builder, implementemos el modo de estructura alambre para actualizar las posiciones para cada propaganda. Posición de la propaganda # 2 Abra la configuración de la propaganda # 2 y actualice lo siguiente: Transforme la traducción del eje y: -10Miate la nueva posición de la propaganda # 2.
Posición de la propaganda # 3 Abra la configuración de la propaganda # 3 y actualice lo siguiente: Transforme el eje Y traducido: -8.6em transforma el eje x traducido: 5em

Aquí está la nueva posición de Brurb # 3.

Posición de la propaganda # 4 Abra la configuración de la propaganda # 4 y actualice lo siguiente: Transforme el eje traducido: -5EM Transformar el eje x Traducción: 8.6em

Aquí está la nueva posición de Blurb # 4.

Posición de la propaganda # 5 Abra la configuración para la Blurb # 5 y actualice lo siguiente: Transformar el eje y Traducción: 0px Transformar eje x traducción: 10em

Aquí está la nueva posición de Blurb # 5.

Agregar clases CSS CSS a borrones para que JavaScript funcione correctamente, debemos agregar algunas clases de CSS que servirán como estilos y características adicionales.

Agregue la clase CSS para Blurb # 1 en el modo de vista de estructura de alambre, abra la configuración de la propaganda # 1 y agregue la siguiente clase CSS: CSS: transform_target

Agregue las clases de CSS a los blurbs # 2, # 3, # 4 y # 5 Las otras cuatro borrosas dividirán las mismas clases de CSS para que podamos usar la función MultisLection para seleccionar la Blurb # 2, # 3, 4 y # 5 y nosotros Actualice la clase CSS para los cuatro de la siguiente manera: clase CSS: transformación de transformación de transformación-transformación Observe que hay dos clases de CSS separadas por un espacio. , estamos listos para agregar nuestro código a la página usando un módulo de código. Para hacer esto, agregue un módulo de código debajo de la propaganda # 5.

Luego pegue el siguiente código al módulo de código:

.has-transform, .Transform_Target .et-pb-icon {
Transición: todos los 400 ms de facilidad;

}

.Togle-Transform-Animation {

Transformar: Ninguno! Importante;
}
.Transform_Target {
Cursor: puntero;
}
.Togle-Active-Tartarg.et_pb_blurb .et-pb-icon {
Color de fondo: transparente;
}
Este es el CSS externo utilizado en combinación con el código JQuey.
(función ($) {
$ (documento) .Ready (function () {
$ (‘. Transform_target’). Click (function () {
$ (this) .ToglecLass (‘Togle-Active-Tare’);
$ (‘. HA-TRANSFORM’). TOGGLECASS (‘Togle-Transform-Animation’);
});
});
}) (JQuery);
y esta es la necesidad de que JavaScript obtenga los elementos en el menú de icono circular para expandirlos al hacer clic en el botón Menú. Asegúrese de mantener la etiqueta de estilo envuelta alrededor de CSS y la etiqueta de script envuelta alrededor de JavaScript / jquey.
Verifique el resultado final de la funcionalidad en la página en vivo.
Agregar la URL de los elementos del menú porque este es un menú, los cuatro elementos del menú necesitarán enlaces / direcciones de URL. Para agregar las URL necesarias para cada elemento de menú, abra la configuración del módulo de la propaganda para cada uno de los 4 elementos del menú y agregue una URL de módulo. Haciendo el botón de menú pegajoso (o fijo) porque este menú es pequeño e intuitivo para los dispositivos móviles, Es posible que desee hacer que el menú sea pegajoso para que permanezca arreglado en la parte inferior izquierda del navegador. Para hacer esto, seleccione las cinco borrachas utilizando la función de selección multise y luego actualice CSS personalizado en el elemento principal reemplazando la posición “absoluta” con “fijo”. Posición: ¡fijo! IMPORTANTE;
Abajo: 20px;
Izquierda: 20px;
Ahora, el menú permanecerá arreglado en la esquina inferior izquierda de la ventana del navegador.

Para garantizar que el menú esté por encima del otro contenido en la página, actualice el índice z para la fila de la siguiente manera: IND ÍNDICE: 11

Luego retire el revestimiento de la fila: revestimiento: 0 px hacia arriba, 0 px abajo

El diseño final aquí es el diseño final del icono circular fijo con un aspecto prefabricado.
Y aquí está el móvil.
Cómo ajustar fácilmente el tamaño y el espacio del menú como se mencionó anteriormente, el menú se diseñó utilizando la unidad de longitud EM para colocar el elemento de menú en el eje x e y (usando la transformación). La unidad de longitud EM es relativa al tamaño del texto del cuerpo principal. Por lo tanto, debido a que cada uno de nuestros módulos de blurbs tiene el mismo tamaño del texto del cuerpo de 20 PX, podemos usar multiselección para cambiar el texto del cuerpo para todas las borrachas simultáneamente. Esto aumentará o disminuirá la distancia entre los elementos del menú, según sea necesario. Y puede hacer lo mismo para el tamaño de la fuente de icono. Simplemente use multiselecto para ajustar el tamaño de la fuente de icono para todos los elementos de menú simultáneamente. Los pensamientos finales que sabían que agregar un menú fijo con un icono circular a una página podrían ser tan simples con Div. ¡También es el tipo perfecto de menú para dispositivos móviles! Por supuesto, se necesitan algunos fragmentos de código personalizados, pero el hecho de que pueda diseñar y colocar el estado de clic de los elementos del menú utilizando el generador visual es bastante interesante. No olvide explorar diferentes colores, tamaños y modelos flotantes que pueden hacer que el menú coincida con su propio sitio web. Espero tener noticias suyas en los comentarios. ¡Suerte!