Tu menú es una de las primeras cosas que ven los visitantes cuando van a tu sitio web, así que quieres que tenga algo de estilo, ¿verdad? ¡Por supuesto que sí! Es por eso que en la publicación de hoy voy a compartir tres formas de agregar algunos buenos efectos de desplazamiento a su menú con CSS personalizado.
Los efectos de desplazamiento deben ser sutiles, queremos interés visual, pero esa no es la parte más importante del sitio, sino su contenido. Estos agregarán la cantidad justa de «pop» a su navegación Divi .
No solo agregaremos un agradable efecto de desplazamiento, sino que también se aplicará un estilo al enlace de la página activa. Por ejemplo, si el usuario está en la página de inicio, el enlace de inicio en el menú tendrá algún tipo de tratamiento de diseño pequeño aplicado. Este es un marcador visual común que se incluye en los sitios web para ayudar a recordar al usuario dónde se encuentra en el sitio. No es absolutamente necesario, pero es una buena experiencia de usuario útil.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Configuración del personalizador de temas
En primer lugar, para todos los estilos vamos a utilizar la configuración predeterminada para el formato de encabezado . Si acaba de instalar Divi, no necesita configurar esta configuración, debe configurarse automáticamente.
Estilo uno: línea creciente debajo
En este estilo de menú, agregaremos una línea que parece crecer de izquierda a derecha directamente debajo del elemento del menú sobre el que se pasa el mouse. También establecerá una línea estática directamente debajo del enlace de la página activa.
Inspiración
Este es un efecto realmente agradable que puede funcionar bien en casi cualquier tipo de sitio, además, editar el código de este estilo para cambiar el color y el ancho de línea es bastante fácil para usuarios de cualquier nivel. Es un efecto de desplazamiento bastante popular que he visto en los sitios durante años. Creo que su sutileza es lo que lo hace tan versátil, se puede usar en un sitio de bienes raíces, así como en el sitio de un músico y todo lo demás.
Implementación
Agregue el siguiente código a su hoja de estilo secundaria O a las opciones del tema Divi> general> cuadro CSS personalizado :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
#top-menu .current-menu-item a::before,#top-menu .current_page_item a::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0;}#top-menu li a:before { content: ""; position: absolute; z-index: -2; left: 0; right: 100%; bottom: 50%; background: #15bf86; /*** COLOR OF THE LINE ***/ height: 3px; /*** THICKNESS OF THE LINE ***/ -webkit-transition-property: right; transition-property: right; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out;}#top-menu li a:hover { opacity: 1 !important;}#top-menu li a:hover:before { right: 0;}#top-menu li li a:before { bottom: 10%;} |
Estilo dos: apariencia «cuadrada» gruesa con una línea debajo
En este estilo de menú, colocaremos una gran línea «en bloque» que se anima hacia abajo desde la sección del menú debajo del elemento del menú sobre el que se desplaza el mouse. También coloca un cuadro grueso sobre el enlace del menú activo.
Inspiración
Yo mismo uso este estilo en un tema infantil de Divi que desarrollé llamado Executive (enlazaré a la demostración a continuación para que pueda ver el desplazamiento en acción en un sitio real). Visualmente, esto no es tan sutil como el primer estilo, creo que elegir el sitio adecuado para usarlo sería clave. Es importante hacer coincidir cualquier tipo de pequeño detalle de diseño, como un efecto de desplazamiento, con la sensación general del sitio.
Implementación
Agregue el código a continuación a la hoja de estilo de su tema hijo o al cuadro css personalizado de Divi en la pestaña general Opciones de tema. En cuanto a la facilidad de edición, el color es muy fácil de cambiar, pero si planea cambiar el ancho del borde, encontrará que también necesitará jugar con los otros números en el CSS.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
#top-menu li > a:hover { box-shadow: 0 10px 0 0 #F15A29 !important; /*** COLOR AND THICKNESS OF THE LINE ON HOVER ***/ padding-bottom: 34px; opacity: 1 !important;}#top-menu li li a { padding-bottom: 6px !important;}#top-menu li.current-menu-item > a,.et-fixed-header #top-menu li.current-menu-item > a { border: 10px solid #F15A29; /*** COLOR AND THICKNESS OF THE BOX ***/ padding: 10px; margin-bottom: -10px;} |
Este estilo de menú convierte los elementos del menú en botones con colores flotantes coordinados. También le da otro color, separado, al enlace del menú activo.
Inspiración
Esto está inspirado en los botones, por supuesto Me gusta mucho cómo se ve la navegación con botones. También creo que, como el estilo uno, es un aspecto bastante versátil que podría funcionar en casi cualquier sitio. Cambiar los colores de fondo también es bastante fácil.
Implementación
Al igual que con los otros dos estilos anteriores, querrá agregar el código css personalizado a continuación a la hoja de estilo de su tema secundario o al cuadro css personalizado en la pestaña de configuración general del tema de Divi. Puede realizar sus propios ajustes y cambios en el código (como los colores) ajustando los valores junto a las partes comentadas del código.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
|
.et_header_style_left #et-top-navigation nav > ul > li > a,.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a { padding-bottom: 15px;}#top-menu li { padding-right: 5px;}#et-top-navigation { padding: 20px 0 !important;}#top-menu li a { background: #C1B2AB; /*** CHANGES THE BACKGROUND COLOR ***/ padding: 15px 20px; border-radius: 3px;}#top-menu li a:hover,#top-menu li li a:hover { color: #fff !important;}#top-menu li a:hover { background: #559CAD !important; /*** CHANGES THE BACKGROUND COLOR ON HOVER ***/}#top-menu li.current-menu-item > a { background: #edc77b; /*** CHANGES THE BACKGROUND COLOR OF THE CURRENT PAGE LINK ***/}#top-menu .menu-item-has-children > a:first-child:after { content: none;} |
Ejemplos de estos estilos en sitios Divi «In the Wild»
Aquí hay algunos ejemplos de estos estilos (o muy similares) que se utilizan en sitios web Divi en vivo.
Servicio Completo de Ascensor
Este sitio tiene el tratamiento de líneas finas que se usa en otras partes de los encabezados, por lo que el estilo de desplazamiento se vincula con el aspecto general para que tenga sentido.
Ver el sitio completo de servicio de ascensores
Como en el ejemplo anterior, el estilo de la línea gruesa se usa en otras partes del sitio para que los diferentes elementos de diseño se complementen entre sí.
Ver el tema infantil Executive Premium Divi
Endurar estudios web
De acuerdo, me costó mucho encontrar un sitio que usara botones para cada enlace de menú. Escribí el CSS solo para este tutorial, pero Endure muestra un uso popular de hacer que un enlace parezca un botón, por lo que el tercer estilo de este tutorial simplemente toma esa idea y la usa para todos los enlaces de navegación.
Ver el sitio web de Endure Web Studios
Terminando
Esperamos que pueda encontrar algún uso para uno o incluso todos estos estilos de desplazamiento del menú en sus sitios web Divi.
Algo grandioso sobre el uso de fragmentos de tutoriales como este es el hecho de que incluso el usuario más principiante puede implementarlos fácilmente, lo que brinda al sitio más básico ese impulso de diseño personalizado que tanto necesita. Y aunque técnicamente ninguno de ellos usa una función de animación, da la sensación de que algo está animado, lo cual es muy popular y está de moda en estos días.
Háganos saber en los comentarios a continuación lo que le gustaría aprender a continuación. ¡Y asegúrese de suscribirse para obtener más tutoriales Divi fáciles de implementar de Elegant Themes!