martes, 2 de agosto de 2011

Menú horizontal





Este menú horizontal es muy vistoso, lo he tomado prestado del blog de nuestro buen amigo César.
Para añadirlo a nuestro blog nos situaremos en Plantilla/Edición HTML.
Después de <head> /añadiremos lo siguiente:


<style type='text/css'>
      #chromemenu{
      width: 100%;
      font-weight: bold;
      font-size: 90%;
      }

      #chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
      content: ".";
      display: block;
      height: 1px;
      clear: both;
      visibility: hidden;
      }

      #chromemenu ul{
      border: 5px double #660000;
      width: 99%;
      background-color: #000000; center
      center repeat-x;
      padding: 5px 0;
      margin: 0;
      text-align: left; /*set value to "right" for example to align menu to the left of page*/
      }

      #chromemenu ul li{
      display: inline;
      }

      #chromemenu ul li a{
      color: #cccc66 ;
      padding: 5px;
      margin: 10;
      text-decoration: none;
      border-right: 3px double #660000;
      }

      #chromemenu ul li a:hover{
      background-color: #660000; center
      center repeat-x;
      }

      </style>
 
 
 
(en esta parte de código es donde podemos cambiar el color del menú)


Una vez guardados los cambios  nos dirigimos a;  
Añadir un elemento de página/HTML Javascript donde añadiremos lo siguiente:
 
 
<div id="chromemenu">
<ul>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
<li><a href="aquí-url">texto</a></li>
</ul>
</div>
 
(En esta parte es donde podemos añadir los enlaces y el texto que será visible) 

0 comentarios:

Publicar un comentario

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Best Buy Coupons