Elegante menú vertical despegable

Artículo publicado en el Balcón de Jaime. Ver en su sitio original


Menú vertical desplegable en blogger

Hace tiempo publiqué como instalar un menú tipo acordeón con efecto deslizante en Blogger.
En ese menú, cada vez que el lector pasa el cursor sobre una pestaña, ésta se expande de forma automática, mostrando una imagen que describe la categoría.

Basándonos en la misma idea pero utilizando sólo CSS vamos a instalar un menú que despliega tantas pestañas como deseemos presentar.

Puede verse un ejemplo funcionando a continuación:



Tanto los colores de fondo del menú como el color del texto o el borde puede editarse, logrando así que conjunte sin problemas con cualquier plantilla.

Diseño>Edición de HTML>expandimos artilugios

Localiza la etiqueta </head> y añade estas líneas justo antes:

<style type='text/css'>
/* Color texto */
#blcnMenujteAcord ul li a{color:#000000;}
/* Color fondo principal */
#blcnMenujteAcord{background:#d2b583;}
/* Color fondo al pasar el cursor */
#blcnMenujteAcord ul li a:hover{background:#a5834a;}
/* Color del borde (debe incluirse dos veces) */
#blcnMenujteAcord ul li {border-bottom: 1px solid #a5834a;}
#blcnMenujteAcord{border:1px solid #a5834a;}
</style>
<link href='https://sites.google.com/site/estoesunejemplodeprojecto/archivadorcanciones/blcnAcordJteMenu.css' rel='stylesheet' type='text/css'/>

En el propio código se indican las funciones de cada atributo css.

Recuerda que para modificar el color debe reemplazarse su código (por ejemplo #d2b583) por uno de la tabla de colores.

Para personalizar el estilo de borde, conviene leer esta entrada.

Guarda la plantilla una vez hayas finalizado la edición.

Diseño>añadir gadget (elemento de página)>html-javascript

Pega este código en su interior:

<div id="blcnMenujteAcord">
<ul>
<li><a href="#">Pestaña 1</a></li>

<li><a href="#">Pestaña 2</a>
<ul>
<li><a href="#">Pestaña 2.1 </a></li>
<li><a href="#">Pestaña 2.2 </a></li>
<li><a href="#">Pestaña 2.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="#">Pestaña 3.1 </a></li>
<li><a href="#">Pestaña 3.2 </a></li>
<li><a href="#">Pestaña 3.3 </a></li>
</ul>
</li>

<li><a href="#">Pestaña 4</a>
<ul>
<li><a href="#">Pestaña 4.1 </a></li>
<li><a href="#">Pestaña 4.2 </a></li>
<li><a href="#">Pestaña 4.3 </a></li>
</ul>
</li>
</ul>
</div>

Sustituye en cada caso Pestaña X por el título de la pestaña que actuará como enlace para desplegar las sub-pestañas (Pestaña 1.1, Pestaña 1.2, etc).

La línea resaltada en color verde pertenece a la primera pestaña del menú, que a excepción de las otras, no despliega sub-pestañas (por tanto contiene un enlace).

La dirección web a la que conducirá cada pestaña debe introducirse en donde aparecen las almohadillas (#).

Para agregar más Pestañas 'generales', que no despliegan contenido, utiliza lo siguiente:

<li><a href="#">Pestaña 1</a></li>

Recuerda introducirlo siempre antes del cierre </ul>.

Si deseas aumentar la lista de sub-pestañas, utiliza líneas como esta:

<li><a href="#">Pestaña 2.2 </a></li>

Insértalas en el mismo grupo, antes del cierre </ul>.

Guarda el gadget una vez hayas terminado.