Cómo poner un menú desplegable

3.6.15



En muchos blogs las pestañas necesarias en un menú son muchas más de las que caben en una línea.

Te lo digo antes de que lo puedas pensar: Un menú de dos líneas es horroroso!

Es antiestético, nada elegante y poco profesional.

Te enseño a poner un menú desplegable sin que se difícil.


Primero de todo tienes que hacer seguir al pie de la letra este tutorial que te servirá para poner un menú cualquiera.


Añadir subpestañas en el menú


Ya tienes el menú añadido.

Ahora le pondremos subpestañas en la pestaña que quieras.


  1. Entra en diseño del menú lateral de Blogger

  2. Edita el gadget donde has añadido tu menú (el el gadget HTML que tienes debajo de la cabecera).


  3. Ahora debes añadir el siguiente código en la pestaña que quieras poner las subpestañas.



    <li><a href="#">TITULO_PESTAÑA_QUE_TENDRA_SUBMENÚ</a>  
       <ul>      
           <li><a href="SUB_URL_1">TÍTULO_SUB_1</a></li>
           <li><a href="SUB_URL_1">TÍTULO_SUB_2</a></li>
           <li><a href="SUB_URL_1">TÍTULO_SUB_3</a></li>
       </ul>
    </li>



    Seguro que lo ves mejor con un ejemplo de los pasos.



    • Este es el código que tenías en el gadget del menú del tutorial previo a este.

    • Vamos a poner las subpestañas en la segunda pestaña del menú. Lo que tienes que hacer es borrar la linea correspondientes a esta pestaña.<>

    • En su lugar poner el código de más arriba, que corresponde a las subpestañas.


  4. No te olvides de guardar los cambios, en caso contrario no habrá servido de nada.



Personalizar el estilo de las subpestañas 


Para darle tu toque personal y que el estilo de las subpestañas quede bien con los colores y tipografías del menú principal, hace falta que añadas un poco de CSS.

  1. Entra en "Plantilla" del menú lateral de Blogger.

  2. Pincha en "Personalizar".

  3. Escoge la opción "Avanzado" y luego "Añadir CSS".




  4. Añade este código dentro del recuadro blanco.



    .menu ul li:hover a {
    height:40px;
    background: #8abecc; /* Color de las pestañas al pasar el cursor */
    color:#ffffff; /* Color del texto al pasar el cursor */
    text-decoration:none;
    }


    .menu li ul {
    background:#d4d0e3; /* Color de fondo del submenú */
    color: #ffffff; /*Color del texto de las subpestañas*/
    display:none;
    height:auto;
    padding:0px;
    margin:0px;
    position:absolute;
    width:100px; /* Ancho del submenú */
    z-index:100;
    border-top:1px solid #fff; /* Borde superior del submenú */
    }


    .menu li li {
    display:block;
    float:none;
    margin:0px;
    padding:0px;
    width:170px;
    }


    .menu li:hover li a {
    background:none;
    }


    .menu li ul a {
    display:block;
    height:35px !important; /*Altura de las pestañas del submenú*/
    font-size:15px; /*Tamaño de la fuente del submenú*/
    font-style:normal;
    margin:0px;
    padding:0px 10px 0px 15px; /*Espacios alrededor del texto arriba derecha abajo izquierda*/
    text-align:left; /*Donde está el texto alineado left center right*/
    }


    .menu li ul a:hover, .menu li ul li:hover a{
    background:#8abecc; /* Color de las subpestañas al pasar el cursor */
    color:#ffffff;
    text-decoration:none;
    }


    En caso de que no te funcione (a veces Blogger hace tonterías), en este post encontrarás otra manera de añadir el código CSS anterior a tu blog.

  5. No te olvides de guardar los cambios realizados!




Nota añadida: Me olvidé de ponerte un ejemplo! Aquí tienes un blog que hice, en donde la mejor solución era un menú desplegable  "Recetas con encanto". La pestaña que se despliega es la última.


Es largo, lo sé, pero por el simple hecho de deshacerte de ese menú de dos líneas....vale la pena!

Espero que no tengas dudas y que te salga todo bien.

En caso de que tengas algún problema, no dudes en preguntar lo que esa, en los comentarios o con un email.

Disfruta mejorando y aprendiendo!

Laura


¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.