Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

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.

Laube Leal dice...

Curioso este menú vertical, Jaime.
Por cierto, qué bonita te ha quedado la plantilla. Yo no consigo darle a la entrada reducida este aspecto. Lo del recuadro de "Leer más..." no consigo mejorarlo, ni reducirlo...
También me gustaría volver atrás en la plantilla, porque me gustaría que las entradas no fueran tan reducidas y que la foto fuera mayor, no tan chiquitina. Creo que me precipité al implementarla.
Si no es mucho pedir, cuando tengas un ratito, podrías echarme una manita??. Me gustaría señalar las opciones que tienes tú (Leer más-Comentar-Categoría o etiqueta), pero manteniendo los iconos de las redes sociales.
Te doy más la lata...
Un besote

Arturo. dice...

muy bueno, gracias por la explicacion. lo tengo en color verde oscuro y queda muy bien, recomendable!

Echevarria dice...

Sencillo y elegante ;)

PC Solutions dice...

Muy bueno, le dare uso en mi blog... Justo lo que andaba buscando. Gracias Jaime. Sos un grande. :((

Jaime Trujillo Escobedo dice...

Laube, según me ha parecido leer en tus otros comentarios, preferirías retirar el truco de leer más. Cuanto antes responderé tus otras consultas. Abrazos amiga.

Jaime Trujillo Escobedo dice...

¡Seguro que conjunta muy bien con tu plantilla, Arturo! Gracias por instalarlo.

Jaime Trujillo Escobedo dice...

Muchas gracias Echevarria.
Saludos compañero

Jaime Trujillo Escobedo dice...

Uff que carita más triste me has puesto, Arte Digital Design :P Disfruta del menú (no pude localizarlo en Arte Digital Design).

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo