Menú desplegable en Blogger

En Blogger y en cualquier web, pero vamos a ver cómo incluir uno de estos menús desplegables en este sistema de bitácoras. El menú es justamente como el que tenemos arriba en este blog. Hay cientos de script por la red. Tan sólo tienes que buscar en Google "drop down menu" y aparecerán cientos de sitios ofreciéndote su menú desplegable. Unos de pago, otros gratuitos, unos accesibles, otros no tanto, de todo.

Concretamente el que tenemos en este blog es el "Chrome CSS Drop Down Menu". Escogimos este por ser bastante bonito, accesible y fácil de modificar. Si ya te has bajado el chromemenu.zip, descomprímelo en un directorio cualquiera de tu PC y empecemos a retocarlo.

El fichero demo.htm nos servirá para ver cómo quedará el menú antes de ponerlo en nuestro blog. Lo abrimos con nuestro editor de código preferido (bloc de notas, dreamweaver, homesite, etc) y echamos un vistazo. Veremos varias etiquetas div, la primera es donde indicamos el primer nivel, es decir, las secciones que aparecerán nada más cargar el menú, sin que el usuario haga nada. Actuamente vemos Home, Resources, News y Search. Podemos cambiarlas por nuestras secciones principales, teniendo en cuenta que la primera, 'Home', no es una sección, es un link que va a la página principal de nuestra web y por lo tanto no se desplegará.

A continuación del div que contiene las secciones principales, vemos 3 divs más, uno por cada sección principal. Eso significa que si en el primer div de estos cuatro ponemos los textos que queramos, éstos aparecerán al pasar el ratón por encima de la primera sección que habremos definido en el primer div, la primera sección que hayamos definido aparte de 'Home'.

Por si no queda del todo claro, vamos a hacer un ejemplo. Supongamos que queremos hacer un menú con las siguientes secciones:

- Inicio

- Manga
-- Shojo
-- Shonen
-- Yaoi

- Anime
-- Japonés
-- Japonés (Subs en Inglés)
-- Japonés (Subs en Castellano)
-- Inglés (Subs en Castellano)
-- Castellano

- Música
-- OST Animes
-- JPop

Inicio, Comics, Anime, Música los pondríamos en en el primer div, ya que son las secciones principales. El resto de subsecciones habría que distribuirlas en los tres divs siguientes. Puedes ver el código del ejemplo completo aquí.

Una vez tienes la estructura de menú que quieres puedes intentar cambiar el archivo de tema. Por el principio del código verás algo como:

"chrometheme/chromestyle.css"

Puedes cambiarlo por "chrometheme/chromestyle2.css", "chrometheme/chromestyle3.css" o "chrometheme/chromestyle4.css" y dejar el que más te guste.

Ahora llega la hora de poner el código en tu página. Necesitarás algún lugar donde subir las imágenes y el css, es decir, necesitas un lugar donde poder subir las carpetas "chrometheme" y "chromejs". Cualquier hosting gratuito como iespana o mi@ te pueden servir.

Una vez subidos los archivos tienes que incluir el código en tu blog tal como se indica aquí.

Eso es todo.

¡Cualquier problema podéis indicarlo en los comentarios!

by Nenillo

Del Blog de Uchiha