Menú horizontal simple con CSS (2)

lunes, 19 de julio de 2010
Hace unos meses os mostrábamos algunos menús que podíais agregar a vuestro blog de manera fácil y rápida: Menú Horizontal Simple y Menú vertical Simple.
Pues bien, hoy os volvemos a presentar un nuevo menú de navegación horizontal, un poquitín más complejo, pero muy sencillo de implementar.
Puedes ver un ejemplo en funcionamiento de éste menú aquí.


Para agregarlo solo debes seguir los siguientes pasos:

1. Añadimos un nuevo Elemento HTML encima de la zona de entradas y en él ponemos el siguiente código:

<div id="menuhorizontal">
<ul id="menuh">
   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>
</ul>
</div>
<style type="text/css">
#menuh {
    background: #333;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 50%;
}
#menuh li {
    float: left;
    font: 67.5% "Lucida Sans Unicode", "Trebuchet MS", Arial, Verdana;
    margin: 0;
    padding: 0;
}
#menuh a {
    background: #333 url(http://i825.photobucket.com/albums/zz180/latrucoteca/seperator.gif) bottom right no-repeat;
    color: #ccc;
    display: block;
    float: left;
    margin: 0;
    padding: 8px 12px;
    text-decoration: none;
    font-weight:normal;
}
#menuh a:hover {
    background: #2580a2 url(http://i825.photobucket.com/albums/zz180/latrucoteca/hover.gif) bottom center no-repeat;
    color: #fff;
    padding-bottom: 8px;
    }
</style>

2. Guardamos el Gadget y modificamos la siguiente parte, cambiando la almohadilla (#) por la url del enlace, y la parte en Rojo, por el texto que deseamos que aparezca en el menú:
   <li><a href="#">Inicio</a></li>
   <li><a href="#">Acerca De</a></li>
   <li><a href="#">Enlazar</a></li>
   <li><a href="#">Contacto</a></li>
   <li><a href="#">Aviso Legal</a></li>
3. También podemos agregar más botones al menú adjuntando una nueva línea de código después de las ya presentes:
<li><a href="#">Otro título más</a></li>
En caso de querer realizar esta última acción, es recomendable sustituir la cifra coloreada de verde (50%) por un número mayor.
Y de esta forma ya dispondremos de un elegante y vistoso menú en nuestro blog para mejorar así un poco su aspecto :)
Saludos!

15 comentarios:

  • Juanma™

    Bonito menú. Seguro que a más de uno le va a servir.
    Saludos!

  • La Trucoteca

    Hola Juanma, muchas gracias por tu comentario, esperamos que sean muchos los blogueros que puedan encontrar una ayuda para sus blogs en este menú :)
    ¡¡Un abrazo de oso!! :D

  • CHiCken

    me parece muy elegante el menu :D ,tenias rato que no andabas por el blog quizas de vacaciones...


    saludos

  • La Trucoteca

    Hola Chicken, nos alegra que te guste el menú, la verdad es qu estos últimos días hemos estado un poco liadillos, pero aún así hemos intentado actualizar cada pocos días el blog :) :)
    Un abrazo!

  • jonn

    Cordial Saludo...
    He venido siguiendo sus concejos y es una gran ayuda para los usuarios que empezamos a utilizar blogs.....Ya utilice este recurso menu horizontal, pero si quiero agrandar las fuentes o cambiar el tipo de fuente, como lo hago y si quiero diferentes tipo de menus, los hay????gracias es un aporte muy importante
    mi blog....redjuntos112.blogspot.com

  • La Trucoteca

    Jonn, puedes cambiar el tamaño de fuentes modificando el valor en píxeles en esta parte: font: 67.5% "Lucida Sans Unicode", "Trebuchet MS", Arial, Verdana;, cambiando 67.5% por 12, 14, 15px, etc.
    Y en esa misma parte el nombre de la fuente: Puedes sustituir "Lucida Sans Unicode", por "Arial", "Segoe UI", "Comic Sans MS", etc. (recuerda utilizar fuentes que pueda tener todo el mundo instaladas para que se visualicen correctamente) ;)

    ¡Saludos!

  • tecnico en pc

    Muchas gracias
    Realmente me salvaste no sabia como hacerlo
    Me quedo fabuloso gracias por compartir y felicitacion por tu blog
    Sigue asi

  • La Trucoteca

    Hola Tecnico en PC, muchas gracias por tu comentario, nos alegra mucho que te haya servido el menú :)

    ¡Saludos!

  • Jose Ramon Santana Vazquez

    ...traigo
    sangre
    de
    la
    tarde
    herida
    en
    la
    mano
    y
    una
    vela
    de
    mi
    corazón
    para
    invitarte
    y
    darte
    este
    alma
    que
    viene
    para
    compartir
    contigo
    tu
    bello
    blog
    con
    un
    ramillete
    de
    oro
    y
    claveles
    dentro...


    desde mis
    HORAS ROTAS
    Y AULA DE PAZ


    TE SIGO TU BLOG




    CON saludos de la luna al
    reflejarse en el mar de la
    poesía...


    AFECTUOSAMENTE
    LA TRUCOTECA DE BLOGS

    ESPERO SEAN DE VUESTRO AGRADO EL POST POETIZADO DEL FANTASMA DE LA OPERA, BLADE RUUNER Y CHOCOLATE.

    José
    Ramón...

  • La Trucoteca

    Jose Ramón, bienvenido al blog y muchas gracias por este mensaje tan especial escrito en verso =) =)
    Estamos para lo que necesites :)

    ¡Un saludo!

  • Luis

    Cómo hago para poner un índice? Gracias!

  • La Trucoteca

    Luis, en el blog tenemos explicados dos tipos de índices que puedes poner. Estas son las entradas:

    http://www.latrucotecadeblogs.com/2009/11/pon-un-indice-de-entradas-en-tu-blog.html

    http://www.latrucotecadeblogs.com/2010/06/indice-de-entradas-ordenado-por-fecha.html

    ¡Un saludo!

  • Me encanto tu barra Menu, la aplique en mi blogger, solo que con un inconveniente. El fondo de fuera el ancho de mi blogger queda gris oscuro y no negro como el fondo. Me podrías ayudar. Quiero que quede todo negro, y no gris de una parte. Mi blog es http://memorabhilia.blogspot.com/
    Te agradecería montón tu ayuda. Espero que me puedas responder lo antes posible, Muchas Gracias.

  • Sumomo

    Mmm no entiendo xD pero se ve muy bueno *o* necesito ayuda D: kiero hacerle un menu super lindo pero no me sale aca mi email

    kmlola10@gmail.com

    GRACIAS!! :)

  • Estudio Ecléctico

    Hola,gracias por la info, ha sido muy útil! pero tengo una duda qué quizás me puedas resolver, ya que yo no domino html.
    He cambiado el fondo azul que aparece cuando pinchas en las pestañas, por morado. Pero me siguen quedando en el mismo color azul unos triangulitos en la parte inferior de cada pestaña, que no sé como poner morados. Sabrias indicarme cómo hacerlo?
    puedes ver lo que te explico en el blog: estudioeclectico.blogspot.com
    muchas gracias, un saludo

  • Ir Arriba