Menús deplegables estilo Google Chrome : Mundi Lima

Un sencillo script que genera unos bonitos menús con el estilo del famoso navegador Google Chrome, en donde podrás configurarlo para añadir distintas secciones con sus respectivos sub-menus.

Pero antes de meternos en el lio, haced una copia de seguridad de la plantilla, nunca se sabe lo que puede pasar.

Lo primero que deberéis hacer es descargaros el siguiente archivo (chromemenu.zip) que necesitareis durante todo el proceso.

En este zip encontraremos, chrome.js, chromestyleX.css, chromebg-overX.gif, chromebgX.gif, mientras que de los tres últimos encontraremos para cuatro estilos diferentes los cuales los podéis ver aquí (DynamicDrive), y en donde esta explicado en inglés como configurar el script.

Seguiremos por aquí paso a paso; tendréis que subir los archivos anteriores a algún servidor para poder usarlos en el blog, posteriormente deberéis incluirlos en la plantilla después de la etiqueta <head>:

<link rel="stylesheet" type="text/css" href="DIRECCION DEL ARCHIVO chromestyleX.css" />

<script type="text/javascript" src="DIRECCION DEL ARCHIVO chrome.js"></script>

Ya con el script cargado junto con la hoja de estilos (css), la forma de implementarlo en el blog es mediante el siguiente código:

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://mundilima.blogspot.com">Inicio</a></li>
<li><a href="#" rel="dropmenu1">Categorias</a></li>
<li><a href="#" rel="dropmenu2">Noticias</a></li>
</ul>
</div>

<!--1º menú desplegable -->
<div id="dropmenu1" class="dropmenudiv">
<a href="http://mundilima.blogspot.com/search/label/Juegos%20Flash?max-results=8">Juegos</a>
<a href="http://mundilima.blogspot.com/search/label/WTF?max-results=8">WTF!</a>
<a href="http://mundilima.blogspot.com/search/label/Wallpapers?max-results=8">Wallpapers</a>
</div>

<!--2º menú desplegable -->
<div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
<a href="http://mundilima.blogspot.com/search/label/Curiosidades?max-results=8">Curiosidades</a>
<a href="http://mundilima.blogspot.com/search/label/HTML?max-results=8">HTML</a>
<a href="http://mundilima.blogspot.com/search/label/Humor?max-results=8">Humor</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome("chromemenu")
</script>

Ahora nos dedicaremos a analizar el código anterior por si vosotros queréis darle una organización diferente y obviamente para que cambiéis las direcciones que os interesen.

En primer lugar, entre las etiquetas <ul> y </ul> se encuentran declaradas las secciones en las que dos de ellas son sub-menús (dropmenu1 y dropmenu2), si deseáis añadir mas secciones tanto de un tipo como de otra deberéis duplicar las que correspondan entre esas etiquetas.

En segundo lugar se encuentra definido los sub-menús, obviamente la otra sección no es necesaria dado que no es de este tipo sino que es un sección con enlace directo. Podéis ver el ejemplo en el enlace anterior para que os hagáis una idea a lo que me refiero.

Los sub-menús están estructurados de la siguiente forma, son etiquetas <div> con sus respectivos id (identificadores), que ya los vimos antes declarados en la primer parte, y el resto son simplemente enlaces. Con esto imagino que os sera sencillo identificar donde debéis poner la url de vuestra sección y su titulo respectivo. Lo único que si quieres añadir o reducir el numero de sub-secciones, solo debéis cambiar el numero de enlaces según que fin.

Una ultima cosa a destacar es que a partir del segundo sub-menú incluido este, deberéis agregar la propiedad style="width: 150px;" en el estilo que regulara el ancho del mismo, para así no crear solapamientos en las distintas secciones. Podéis verlo en el código en el segundo sub-menú como esta implementado.

Y si queréis añadir mas de una barrita de estas, para ello, fijaros que al final encontrareis una función en JavaScript llamada cssdropdown.startchrome(), bien pues lo único que hay que hacer para añadir mas barritas es duplicar las variables para cada una de las barras con un numero distinto, algo como lo siguiente:

<script type="text/javascript">
cssdropdown.startchrome("chromemenu", "chromemenu2")
</script>

Para terminar deciros que las barras pueden estar justificadas a la izquierda, al centro o a la derecha, solamente hay que configurarlo abriendo el archivo chromestyleX.css con el editor de texto y buscar el siguiente atributo:

text-align: center;

Por defecto se mostrara en el centro, pero podemos asignarle diferentes valores, left para la izquierda y right para la derecha.

Bueno espero que les guste y os sea de utilidad, para cualquier duda comentarla que os ayudaremos encantados.