Añadir un menú con submenús al blog

Muchos desarrolladores web dicen que el uso de menús desplegables es una mala práctica, ya que pueden ser confusos, molestos y muchas veces poco funcionales. Pero desde mi punto de vista, un menús desplegables es una excelente opción, ya que ayuda a limpiar una concurrida web, ordenándola al mismo tiempo. Si está estructurado correctamente, un menú desplegable puede ser una gran herramienta de navegación, sin dejar de ser útil, atractivo, y funcional en cuanto a su diseño.

Para crear un menú desplegable como el que utilizo yo sólo hay que hacer lo siguiente:

1. Añadir el código CSS necesario.
   
   Este código contiene la configuración de nuestro menú (colores, bordes, tamaño,...). Para añadirlo vamos a Personalizar, y luego a Diseño-->Edicion de HTML. Manteniendo desmarcada la opción Expandir plantillas de artilugios, vamos al código y buscamos la siguiente línea:
   

   ]]></b:skin>

   Justo antes de dicha línea añadimos el siguiente código:

   #subnavbar
   {
      width: 100%;                 /* Ancho absoluto de la barra de menu */
      height: 27px;                /* Alto de la barra de menu */
      font-weight:bold;            /* Letras en negrita en la barra de menu */
      color: #FFFFFF;              /* Color de la barra de menu */
      margin: 0px;                 /* margenes exteriores de la barra de menu */
      padding: 0px;                /* margenes interiores de la barra de menu */
      font-family:"Trebuchet MS";  /* Tipo de letra a usar */
   }
   #subnav
   {
      margin: 0px;                 /* margenes exteriores de cada elemento que pertenece al menu */
      padding: 0px;                /* margenes interiores de cada elemento que pertenece al menu */
   }
   #subnav ul
   {
      float: left;                 /* indica que se alinee el conjunto de botones de la barra de menu a la izquierda */ 
      list-style: none;            /* Evita que se utilice en el conunto de botones de la barra de menu las propiedades establecidas por defecto definidas para las listas */ 
      margin: 0px;                 /* margenes exteriores del conjunto de botones de la barra de menu */
      padding: 0px;                /* margenes interiores del conjunto de botones de la barra de menu */
   }
   #subnav li
   {
      float: left;                 /* Indica que se alinee cada botón de la barra de menu a la izquierda (así todos los botones estarán juntos) */ 
      list-style: none;            /* Evita que se utilicen, en cada botón de la barra de menu, las propiedades establecidas por defecto para las listas */ 
      margin: 0px;                 /* margenes exteriores de cada botón de la barra de menu */
      padding: 0px;                /* margenes exteriores de cada botón de la barra de menu */
   }
   #subnav li a, #subnav li a:link, #subnav li a:visited
   {
      color: #FF5555;              /* Color de letras utilizado para cada botón de la barra de menu que posee un enlace */
      display: block;              /* Cada botón de la barra de menu que posee un enlace será tratado como un elemento "de bloque" (y no como elemento "en línea") */
      font-size: 12px;             /* Tamaño de la fuente para cada botón de la barra de menu que posee un enlace */
      margin: 0px 0px 0px 0px;     /* Margenes exteriores para cada botón de la barra de menu que posee un enlace */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón de la barra de menu que posee un enlace */
      border:3px outset $bordercolor;/* Borde para cada botón de la barra de menu que posee un enlace */
      background: $bordercolor;    /* Color de fondo para cada botón de la barra de menu que posee un enlace */
   }
   #subnav li a:hover, #subnav li a:active
   {
      background: #9782FF;         /* Color de fondo para cada botón de la barra de menu que posee un enlace y esté seleccionado */ 
      color: #000000;              /* Color de letras utilizado para cada botón de la barra de menu que posee un enlace y esté seleccionado */
      display: block;              /* Cada botón de la barra de menu que posee un enlace y esté seleccionado será tratado como un elemento "de bloque" (y no como elemento "en línea") */
      text-decoration: none;       /* En cada botón de la barra de menu evita las decoraciones por defecto para enlaces (subrayado del enlace, cambio del color de letra,...)
      margin: 0px 0px 0px 0px;     /* Margenes exteriores para cada botón de la barra de menu que posee un enlace y esté seleccionado */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón de la barra de menu que posee un enlace y esté seleccionado */
   }
   #subnav li ul
   {
      z-index: 9999;               /* Superpone el conjunto de botones desplegables de nivel 1 por encima del menú de nivel 0 (o barra de menú) para que en caso de que se "monte" encima, prevalezca a la vista el menu de menor nivel */
      position: absolute;          /* La capa donde se sitúa el conjunto de botones desplegables de nivel 1 no forma parte del flujo natural de la página web (no modifica la posición del resto de elementos) */ 
      left: -999em;                /* Desplaza el conjunto de botones desplegables de nivel 1 -999 veces el tamaño de la fuente actual hacia la izquierda */
      height: auto;                /* Ajusta el alto del conjunto de botones desplegables de nivel 1 según la cantidad de elementos (botones) que haya en su interior */ 
      width: 180px;                /* Ancho del conjunto de botones desplegables de nivel 1 */
      margin: 0px;                 /* Margenes exteriores para el conjunto de botones desplegables de nivel 1 */
      padding: 0px;                /* Margenes exteriores para el conjunto de botones desplegables de nivel 1 */
   }
   #subnav li ul a
   {
      width: 180px;                /* Ancho del conjunto de botones desplegables de nivel 1 que posee un enlace */
   }
   #subnav li li a, #subnav li li a:link, #subnav li li a:visited
   {
      background: $bordercolor;    /* Color de fondo para cada botón del menu desplegable de nivel 1 que posee un enlace */ 
      width: 180px;                /* Ancho de cada boton del menu desplegable de nivel 1 que posee un enlace */ 
      heigth: 270px;               /* Alto máximo de cada boton del menu desplegable de nivel 1 que posee un enlace */ 
      float: none;                 /* Cada botón del menu despelgable de nivel 1 que posee un enlace se colocará bajo el anterior (no "flota hacia la izquierda") */ 
      margin: 0px;                 /* Margenes exteriores para cada botón del menu desplegable de nivel 1 que posee un enlace */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón del menu desplegable de nivel 1 que posee un enlace */
   }
   #subnav li li a:hover, #subnav li li a:active
   {
      background: #9782FF;         /* Color de fondo para cada botón del menu desplegable de nivel 1 que posee un enlace y esté seleccionado */ 
      margin: 0px;                 /* Margenes exteriores para cada botón del menu desplegable de nivel 1 que posee un enlace y esté seleccionado */
      padding: 5px 10px 5px 10px;  /* Margenes interiores para cada botón del menu desplegable de nivel 1 que posee un enlace y esté seleccionado */
   }
   #subnav li ul ul
   {
      margin: -25px 0 0 161px;     /* Margenes exteriores para cada conjunto de botones desplegables de nivel 2 */
   }
   #subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul
   {
      left: -999em;                /* Desplaza el conjunto de botones desplegables de nivel 2 y 3 -999 veces el tamaño de la fuente actual hacia la izquierda */
   }
   #subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul
   {
      left: auto; 
   }
   #subnav li:hover, #subnav li.sfhover
   {
      position: static;
   }
   

   Si nos fijamos detenidamente en el código añadido, se pueden distinguir los campos en los que se indican colores, bordes, anchos y otras configuraciones a usar. Recomiendo probar a cambiar estas configuraciones cuando se acabe de montar el menú en la web (antes no, o no sabremos que hicimos mal si nos equivocamos).
   
   
