Como crear un menú con submenús y sub-submenús como el de Tuneando el blog

Como os prometí cuando añadí aquel menú a mi blog, voy a explicaros como crear vuestro propio menú.

Para hacer esta demostración he usado uno de los ejemplos que suelo utilizar más a menudo, un blog de cocina.

Imagina que tienes un blog de cocina en el que vas añadiendo recetas según se te ocurren.
Cada receta pertenece a diversos grupos, puede ser un primero, o un segundo o un postre, y dentro de cada uno de esos grupos puede ser carne, pescado, verdura, arroz, etc.
Así que tu explicas la receta de, por ejemplo una sopa de cebolla y la etiquetas correctamente, ya que es un primer plato, pero también es una sopa.

En tu lista de etiquetas saldrá englobada en ambas, por supuesto.

Pero aquí se trata de hacer ese menú que habeis podido ver en Tuneando el blog, así que, sin más demoras, vamos allá.

En primer lugar has de entrar en la página de Pure CSS menú.

Una vez allí verás un menú ya montado, que tiene este aspecto:

Como puedes ver, a la izquierda tienes unos botones, del que uno ya está expandido.
En esta imagen lo está el que corresponde a la fuente que vas a usar en tu menú y a los colores que éste va a tener. Son los Parameters.

Puedes modificarlo ya ahora, o dejar la personalización para el final.

De todos modos, voy a contarte ya como hacerlo y como se ve.
Esto es lo que sale por defecto:

Modificando la fuente, y marcando Bold e Italic, para que salga en negrita y en cursiva, así se verían las letras del menú:

También podrías modificar los colores, pero esto, como admite muchas combinaciones, lo dejo para que lo investigues tu mism@.

Sigamos.
Vamos a ver que hay en Items.
Desplegando ese botón verás esto:

O sea, la lista del menú que hay por defecto, más unos botones, que nos van a servir para añadir items, (cada enlace es un ítem), o quitarlos, si no los necesitamos.

Así el primer botón nos sirve para añadir un item:

Y como puedes ver, si no marcas antes donde va a ir, se coloca al final de la lista.

Y así se ve en el menú de muestra:

Fíjate que los items nuevos, a diferencia de los que ya había, tienen un número.
Puedes añadir tantos como quieras, pero ¡cuidado! a partir del 51 le cuesta un poco recargar la página. Ten paciencia.

Como no necesitamos ése ítem para nada lo eliminaremos, dándole al último botón:

Por supuesto has de tener marcado qué item quieres eliminar. (Se marcan pinchando en ellos en esa lista lateral).

Si el nuevo item lo quieres añadir en algún sitio concreto de la lista, has de marcar el que va a estar justo encima del nuevo y pinchar en Add next item (añadir el siguiente ítem)

Y como puedes ver, el siguiente se habrá añadido justo al final del marcado.

Y aquí puedes verlo en el menú de muestra.

Si lo que quieres es añadir un sub-item, has de marcar el item principal y pinchar en Add Subitem.

El cual se añadirá al final de los que haya.

Pero si lo que quieres es que ese nuevo sub-ítem sea lo sea de un sub-item, marca el sub-ítem del que vaya a desplegarse

Y verás que se añade debajo del marcado, pero no como sub-item del principal, sinó del que has marcado

Y en el menú de muestra lo verás así:

¡Bien! Visto lo anterior, vamos a ver como configurar tus propios enlaces en ese menú.

Para empezar marca el primer enlace, el que dice Pure CSS menú y en la parte de abajo, donde están los items parameters, cambia lo que haya en la primera casilla, por, por ejemplo, Inicio, para crear ahí el enlace para volver a tu página principal y añade la url de tu blog en la casilla Link

Como puedes ver, hay más casillas.
Tip indica si se va a ver algo al poner el ratón encima del enlace, Target indica si ese enlace se va a abrir en la misma ventana o en otra.

Esto es muy práctico, pues te permite escoger donde abrir cada enlace, ya que en algunos casos, si el enlace es a tu propio blog, no hace falta que se abra en otra ventana, en este caso pinha en self, pero si estás enlazando otro blog o página, es interesante que se abra en otra ventana, así no echas a nadie del blog En este caso pincha en blank.

Una vez acabado de colocar el enlace, pincha en cualquier sitio de la página y recargará. Al hacerlo ya verás tu enlace ahí

