Cómo crear una rueda de menú giratorio en el flotador

Crear una rueda de menú giratoria en Hover es una forma divertida de presentar enlaces útiles en su sitio web. Esta sería una excelente manera de proporcionar más llamadas de acción a un encabezado a los usuarios directos a donde necesitan ir. Y también sería un menú interesante para las subcategorías para su blog en este tutorial, le mostraré cómo crear una rueda de menú giratoria en Hover en Div. Esto se puede hacer utilizando una combinación de opciones de división integradas y algunos fragmentos CSS personalizados. Tirar del ojo


Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando 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? Suscríbase a nuestro canal de YouTube lo que necesita para comenzar a comenzar, deberá tener lo siguiente:
El tema instalado y activo
Una nueva página creada para construir desde cero en el frente (Visual Builder)
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Creando el diseño de la rotación del menú rotativo en la idea básica de la rueda se crea transformando una fila en un elemento circular, dándole una altura y un ancho de 500 PX y un 50%de esquinas redondeadas. Cada enlace de menú se crea en un módulo de texto separado y se alinea a lo largo del perímetro de la fila circular girando cada módulo de texto (el centro) de la fila. Esta configuración es similar a la forma en que crearía texto curvo en la división.
Cree la sección y la fila 1 cree una sección regular con una fila con una columna.
Luego agregue un módulo de texto en una fila con el siguiente contenido.

Luego actualice el diseño del texto de la siguiente manera: Fuente Texto: Comparta la letra de espaciado tecnológico Texto: 1 PX Rúbrica 2 Tamaño del texto: 8VW

Agregue la fila 2 para construir la rueda luego, debemos agregar una nueva fila con una columna bajo la fila 1. Antes de comenzar a agregar nuestros módulos de texto para nuestros enlaces, debemos diseñar nuestro giro. Habrá muchas optimizaciones para la fila para hacer el diseño de nuestra rueda. Para comenzar, abra la configuración para la fila 2 y actualice lo siguiente: Wallpaper: # 02366B Color izquierdo del gradiente de fondo: RGBA (0.0,0.45) Color derecho del gradiente de fondo: # 02366B Tipo de gradiente: Dirección radial Radial: Centro Posición inicial : 36% Posición final: 0%

