3 formas creativas de diseñar la navegación del submenú vertical

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 un 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 vertical transparente de la A a la Z. A lo largo de esta publicación, experimentará diferentes configuraciones de estilo que pueden dar vida a su submenú vertical.

Antes de mostrarte los ejemplos, puede ser interesante ver el submenú sin cambios. Como de costumbre, el submenú vertical se hace cargo de la configuración de los elementos del menú principal. Sin realizar modificaciones adicionales, 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:

Pasos generales para lograr el submenú vertical

Suscríbete a nuestro canal de Youtube

Antes de sumergirnos en los diferentes ejemplos que hemos proporcionado, manejaremos 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: agregar los elementos del submenú a su menú y buscar las diferentes ID de CSS de nuestros elementos del submenú. Una vez que hayamos seguido esos pasos, compartiremos el código CSS que necesita para lograr los resultados de ejemplo.

Dado que hay tres formas de agregar código CSS a su sitio web Divi, manejaremos cada método individualmente. Sin embargo, puede utilizar su forma preferida de agregar el código CSS para cada uno de los ejemplos.

Agregar elementos de submenú

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 es así, comience creando 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.

Busque los ID de CSS individuales de los elementos de su submenú

En nuestros ejemplos, tendremos que realizar algunas modificaciones 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 los ID 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 la ID de CSS aparece en el elemento de menú que está seleccionado. Copie cada uno de los ID de CSS en la lista del submenú y guárdelos para más adelante.

Ahora que ha realizado los dos pasos, puede continuar con la creación de los ejemplos que hemos creado.

Crea 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 adicional a su sitio web. Los elementos del menú principal son simples y utilizan un color de fondo transparente. Por supuesto, puede mantener esa misma simplicidad en su submenú. O 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.

Agregar 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 temas. 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:

.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.

Crea el segundo ejemplo

El siguiente ejemplo le mostraremos cómo hacer que tenga un cierto efecto de degradado. Los diferentes colores que se están utilizando están en consonancia con la imagen de fondo que se está utilizando. 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, no dude en agregarlas a través de las Opciones de tema (como se muestra en el primer ejemplo) o mediante el 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:

.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 los suyos propios:

Crea el tercer ejemplo

El último ejemplo que vamos a compartir sobre cómo hacer 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 desplaza sobre el elemento del menú principal. Por lo tanto, sus visitantes no se verán confrontados constantemente con el 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:

.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 el submenú vertical perfectamente. Si tiene alguna pregunta o sugerencia; ¡Háganos saber en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!