OCULTAR MENU LATERAL >>

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

15 comentarios:

C B Alcanar dijo...

Como se añadiria un subsubmenú dentro de un submenú?

Se podria añadir al codigo editado que nos has mostrado???

Ya tengo editado el objeto pero no puedo mostrar el segundo submenú

elSant0 dijo...

Supongo que te refieres a añadir un 4 nivel. Es decir, en mi menú hay:

A.- Una barra de pestañas (P.ej.: "MIS ARTICULOS POR CATEGORIAS").
B.-Un menú desplegable por cada pestaña (P.ej.: "Informática").
C.- Un menú para cada apartado de los menús desplegables (P.ej.: "Cosillas de interés para blogueros").

Entiendo que deseas añadir un submenú más. Esa opción es algo más complicada, porque hay que desplegarlo en la zona de página que queda libre y es fácil que quede fuera de márgenes. Además la porción de código a añadir es algo extensa.

si aun así estás interesado dímelo e intentaré ayudarte.

Salu2

Pavimentos Santa Olaja-Tfno 979 894060 dijo...

He colocado el menú con el submenú y me funciona perfectamente cuando veo la página con cualquier navegador, Mozilla, Google Chrome, Apple Safari, pero si lo hago con INTERNET EXPLORER, las subpestañas se sitúan por debajo de las otras entradas y por tanto no permite pinchar en ellas ni ver su contenido. Si me aportas una solución a este problema te estaré muy agradecido.

elSant0 dijo...

Pavimentos Santa Ojala@ El problema que surge con Internet Explorer es complejo. Proviene de las incompatibilidades del mismo con respecto a los estándares actuales.

Cuando se puso en el mercado IE6 (padre de las versiones más actuales) era líder absoluto en la red (llegó al 95% de cuota de mercado). El navegador venía integrado con Windows y los fabricantes de PCs estaban prácticamente obligados a instalar tanto uno como otro. Ante una situación que se prometía estable, muchas empresas desarrollaron aplicaciones corporativas de todo tipo sobre esta plataforma, sin tener en cuenta que no respetaba más estándares que los suyos propios. IE6 carece de soporte para cuestiones básicas como CCS2 o transparencias PNG, además de ser un desastre absoluto en términos de seguridad y de impedir completamente el avance hacia los nuevos estándares comprendidos en HTML 5. Con las versiones posteriores esas incompatibilidades se han ido limando progresivamente por la presión que ha ejercido la competencia (Firefox, Opera, Chrome, Safari,...), pero no han llegado a solucionarse del todo por la privativa política de Microsoft.

Explicado eso, decirte que para IE6 nunca va a funcionar correctamente este menú (ni muchos otros elementos encontrados por la red) e incluso desaconsejo totalmente el uso de ese navegador. Para IE7, IE8 e IE9 los únicos problemas que he detectado en el menú se pueden solucionar poniendo el grosor de los bordes de los botones a valor 0px.

Lo siento, porque quizás no sea la respuesta que buscabas. Pero hay poco que hacer cuando Microsoft se empeña en imponer sus propios métodos y se desmarca de los establecidos por la mayoría. Mantener el soporte a IE6 supone un verdadero quebradero de cabeza para programadores y diseñadores, tiene un elevado coste, o se convierte ya en prácticamente imposible.

Salu2
PD: La web te está quedando muy bien.

Unknown dijo...

Me pasa exactamente lo mismo que a CB Alcanar, quiero crear un submenú dentro a su vez de un submenú, como haces en tu subpestaña de informática. ¿Cómo lo haces?

elSant0 dijo...

Cincho y Chasca@ He modificado un poco el post para que se entienda mejor como conseguir aquello que pides. Ahora el código está un poco más comentado y hay ejemplos de submenú dentro de submenús.
Espero que te sirva ;)

Salu2

txusberr dijo...

Hola

He instalado el menu pero tengo un problema

En la pestaña 1, tengo tres subpestañas (1-1, 1-2 y 1-3) Si en la subpestaña 1-1 pongo cuatro subpestañas !1-1-1, 1-1-2, 1-1-3 y 1-1-4) en la pagina del blog solo me salen tres subpestañas (1-1-1, 1-1-2 y 1-1-3) osea tantas como subpestañas 1-x.
Me puedes ayudar?

Saludos y gracias

elSant0 dijo...

Hola txusberr. Lo que te pasa es un tanto curioso y a priori no se me ocurre ningún motivo para que pase.

Si quieres mándame el código de tu plantilla por correo y le doy un vistazo ;)

Salu2

txusberr dijo...

Hola

En mi plantilla no existe la division "main-wrapper". Tengo el menu en un gadget html/javascript en los elementos de la pagina.
Puede ser algo de eso?

Gracias de nuevo

elSant0 dijo...

txusberr@ el elemento "main-wrapper" no es necesario para hacer funcionar el menú; de hecho, si te fijas yo pongo el menú justo antes de comenzar "main-wrapper".

Pero sí es importante que compruebes si el menú funciona correctamente fuera del gadget html/javascript. Blogger impone ciertas variables y configuraciones CSS que, aunque no son visibles en nuestra plantilla, son usadas. Puede que alguna de esas configuraciones relacionadas con el gadget html/javascript esté afectando a la construcción del menú.

También es importante que el código CSS lo añadas en el lugar correspondiente, ya que sino puede que no sea interpretado.

Lidia dijo...

elSanto; podrías decirme que valor he de modificar de padding para que me funcione toda la barra? y que no se me quede la última pestaña sin funcionar? Mi barra mide 1025px, igual es demasiado? Gracias!

elSant0 dijo...

Lidia@ Si la barra mide 1025px de ancho entonces debes asegurarte que el div donde se incluye tiene al menos ese ancho. Al ver tu menú creo que la última parte queda fuera del div (y por tanto no funcional).

Puedes comprobar si el problema es el ancho del menu (y no de la pestaña que está fallando) reduciendo el ancho de las otras pestañas para que esa última quede dentro de los márgenes y relleno establecidos.

C-BasS dijo...

hola. como hago para agregar un submenu a un menu ya hecho? mira el menu de mi blog formainforme.blogspot.com (no quiero cambiar el diseño de mi menu)

Anónimo dijo...

Hola, he creado el menu con 6 pestañas, y dentro de 3 de ellas, 4 subpestañas en cada una, mi problema es que al intentar pulsar enla subpestaña 3 o 4 de cada una de ellas las subpestañas desaparecen sin abrirse nada. Como podria solucionarlo?

freison lozano asprilla dijo...

gracias por la ayuda de tu blogs me fue muy util

Publicar un comentario

Escribe aquí tus valoraciones, dudas, sugerencias,... Son sólo unos instantes y ayuda a mejorar el blog.