Menú Vertical


Os gusta este menú, pues si queréis ponerlo en vuestro blog lo haremos de la siguente forma:

Pegamos el siguiente código antes de ]]></b:skin>


/*- menu----------- */

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#navcontainer li { margin: 0 0 3px 0; }
#navcontainer a
{
display: block;
padding: 2px 2px 2px 24px;
border: 1px solid #333;
width: 160px;
background-color: #FFCC00;
background-image:
url(http://img478.imageshack.us/img478/1483/ama1yh2.jpg);
}
#navcontainer a:link, #navlist a:visited
{
color: #000000;
text-decoration: none;
}
#navcontainer a:hover
{
border: 1px solid #FFFF99;
background-color: #6C1F0D;
background-image:
url(http://img166.imageshack.us/img166/3333/nar2af6.jpg);
color: #FFFF99;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #FFFF99;
background-color: #6C1F0D;
background-image:
url(http://img166.imageshack.us/img166/3333/nar2af6.jpg);
color: #FFFF99;
}

En el código anterior podeis modificar los códigos de los colores.

Después ubicamos el menú como un nuevo elemento Html/Javascript.

<div id="navcontainer">
<ul id="navlist"><li id="active">
<a href="#" id="current">INICIO</a></li>
<li><a href="URL">DESCRIPCIÓN 1</a></li>
<li><a href="URL">DESCRIPCIÓN 2</a></li>
<li><a href="URL">DESCRIPCIÓN 3</a></li>
<li><a href="URL">DESCRIPCIÓN 4</a></li>
</ul>
</div>

Donde pone “URL” va la dirección completa del enlace, y donde pone “Inicio” y “Descripción” pondremos la nuestra.

Visto en: El blog de Cesar

Related Posts with Thumbnails