A medida que el blog va creciendo en contenido, es esencial incorporar un menú de navegación desplegable porque ayuda al visitante a acceder más fácilmente a su contenido.
Los menús de navegación pueden ser simples o bastante complejos, dependerá de muchos aspectos, principalmente del volumen y tipo de contenido del blog, de su temática y finalidad, de su público objetivo o target, así como del diseño que se le quiera dar.
Por estas razones se debe poner especial cuidado en su diseño porque la finalidad principal es mejorar la experiencia del usuario y no dificultarla en un embrollo de etiquetas mal estructuradas. El menú debe ser intuitivo para que los usuarios encuentren rapidamente lo que buscan.
En este post voy a desarrollar la incorporación de un menú de navegación sencillo, óptimo para blogs con pocos temas y etiquetas.
Diseñar un esquema o árbol del menù de navegación
Este debe ser el primer paso. Pensar y plasmar en un papel un esquema del menú de navegación.
Lo mejor es ponerse en la posición del usuario y pensar cómo usuario qué necesito y cómo debe el blog facilitarme el acceso a lo que busco.
Lo mejor es ponerse en la posición del usuario y pensar cómo usuario qué necesito y cómo debe el blog facilitarme el acceso a lo que busco.
Voy a diseñar un esquema muy básico y sencillo que contiene cuatro menús principales.
✦ El primero de ellos, con el nombre "Página Inicio":
Dará acceso a la página de inicio del blog.
Dará acceso a la página de inicio del blog.
✦ El segundo, con el nombre "Menú Desplegable1":
Contendrá 3 menús secundarios o submenús con los nombres Módulo 3 - Módulo 4 - Módulo 5.
Contendrá 3 menús secundarios o submenús con los nombres Módulo 3 - Módulo 4 - Módulo 5.
✦ El tercero, con el nombre "Menú Desplegable2":
Estará integrado por 3 menús secundarios o submenús con los nombres Módulo 6 - Módulo 7 - Módulo 8.
Estará integrado por 3 menús secundarios o submenús con los nombres Módulo 6 - Módulo 7 - Módulo 8.
✦ El cuarto y último menu principal, con el nombre "Más Populares":
Estará formado por cuatro menús con los nombres Módulo 9 - Módulo 3 - Módulo 7 - Módulo 8.
Estará formado por cuatro menús con los nombres Módulo 9 - Módulo 3 - Módulo 7 - Módulo 8.
A Menú principal – PAGINA INICIO
B Menú principal – MENU DESPLEGABLE1
B 1 Menú secundario – MODULO 3
B 2 Menú secundario - MODULO 4
B 3 Menú secundario - MODULO 5
C Menú principal – MENU DESPLEGABLE2
B 1 Menú secundario – MODULO 6
B 2 Menú secundario - MODULO 7
B 3 Menú secundario - MODULO 8
D Menú principal – MAS POPULARES
D 1 Menú secundario – MODULO 9
D 2 Menú secundario - MODULO 3
D 3 Menú secundario - MODULO 7
D 3 Menú secundario - MODULO 8
Este arbol de navegación es muy simple y con pocos menús y submenús.
Tendrá un diseño horizontal para los menús principales y se desplegarán horizontalmente los menús secundarios o submenús.
Tendrá un diseño horizontal para los menús principales y se desplegarán horizontalmente los menús secundarios o submenús.
No es necesario hacer uso de JavaScript o jQuery, solamente será necesario código HTML y CSS.
El menú de navegación se mostrará dentro de una caja con borde superior e inferior para que destaque en el blog y se diferencie del resto de elementos.
El blog ya contaba con el menú de páginas (gadget páginas).
Ver entradas relacionadas:
El nuevo menú se situará bajo el Gadget de páginas que está destinado a páginas más genéricas, como Home o página principal, Archivo (con un el gadget de archivo del blog), Indice y podría añadirse también la página con información del autor (Sobre mí o Quién soy).
Al posicionar el ratón sobre cada una de las pestañas correspondientes a los menús principales se aplicará efecto hover (fondo verde), desplegándose horizontalmente los submenús o menús secundarios anidados a ese menú principal.
Para diferenciar los menús secundarios de los principales, se les aplicará un estilo distinto para facilitar su identificación una vez estén todos desplegados (principales y secundarios).
Las pestañas de los menús secundarios tendrán un fondo degradado lineal en negro y naranja.
Al mismo tiempo, se aplicará de nuevo efecto hover sobre los menús secundarios cuando se posicione el ratón sobre ellos, con un estilo distinto (fondo verde claro) al aplicado al hover de los menus principales (fondo verde).
Es aspecto será el siguiente,
Cómo agregar un menú de navegación desplegable en Blogger
Para añadir un menú de navegación en Blogger debemos ir al menú Diseño.
El siguiente paso será añadir un gadget + Añadir un gadget
Lo voy a añadir en Cross-Column 2, a continuación del gadget páginas.
Selecciono HTML/Javascript.
El diseño de la plantilla queda como se muestra a continuación,
A continuación hago clic sobre Editar, dentro del Gadget HTML/Javascript.
Se abrirá una ventana en la que voy a introducir código HTML encerrado entre las etiquetas <nav> y </nav> para indicar que se trata de un menú de navegación.
En el Título he puesto "Menú desplegable" y dentro de Contenido he pegado las siguientes líneas:
(antes de salir de la ventana de edición, hacer clic en Guardar).
<nav>
<ul>
<li><a href='URL de la página o etiqueta'>Página Inicio</a></li>
<li><a>Menu desplegable1</a>
<ul>
<li><a href='URL de la página o etiqueta'>Modulo 3</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 4</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 5</a></li>
</ul>
</li>
<li><a>Menu desplegable 2</a>
<ul>
<li><a href='URL de la página o etiqueta'>Modulo 6</a></li>
<li><a href='URL de la página o etiqueta'>Modulo7</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 8</a></li>
</ul>
</li>
<li><a>Más populares</a>
<ul>
<li><a href='URL de la página o etiqueta'>Modulo 9</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 3</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 7</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 8</a></li>
</ul>
</li>
</ul>
</nav>
<ul>
<li><a href='URL de la página o etiqueta'>Página Inicio</a></li>
<li><a>Menu desplegable1</a>
<ul>
<li><a href='URL de la página o etiqueta'>Modulo 3</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 4</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 5</a></li>
</ul>
</li>
<li><a>Menu desplegable 2</a>
<ul>
<li><a href='URL de la página o etiqueta'>Modulo 6</a></li>
<li><a href='URL de la página o etiqueta'>Modulo7</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 8</a></li>
</ul>
</li>
<li><a>Más populares</a>
<ul>
<li><a href='URL de la página o etiqueta'>Modulo 9</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 3</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 7</a></li>
<li><a href='URL de la página o etiqueta'>Modulo 8</a></li>
</ul>
</li>
</ul>
</nav>
Etiquetas listas no ordenadas <ul> <li>
<ul>_Crea listas no ordenadas y debe cerrarse con la etiqueta </ul>.
En este ejemplo la etiqueta <ul> (situada justo después de la etiqueta <nav>) y </ul> (justo antes de la etiqueta </nav>) delimita la lista no ordenada.
<li>_Determina cada elemento de una lista no ordenada. Debe cerrarse con </li> y se incluyen entre las etiquetas <ul> y </ul> de la lista no ordenada.
Si no existieran submenús o menús secundarios su estructura en el ejemplo sería la siguiente,
<nav>
<ul>
<li> A Menú principal – PAGINA INICIO </li>
<li> B Menú principal – MENU DESPLEGABLE1 </li>
<li> C Menú principal – MENU DESPLEGABLE2 </li>
<li> D Menú principal – MAS POPULARES </li>
</ul>
<nav>
Para determinar los menús secundarios o submenús es igual, se repite esta misma estructura (sin las etiquetas nav) pero dentro de las etiquetas <li> que correspondan a elementos (menús principales) que tienen anidados menús secundarios.
<nav>
<ul>
<li> A Menú principal – PAGINA INICIO </li>
<ul>
<li> B 1 Menú secundario - MODULO 3 </li>
<li> B 2 Menú secundario - MODULO 4 </li>
<li> B 3 Menú secundario - MODULO 5 </li>
</ul>
<li> B Menú principal – MENU DESPLEGABLE1 </li>
<li> C Menú principal – MENU DESPLEGABLE2 </li>
<li> D Menú principal – MAS POPULARES </li>
</ul>
<nav>
De esta forma se pueden añadir todos los niveles que sean necesarios.
Aplicar CSS a un menú de navegación desplegable horizontalmente
Una vez que está agregado el menú de navegación al blog, solo nos queda aplicar estilo CSS para darle un aspecto más atractivo y funcional.
Hacemos una copia de seguridad de la plantilla.
Plantilla → Editar HTML
Activamos el buscador con CTRL+F, buscamos </b:skin> y pegamos las siguientes líneas justo encima de </b:skin>.
/*Menu navegación desplegable
---------------------------------------------------------*/
nav { /*estilo para la caja contenedor de las listas de etiquetas menú*/
padding: 0px; /*relleno*/
border: 5px solid #cc0000; /*estilo borde caja contenedor*/
margin: -10px 0px 0px 0px; /*margen caja*/
}
nav ul { /*posición menús en caja contenedor*/
padding: 0px 0px 0px 10px !important; /*relleno*/
}
nav ul ul { /*oculta los submenús*/
display: none;
}
nav ul li:hover > ul { /*efecto hover sobre menú para dar visibilidad a los submenús*/
display: block;
}
nav ul a { /*estilo de las pestañas menú*/
color: #000000 !important; /*color con !important para no heredar el estilo gadget Páginas*/
font-family: leelawadee, arial, serif !important; /*tipo de letra*/
font-size: 16px !important; /*tamaño de letra*/
font-variant: small-caps !important; /*variante versalita del tipo de letra */
text-shadow: 0 1px 0 #cc0000; /*sombra del texto*/
background: linear-gradient(to top left, #CD6C0A 0%, #F2E8DE 115%); /*fondo degradado lineal de la pestaña menú*/
box-shadow: 1px 2px 3px rgba(139,69,19,0.50); /*sombra de la pestaña menú*/
margin: 10px 10px 10px 20px; /*margen pestaña menú*/
border-radius: 16px; /*borde pestaña menú redondeado*/
border-style: outset; /*estilo del borde*/
border-color: #7a7a0f; /*color del borde*/
border-width: 2px 0px 2px 1.5px; /*ancho del borde*/
list-style: none; /*los elementos de la lista no tienen marcadores*/
position: relative; /*posición relativa*/
left: 110px; /*posición izquierda definida*/
}
nav ul li:hover a { /*estilo efecto hover sobre cajas menús*/
background: linear-gradient(-15deg, #d9dde2 5%, #7a7a0f 35%); /*fondo degradado lineal*/
color: #E8E4C8 !important; /*color fuente*/
font-size: 15.4px !important; /*tamaño fuente*/
font-weight: 300 !important; /*grosor fuente*/
text-shadow: none; /*para no heredar el efecto sombra del menú*/
}
nav ul ul a { /*posición contenedor cajas submenú*/
position: relative; /*posición relativa*/
top: 0px; /*posición superior definida*/
left: 0px; /*posición izquierda definida*/
}
nav ul ul li { /*estilo y posición pestañas submenú*/
background: white;
}
nav ul ul li a { /*estilo pestañas submenú*/
background: linear-gradient(#FF8C07 15%, #000000 90%) !important; /*fondo degradado lineal*/
margin: 0px 0px 0px 0px !important; /*margen*/
text-shadow: 0 1px 0 gold !important; /*sombra del texto*/
}
nav ul ul li:hover a { /*estilo efecto hover sobre submenús*/
background: #E8E4C8 !important; /*fondo*/
color: #7a7a0f !important; /*color fuente*/
font-weight: 600 !important; /*grosor fuente*/
}
---------------------------------------------------------*/
nav { /*estilo para la caja contenedor de las listas de etiquetas menú*/
padding: 0px; /*relleno*/
border: 5px solid #cc0000; /*estilo borde caja contenedor*/
margin: -10px 0px 0px 0px; /*margen caja*/
}
nav ul { /*posición menús en caja contenedor*/
padding: 0px 0px 0px 10px !important; /*relleno*/
}
nav ul ul { /*oculta los submenús*/
display: none;
}
nav ul li:hover > ul { /*efecto hover sobre menú para dar visibilidad a los submenús*/
display: block;
}
nav ul a { /*estilo de las pestañas menú*/
color: #000000 !important; /*color con !important para no heredar el estilo gadget Páginas*/
font-family: leelawadee, arial, serif !important; /*tipo de letra*/
font-size: 16px !important; /*tamaño de letra*/
font-variant: small-caps !important; /*variante versalita del tipo de letra */
text-shadow: 0 1px 0 #cc0000; /*sombra del texto*/
background: linear-gradient(to top left, #CD6C0A 0%, #F2E8DE 115%); /*fondo degradado lineal de la pestaña menú*/
box-shadow: 1px 2px 3px rgba(139,69,19,0.50); /*sombra de la pestaña menú*/
margin: 10px 10px 10px 20px; /*margen pestaña menú*/
border-radius: 16px; /*borde pestaña menú redondeado*/
border-style: outset; /*estilo del borde*/
border-color: #7a7a0f; /*color del borde*/
border-width: 2px 0px 2px 1.5px; /*ancho del borde*/
list-style: none; /*los elementos de la lista no tienen marcadores*/
position: relative; /*posición relativa*/
left: 110px; /*posición izquierda definida*/
}
nav ul li:hover a { /*estilo efecto hover sobre cajas menús*/
background: linear-gradient(-15deg, #d9dde2 5%, #7a7a0f 35%); /*fondo degradado lineal*/
color: #E8E4C8 !important; /*color fuente*/
font-size: 15.4px !important; /*tamaño fuente*/
font-weight: 300 !important; /*grosor fuente*/
text-shadow: none; /*para no heredar el efecto sombra del menú*/
}
nav ul ul a { /*posición contenedor cajas submenú*/
position: relative; /*posición relativa*/
top: 0px; /*posición superior definida*/
left: 0px; /*posición izquierda definida*/
}
nav ul ul li { /*estilo y posición pestañas submenú*/
background: white;
}
nav ul ul li a { /*estilo pestañas submenú*/
background: linear-gradient(#FF8C07 15%, #000000 90%) !important; /*fondo degradado lineal*/
margin: 0px 0px 0px 0px !important; /*margen*/
text-shadow: 0 1px 0 gold !important; /*sombra del texto*/
}
nav ul ul li:hover a { /*estilo efecto hover sobre submenús*/
background: #E8E4C8 !important; /*fondo*/
color: #7a7a0f !important; /*color fuente*/
font-weight: 600 !important; /*grosor fuente*/
}
Selectores CSS aplicados al menú de navegación desplegable horizontalmente
{
Delante de la llave se sitúa el selector CSS correspondiente a un elemento de la página al que se le incluirá una declaración de regla.
nav {
Tras la apertura de llave se incluye la declaración de la regla correspondientes al selector CSS nav (menú de navegación) y que afectará a todo el menú de navegación.
nav ul {
La regla se aplicará a la posición de la caja que encierra a los menús principales (en el ejemplo, a los cuatro menús principales)
nav ul ul {
Hace referencia a la caja de los submenús anidados a un menú principal.
En el ejemplo se ha puesto como regla "display: none;" para evitar que se muestren los submenús antes de posicionar el ratón sobre el menú principal.
nav ul li:hover > ul {
Corresponde al efecto hover sobre los submenús, que permite que éstos se hagan visibles cuando el ratón se posiciona sobre el menú principal al que están anidados, aplicando la regla "display: block;".
nav ul a {
La regla que se incluya permitirá dar estilo a los enlaces que están incluidos dentro de la lista no ordenada principal.
nav ul li:hover a {
Efecto hover sobre los enlaces de los elementos de la lista no ordenada. En el ejemplo se corresponden con los enlaces de los menús principales.
nav ul ul a {
Se aplicará estilo a los enlaces de la lista no ordenada que se encuentra anidada a un menú principal.
nav ul ul li {
La regla definida se aplicará a todos los submenús o menús secundarios anidados a un menú principal.
nav ul ul li a {
Corresponde a los enlaces de los submenús o menús secundarios a los que podremos aplicar un estilo determinado y diferente al aplicado a los menús principales.
nav ul ul li:hover a {
Por último, podremos aplicar un estilo para el efecto hover cuando el ratón se posiciona sobre los submenús anidados a un menú principal.
!important;
Es una regla de estilo cuyo efecto es que se aplicará el estilo definido en el atributo y su valor para poder ser sobrescrito con otro estilo posteriormente. Muchas propiedades son hereditarias en CSS lo que permite no tener que estar definiendo reglas para cada uno de los elementos una y otra vez. Sin embargo en ocasiones queremos que un elemento de la página se muestre con diferente estilo de forma puntual, para eso debemos establecer una declaración de prioridad para indicar que determinada propiedad debe ser aplicada con independencia de los valores que pudiera tener establecidos genéricamente antes o después. En esas ocasiones debemos incluir !important tras los valores del atributo y justo antes del punto y coma.