Hacer menu horizontal para blog

  • agosto 25, 2010

Hace unos meses os mostr??bamos algunos men??s que pod??ais agregar para vuestro blog de manera f??cil y r??pida: Men?? acorde??n y 

MENU DESPLEGABLE EN TU BLOG

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.


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( ) 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( ) 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!



No Comments Found