En la publicación de hoy, le proporcionaremos tres formas diferentes de diseñar el submenú de su navegación vertical. En una de las publicaciones anteriores , ya le mostramos cómo hacer una navegación vertical transparente que se superponga a su sitio web cuando lo mira desde una computadora de escritorio.
Los ejemplos que vamos a compartir se realizarán sobre esa navegación vertical transparente. De esa manera, inmediatamente tendrá la posibilidad de crear su navegación transparente vertical de la A a la Z. A lo largo de esta publicación, experimentará diferentes configuraciones de estilo que pueden darle vida a su submenú vertical.
Antes de mostrarle los ejemplos, puede ser interesante ver el submenú sin ningún cambio. Como de costumbre, el submenú vertical asume la configuración de los elementos del menú principal. Sin hacer ninguna modificación adicional, así es como se ve el submenú:
Ahora, echemos un vistazo a los tres ejemplos que le mostraremos cómo recrear.
Primer ejemplo:
Segundo ejemplo:
Tercer ejemplo:
Suscríbete a nuestro canal de Youtube
Antes de sumergirnos en los diferentes ejemplos que proporcionamos, vamos a manejar dos pasos generales que son necesarios antes de comenzar. Antes de diseñar los elementos del submenú de acuerdo con sus necesidades, debe hacer dos cosas: agregue los elementos del submenú a su menú y busque los diferentes ID de CSS de nuestros elementos del submenú. Una vez que hayamos realizado esos pasos, compartiremos el código CSS que necesita para lograr los resultados del ejemplo.
Dado que hay tres formas de agregar código CSS a su sitio web Divi , manejaremos cada método individualmente. Sin embargo, puede usar su forma preferida de agregar el código CSS para cada uno de los ejemplos.
Lo primero que haremos, si aún no lo ha hecho, es agregar los elementos del submenú. En nuestro ejemplo, solo hemos agregado algunos elementos del submenú al elemento del menú ‘nuestros modelos’ para mostrarle cómo hacerlo. Sin embargo, también puede aplicar los cambios a otros elementos del menú.
Si está en su panel de WordPress, vaya a Apariencia > Menús . Si ya ha creado un menú, utilícelo. Si no, comience por hacer un nuevo menú. Luego, agregue los elementos del menú principal a su menú. Una vez que haya hecho eso, puede agregar los elementos del submenú. Agregue un elemento del submenú y simplemente colóquelo justo debajo del elemento del menú principal. Haga esto para todos los elementos del submenú que le gustaría agregar a su navegación vertical.
En nuestros ejemplos, tendremos que hacer algunas modificaciones de CSS a cada elemento del submenú individualmente. Es por eso que tendremos que buscar las ID de CSS en la fuente. Cada artículo tiene una identificación diferente. Debe modificar el código CSS de acuerdo con las ID de CSS que se utilizan específicamente en su sitio web. Estos pueden diferir de los que se utilizan en estos ejemplos. Es por eso que le mostraremos brevemente dónde obtener las identificaciones para que pueda realizar las modificaciones para sus artículos en particular.
Vaya a su página de inicio, coloque el mouse en el menú y comience a inspeccionar el código. Verá que aparece el ID de CSS en el elemento de menú seleccionado. Copie cada uno de los ID de CSS en la lista del submenú y guárdelos para más tarde.
Ahora que ha realizado los dos pasos, puede pasar a crear los ejemplos que hemos hecho.
Crear el primer ejemplo
En esta parte de la publicación, le mostraremos exactamente cómo recrear el primer ejemplo del submenú vertical. Como puede ver, la estructura es realmente sencilla, sin embargo, agrega ese color extra a su sitio web. Los elementos del menú principal son simples y usan un color de fondo transparente. Por supuesto, puede mantener esa misma simplicidad en su submenú. O bien, puede optar por llamar un poco más la atención.
Los colores que se utilizan coinciden con la imagen de fondo con la superposición de degradado. Es recomendable mantener ese tipo de consistencia de colores en su submenú si está tratando de lograr un resultado simple y modesto.
Agregue el código CSS a través de las opciones del tema
Hay diferentes formas de agregar código CSS a su página. Puede, por ejemplo, agregar el código CSS a una página en particular. También puede agregarlo a todo el sitio web a través de las Opciones de tema o el Personalizador de tema . Para este ejemplo, simplemente agregaremos el código a través de las Opciones de tema. Si está en su Panel de WordPress, vaya a Divi > Opciones de tema > Desplácese hacia abajo en la pestaña general y pegue el siguiente código en el 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
34
35
36
37
38
39
|
.nav li ul {border: none !important;}#top-menu li li {border-bottom: none !important;}.sub-menu #menu-item-205211 {background-color: rgba(60,105,205,0.1) !important;border-radius: 5px;margin-bottom: 10px;}.sub-menu #menu-item-205212 {background-color: rgba(60,105,205,0.3) !important;border-radius: 5px;margin-bottom: 10px;}.sub-menu #menu-item-205213{background-color: rgba(60,105,205,0.5) !important;border-radius: 5px;}@media (min-width: 981px){#top-menu li li a {padding: 1px 0px 1px 0 !important;text-align: center !important;font-size: 11px !important;}.et_vertical_nav #main-header #top-menu li ul {margin-left: 5% !important;}.et_vertical_nav #main-header #top-menu > li > a:after{right: 45px !important;}}#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after{content: "e089" !important;} |
Reemplace las siguientes ID de CSS en el código con las que se aplican a su submenú. En el paso anterior de esta publicación, le mostramos dónde puede encontrarlos.
Crear el segundo ejemplo
El siguiente ejemplo que le mostraremos cómo hacer tiene un cierto efecto de degradado. Los diferentes colores que se utilizan están en línea con la imagen de fondo que se utiliza. Hemos agregado un fondo degradado al submenú completo y algunos colores transparentes individuales a cada uno de los elementos del submenú.
Agregue el código CSS para una página en particular
Aunque probablemente desee agregar este código a su sitio web completo, le mostraremos cómo hacer que este ejemplo se aplique a una página en particular. Si no desea agregar las líneas de código CSS a una página en particular, siéntase libre de agregarlas a través de las Opciones de tema (como se muestra en el primer ejemplo) o a través del Personalizador de temas (como se muestra en el siguiente ejemplo).
Comience abriendo o creando la página donde desea agregar el diseño del submenú. Ahora, haga clic en el siguiente botón en la esquina derecha del constructor Divi:
En la pantalla que aparece, copie y pegue las siguientes líneas de código CSS en el campo 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
34
35
36
37
38
39
40
41
42
43
44
|
.nav li ul {border: none !important;background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;padding: 3px !important;width: 80% !important;}#top-menu li li {border-bottom: none !important;}.sub-menu #menu-item-205211 {background-color: rgba(255,255,255,0.6) !important;margin-bottom: 3px;}.sub-menu #menu-item-205212 {background-color: rgba(255,255,255,0.4) !important;margin-bottom: 3px;}.sub-menu #menu-item-205213{background-color: rgba(255,255,255,0.2) !important;}@media (min-width: 981px){#top-menu li li a {padding: 1px 0 1px 0 !important;text-align: center !important;color: #000000 !important;width: 80% !important;font-size: 11px !important;}.et_vertical_nav #main-header #top-menu li ul {margin-left: 10% !important;}.et_vertical_nav #main-header #top-menu > li > a:after{right: 45px !important;}}#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after{content: "61" !important;} |
Reemplace los siguientes elementos del submenú en el código CSS con el suyo propio:
Crear el tercer ejemplo
El último ejemplo que vamos a compartir tiene un efecto de desplazamiento. Al agregar este efecto de desplazamiento a su submenú, interactuará con su audiencia de una manera agradable sin que su menú principal esté demasiado ocupado. Dado que el submenú solo aparece cuando se mueve sobre el elemento del menú principal. Por lo tanto, sus visitantes no se enfrentarán constantemente al efecto.
Agregue el código CSS para una página a través del personalizador de temas
Para el último ejemplo, le mostraremos cómo agregar el código CSS a través del personalizador de temas. Si está en su panel de WordPress, vaya a Apariencia > Personalizar > CSS adicional > y copie y pegue las siguientes líneas de 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
sesenta y cinco
66
67
68
69
70
|
.nav li ul {border: none !important;width: 95% !important;}#top-menu li li {border-bottom: none !important;}.sub-menu #menu-item-205211 {background: none !important;background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;}.sub-menu #menu-item-205211:hover {background: none !important;background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;}.sub-menu #menu-item-205212 {background: none !important;background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;}.sub-menu #menu-item-205212:hover {background: none !important;background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;}.sub-menu #menu-item-205213{background: none !important;background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;}.sub-menu #menu-item-205213:hover{background: none !important;background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;}@media (min-width: 981px){#top-menu li li a {padding: 5px 0 5px 0 !important;text-align: center !important;color: #000000 !important;width: 95% !important;font-size: 11px !important;}.et_vertical_nav #main-header #top-menu li ul {margin-left: 10% !important;}.et_vertical_nav #main-header #top-menu > li > a:after{right: 45px !important;}}#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after{content: "61" !important;} |
Tome las ID de CSS de los elementos de su submenú y reemplace las del ejemplo con las suyas:
¡Eso es todo! Su diseño ahora debería verse como en el ejemplo que se muestra arriba.
Pensamientos finales
En esta publicación, le mostramos algunas posibilidades sobre cómo ser creativo con su navegación vertical. Más específicamente; le mostramos cómo hacer que su submenú vertical se vea genial. Si sigue esta publicación, paso a paso, debería poder recrear perfectamente el submenú vertical. Si tiene alguna pregunta o sugerencia; ¡Háganos saber en la sección de comentarios a continuación!
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!