16 ene 2011

Menú Vertical Sencillo


Hola!Aquí les voy a explicar como hacer un Menú Vertical muy sencillo y entretenido. Encontré varios códigos, pero este es uno de los que más me gustan!.
Para hacer esto deben seguir los siguientes pasos y verán que no es difícil!, sólo tengan paciencia y ánimo...!
Entra a Diseño, a Edición de HTML
Presionas Ctrl+f y colocar en el "cuadradito" de búsqueda ]]></b:skin> (o antesde </head>) y te saldrá marcadito y justo ANTES de eso pega lo siguiente:

/* Menú Vertical
----------------------------------------------- */
#menuvert ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px; /* ancho del menú */
font-size: 11pt;
}
#menuvert ul li {
background-color: #B0CBDD; /* color de fondo del menú */
padding: 0px;
}
#menuvert ul li a {
color: #000; /* color de las letras */
text-decoration: none;
display: block;
padding: 10px 10px 10px 20px;
}
#menuvert ul li a:hover {
background: #336699; /* color del botón al pasar el cursor */
border-left: 10px solid #000066; /* color del rectángulo junto al título */
color: #FFFFFF; /* color de las letras al pasar el cursor */
}

Este código tiene explicado el contenido, asi que será sencillo de realizar y de entender.
Luego de esto se dirigen a Diseño en Elementos de la página y añaden un gadget,y selecciona HTML/Javascript y pega ahí esto:

<div id="menuvert">
<ul>
<li><a href="URL del enlace">Título 1</a></li>
<li><a href="URL del enlace">Título 2</a></li>
<li><a href="URL del enlace">Título 3</a></li>
<li><a href="URL del enlace">Título 4</a></li>
</ul>
</div>

Luego podrán ver que les kedará algo asi:

Vista Normal / Vista pasar el cursor
*Nota: Se pueden cambiar los colores

Ahora para Aquellas personas que quieren decorar de manera diferente su Menú colocándoles algunos gif, les explico ahora como se hace:

A partir del segundo código que les proporcioné agregarán el siguiente código de esta manera:

Código para agregar: < img src="URL DE LA IMAGEN"/>

Ejemplo con el título 1

<div id="menuvert">
<ul>
<li><a href="URL del enlace">Título 1</a><img src="URL DE LA IMAGEN"/></li>
</ul>
</div>

Ojalá les haya gustado!...éxitoo!! y recuerden dejar sus comentarios y seguirnos!!.
Fuente:CuidadBlogger

0 comentarios:

Publicar un comentario

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
ir arriba