Use el ancho personalizado del canal: sí, el ancho del canal: 1 ancho: 500 px ancho máximo: 500 px (escritorio), automático (tableta y teléfono): 500 px (escritorio), relleno automático (tableta y teléfono) (relleno (tableta) ( 0 Desktop): 0 px en la parte superior, 0 px en el revestimiento inferior (tableta y teléfono): 20 px arriba, 20 px abajo, 20 px margen izquierdo (teléfono): -10% correcto
Debemos establecer la altura y el ancho de la fila a 500 PX, de modo que sea un cuadrado perfecto. Esto nos permitirá ofrecerle una forma circular perfecta utilizando la opción de esquinas redondeadas (el rayo del borde). Esquinas redondeadas: 50%

Luego podemos agregar otro nivel de diseño del círculo usando una sombra de la caja de la siguiente manera: Box Shadow: Vea la captura de pantalla El poder de la sombra de la caja: 0 px El poder de la sombra de la caja: 210 px Sombra: RGBA (2,54,107.0, 66)

A continuación, agregaremos un pequeño fragmento de CSS para hacer el contenido de nuestra fila centrada verticalmente. En la pestaña avanzada, agregue el siguiente CSS personalizado en el elemento principal.

Pantalla: Flex;

Alinine-Ritams: Centro;
Esto está a cargo de la configuración promedio por el momento. Volveremos más tarde para agregar nuestro efecto de giro. Agregar enlaces cada conexión de rueda se creará con un módulo de texto. Crearemos un total de seis módulos de texto. Cinco de los módulos de texto contendrán los enlaces de las ruedas y uno de los módulos de texto contendrá el título del menú. Comience creando un nuevo módulo de texto. Luego actualice la configuración de texto de la siguiente manera: Contenido del cuerpo: “Elemento de conexión”
Texto de la fuente: Compartir el texto del texto tecnológico Color: #fffff Tamaño del texto del texto: 16 PX (predeterminado), 20 PX (Pase con mouse) Explenado Texto de la letra: 1 PX Altura del texto: 60 PX Ancho: 250 PX (Escritorio), Automático (tableta (tableta y teléfono) Altura: 60 PX Lingo: 20 PX izquierdo

Guarde su configuración por el momento. Luego copie el módulo de texto 4 veces para crear un total de 5 módulos de texto.

Posicionamiento de enlaces / módulos de texto Ahora estamos listos para colocar nuestras conexiones a lo largo del perímetro de la rueda. Para hacer esto, actualizaremos cada módulo de texto con opciones de transformación que se muevan / traduzcan y giren el módulo en su lugar.

Para que esto sea más fácil, implementa el modo de visualización de estructura de alambre y los módulos de texto de etiqueta que comienzan con el enlace 1 en la parte superior para enlace 5 en la parte inferior. Enlace 1 comenzaremos con el enlace Editar 1. Abra la configuración del módulo de texto para el enlace 1 y actualice lo siguiente:

Transforme el eje traducido: 120 px (escritorio), 0 px (tableta y teléfono) Eje redondeado Z: 60 grados (escritorio), 0 PX (tableta y teléfono) Transformación de origen: 50% 100% (centro derecho)

Enlace 2 Abra la configuración del módulo de texto para el enlace 2 y actualice lo siguiente: Transforme el eje Y: 60 px (escritorio), 0 px (tableta y teléfono) Eje redondeado Z: 30 grados (escritorio), 0 px (tableta y teléfono) Origen de transformación: 50% 100% (centro derecho) Enlace 3 Debido a que el módulo de texto para el enlace 3 está en el medio, podemos dejarlo en su lugar. Enlace 4 Abra la configuración del módulo de texto para el enlace 2 y actualice lo siguiente:

Transforme el eje Y: -60 PX (escritorio), 0 PX (tableta y teléfono) Eje girado Z: -30deg (escritorio), 0 PX (tableta y teléfono) Origen: 50% 100% (centro derecho)
Enlace 5 Abra la configuración del módulo de texto para el enlace 2 y actualice lo siguiente: Transforme el eje Y: -120px (escritorio), 0px (tableta y teléfono) eje girado Z: -60deg (escritorio), 0 px (tableta y teléfono) transformación de origen: 50% 100% (centro derecho)

Ahora verifiquemos el resultado hasta ahora. Observe cómo las conexiones / texto en los módulos de texto giran perfectamente a lo largo del perímetro del círculo.

Agregar la etiqueta del menú Para agregar la etiqueta del menú, necesitaremos agregar otro módulo de texto en la parte superior de los cinco módulos de texto que ya tenemos. Continúe y agregue un nuevo módulo de texto sobre el enlace 1. luego actualice el contenido del cuerpo con lo siguiente: & amp; lt; p & amp; gt; menú & amp;/p & amp;
Asegúrese de que la etiqueta del menú esté envuelta en la etiqueta de agua. Esto asegurará que la altura de la línea se reconozca en la configuración del texto. Luego, para acelerar el diseño, copie los estilos de los módulos de módulos de texto para el enlace 3 y pegue esos módulos en el nuevo módulo de texto.

Luego actualice lo siguiente: Altura de línea: 300 PX (escritorio), 20 px (tableta y teléfono) Altura: restaurar la configuración predeterminada (automáticamente) La altura de la línea debe ser de 300 px para que sea igual a la altura del contenido columna, que es, también, 300 px (5 módulos de texto cada uno con una altura de 60 px es igual a 300 px). Esto le asegurará que el texto permanece enfocado verticalmente. Luego debemos rotar el módulo de texto de la etiqueta del menú con 180 grados, de modo que se muestre correctamente en el lado opuesto de la rueda. Esto permitirá que el visitante vea la etiqueta del menú antes del movimiento que convierta los enlaces en la vista. Transformar el eje rotado Z: 180 grados (escritorio), 0DEG (tableta y teléfono) Transformando el origen: 50% 100% (centro derecho) Una vez completado, debemos darle al texto en la etiqueta del menú una posición absoluta. Para hacer esto, agregue los siguientes CSS personalizados al elemento principal: Posición: ¡Absoluto! Importante;

Ahora verifique el resultado. Debería ver que el elemento del menú está al revés, a la derecha de la rueda.

Agregando el efecto de rotación en una fila / rueda para agregar el efecto de rotación en una fila, actualice la configuración de la fila de la siguiente manera: Eje de giro Z: 180 grados (escritorio), 0deg (movimiento, 0DEG (tableta y teléfono)

Luego actualice la configuración de transición de la siguiente manera: Duración de transición: 450 ms Curva de velocidad de transición: Easy-in-II

Ahora verifique cómo gira la rueda.

Hacer una aparición con dos columnas para la sección en la actualidad, la apariencia está compuesta por dos filas con una columna apilada una encima de la otra. Sin embargo, podemos usar la propiedad Flex CSS para alinear las dos filas horizontalmente. Para hacer esto, podemos agregar un pequeño fragmento de CSS personalizado en la sección. Después de que haya terminado, tendremos que ajustar un poco la distancia para que las cosas se vean correctas. Abra la configuración de la sección y agregue los siguientes CSS personalizados al elemento principal: Pantalla: Flex; Actualizar el espacio de la fila 1 Luego, actualice el tamaño y el espacio para la fila 1 de la siguiente manera: Ancho: 40% (escritorio), 100% (tableta y teléfono ) Margen (escritorio): 5% de margen restante (tableta): 5% a la izquierda, 5% al ​​margen derecho (teléfono): 5% correcto

Los toques finales en la tableta y la pantalla del teléfono deberán agregar un margen superior al módulo de texto 1 enlace 1. Matrimonio (tableta): 30 PX superior

Y puede agregar un separador de sección en cualquier momento para completar el diseño.

Resultado final ahora para verificar el resultado final.

Un diseño alternativo de media rueda Un diseño alternativo interesante es ocultar la mitad derecha de la rueda fuera de la sección, de modo que las conexiones estén ocultas y luego reveladas en la carrera de viajes. Para hacer esto, continúe y copie la sección completa que contiene el diseño que acabamos de hacer. En la sección duplicada, actualice la configuración de la fila 1 de la siguiente manera: ancho: 70% (escritorio)

Luego, actualice la configuración para la fila 2 para empujar la rueda fuera de la sección de la siguiente manera: El margen: -250px necesitamos usar -250 px porque el ancho total de la rueda es de 500 px y queremos ocultar exactamente la mitad de la fila. Luego establezca la sección de visibilidad para esconder lo siguiente:

Aquí está el diseño final.

Pensamientos finales Una rueda de conexión rotativa es uno de esos elegantes elementos de diseño que pueden atraer a los visitantes con un efecto flotante sutil y único.Y es bastante sorprendente cuánto de este diseño solo puedes hacer con la configuración de diseño integrado.Espero que esto agrega algo adicional al cinturón de herramientas de diseño para su próximo proyecto.Espero tener noticias suyas en los comentarios.¡Suerte!