Y como puedes ver, poniendo el ratón encima del enlace recién creado, se ve el Tip que le había añadido

¡Bien! Vamos a empezar con los enlaces con sub-enlaces.

Sigo con el ejemplo del supuesto blog de cocina.
Ahora quiero mostrar las recetas del blog de forma ordenada y además el índice de recetas que he añadido al final del blog.
Para ello usaré el segundo ítem, pero ¿cual ha de ser el enlace del ítem?
Pues NINGUNO.
No es necesario que haya un enlace para que se desplieguen los sub-items, puedo usar solo una palabra que indique lo qué puede haber ahí y como lo que hay en este blog imaginario son recetas de cocina, marco el segundo Item, para que se coloque en la parte de abajo y simplemente le cambio el Texto de Product info por Recetas.

A continuación he marcado el primer sub-item y lo he modificado poniendo la url de ese supuesto índice. (La url de la entrada donde está ese índice).

Y aquí puedes ver como se vería.

Vamos ahora con las recetas por grupos. Y para no obligar a nadie a ver todos los primeros platos, simplemente usaré esas palabras para que se desplieguen todos los sub-enlaces que se puedan necesitar.

Marco, pues, el siguiente sub-item de la lista, Menú Features, y lo convierto en un Primeros platos.

Y el primer sub-sub-item lo convierto en Sopas, y aquí si que pongo URL. La de la etiqueta de sopas que tengo en el blog.

Pero como hay varios tipos de sopas y soy muy concienzuda, también he separado las sopas por categoría, así que le añado un sub-item a este sub-item de las sopas, para que quien lo desee pueda ver solo, por ejemplo, las sopas de verduras.

Y tras, haber colocado en la zona de los item parameters el nombre, el enlace y el texto que se verá al poner el ratón encima,

este es el aspecto del menú hasta este momento.

Como puedes ver, ya había añadido más sub-sub-items para poner el resto de variedades de sopas que pueda haber, sopas de pescado, sopas de carne, etc.

Vamos a ver como está quedando hasta ahora. Cierro los enlaces, pinchando en los simbolos - de los items principales y este es el aspecto que tiene hasta este momento, sin desplegar.

Y así podría haber seguido añadiendo los demás sub-enlaces (o sub-items), correspondientes a los demás grupos de platos, segundos, postres, etc, y los correspondientes sub-sub-items, o sub-sub-sub-items para ir separando todas las entradas por categorías lo más razonables posibles.

Recuerda: Cada uno de esos enlaces, en este caso concreto, se refieren a entradas del blog, y las direcciones a colocar son las de las etiquetas que engloban esas entradas.

Si lo que quieres es enlazar blogs o páginas, dependerá de tus necesidades que uses más o menos sub-items.

Vamos a ver ahora como personalizar el menú en cuanto a colores.

En la parte baja de la columna de la izquierda, tienes el botón templates, que muestra esto:

Pinchando en alguna de las muestras, podrías ver qué aspecto tendría tu menú.

El ejemplo que te dejo, es el del menú vertical.

Una vez que hayas terminado de personalizarlo, que hayas decidido qué modelo te gusta, que hayas borrado/eliminado todos los items que había de serie y que no hayas usado, ¡en fin! que el menú que puedas ver en la propia página esté a tu entera satisfacción, pincha en ese Download

Se abrirá la ventanita de descargas y te preguntarán si quieres guardar ese archivo, aceptas y decide en qué carpeta de tu pc se va a guardar.

El archivo estará en formato ZIP. Tendrás que descomprimirlo.
Una vez abierto verás que hay varios archivos. Uno es el código que has de copiar y pegar en un gadget HTML.

Tendrás que abrirlo con el Bloc de notas ya que es el único programa que viene de serie con Windows que abre este tipo de archivos.

También verás unos archivos de imágenes. Todos tienen un nombre concreto.

Estas imágenes has de subirlas a tu servidor, y luego, una vez copiado el código en el gadget, antes o después de guardar, localizar las direcciones sin url real donde van a ir las de las imágenes.

Son las flechitas que indican que ese item es desplegable.

Colocas las url que le haya dado tu servidor, en los lugares correspondientes, (lo verás pues está el nombre de la imagen que va ahí) y ya está. Ya tienes tu menú con sub-menús y sub-sub-menus.