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 */
}
----------------------------------------------- */
#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>
<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