2. Añadir el código HTML necesario.
   
   Este código contiene las pestañas y subpestañas que forman nuestro menú (en mi caso: INICIO, MIS ARTICULOS POR CATEGORIAS, Informática, Cosillas de interés para boqueros,...), así como también indica a donde enlazan cada pestaña (o sub-pestaña).
   
   Para añadirlo también vamos a Personalizar, y luego a Diseño-->Edicion de HTML, manteniendo desmarcada la opción Expandir plantillas de artilugios.
   
   Vamos al código y buscamos el lugar donde deseamos incluir el menú. Por ejemplo, para colocarlo justo encima del cuerpo principal del blog (entre la cabecera y los artículos) buscamos la siguiente línea:

   <div id="main-wrapper">

   Y justo antes de dicha línea añadimos el código:

   
   <div id="subnavbar">
      <ul id="subnav">
         <li><a href="http://elblogdeelsant0.blogspot.com/" title="Inicio">INICIO</a></li>
         <li><a href="URL_ENLACE_PESTAÑA1" title="DESCRIPCION_PESTAÑA1">PESTAÑA1</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA1-1" title="DESCRIPCION_SUB-PESTAÑA1-1">SUB-PESTAÑA1-1</a></li>
               <ul>
                   <li><a href='URL_ENLACE_SUB-PESTAÑA1-1-1' title='DESCRIPCION_SUB-PESTAÑA1-1-1'>SUB-PESTAÑA1-1-1</a></li>
                   <li><a href='URL_ENLACE_SUB-PESTAÑA1-1-2' title='DESCRIPCION_SUB-PESTAÑA1-1-2'>SUB-PESTAÑA1-1-2</a></li>
               </ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA1-2" title="DESCRIPCION_SUB-PESTAÑA1-2">SUB-PESTAÑA1-2</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA1-3" title="DESCRIPCION_SUB-PESTAÑA1-3">SUB-PESTAÑA1-3</a></li>
            </ul>
         </li>
         <li><a href="mailto:" title="Enviame un email">CONTACTO</a></li>
         <li><a href="URL_ENLACE_PESTAÑA2" title="DESCRIPCION_PESTAÑA2">PESTAÑA2</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA2-1" title="DESCRIPCION_SUB-PESTAÑA2-1">SUB-PESTAÑA2-1</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA2-2" title="DESCRIPCION_SUB-PESTAÑA2-2">SUB-PESTAÑA2-2</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA2-3" title="DESCRIPCION_SUB-PESTAÑA2-3">SUB-PESTAÑA2-3</a></li>
            </ul>
         </li>
         <li><a href="URL_ENLACE_PESTAÑA3" title="DESCRIPCION_PESTAÑA3">PESTAÑA3</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA3-1" title="DESCRIPCION_SUB-PESTAÑA3-1">SUB-PESTAÑA3-1</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA3-2" title="DESCRIPCION_SUB-PESTAÑA3-2">SUB-PESTAÑA3-2</a></li>
            </ul>
         </li>
         <li><a href="URL_ENLACE_PESTAÑA4" title="DESCRIPCION_PESTAÑA4">PESTAÑA4</a>
            <ul>
               <li><a href="URL_ENLACE_SUB-PESTAÑA4-1" title="DESCRIPCION_SUB-PESTAÑA4-1">SUB-PESTAÑA4-1</a></li>
               <li><a href="URL_ENLACE_SUB-PESTAÑA4-2" title="DESCRIPCION_SUB-PESTAÑA4-2">SUB-PESTAÑA4-2</a></li>
            </ul>
         </li>
      </ul>
   </div>

   Este es el código a añadir para el menú, independientemente del lugar donde deseemos situarlo y de la configuración de forma, color, bordes y otros que queramos darle. En dicho código sólo hay que sustituir:
   • cada URL_ENLACE_PESTAÑA por la URL hacia donde deseamos que enlace al pulsar dicha pestaña (o subpestaña). En caso que queramos que una pestaña (o subpestaña) determinada no enlace a ningun sitio, su URL_ENLACE_PESTAÑA correspondiente la dejamos en blanco.
   • cada DESCRIPCION_PESTAÑA por una breve descripción que se mostrará al parar el mouse sobre la pestaña (para las pestañas con subpestañas, al desplegarse éstas automáticamente, el mensaje no será mostrado).
   • cada PESTAÑA por el nombre que queremos que tenga dicha pestaña.
   Además se pueden añadir o eliminar tantas pestañas y subpestañas como deseemos. Tan sólo hay que seguir el patrón del código añadido. Fijaros en como está construido:
   • El contenido de las pestañas que no van a incluir subpestañas, va incluido entre <li> y </li>.
     Por ejemplo:

     <li><a href='http://elblogdeelsant0.blogspot.com/' title='Inicio'>INICIO</a></li>

   • El contenido de la pestaña que incluirá subpestañas irá incluido entre <li> y &l;tul>, a continuación estarán las subpestañas (cada una incluida entre <li> y </li>) y para cerrar terminaremos con </ul> y </li>.
     Por ejemplo:

     <li>
        <a href="" title="">PESTAÑA3</a>
        <ul>
           <li><a href="" title="">SUB-PESTAÑA3</a></li>
           <li><a href="" title="">SUB-PESTAÑA3</a></li>
        </ul>
     </li>
     

3. Rellenar el menú con los campos que deseemos.
   
   Tal y como se indicó en los dos punto anteriores, añadimos las pestañas y subpestañas que deseemos y damos el formato que más nos guste.

Disfrutad del menú.


Salu2,
elSant0

ALGUNOS ARTICULOS RELACIONADOS