Aquí os dejo un menú configurable vertical con css, las ventajas que tiene css es que tiene poco peso..
veámos el código:
Código CSS:entre <head> </head> de la plantilla
<style>
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}
#menu div.barraMenu {
text-align: left;
}
#menu div.barraMenu a.botonMenu {
background-color: #CCCCCC;
color: white;
cursor: pointer;
padding: 1px 9px 2px 9px;
text-decoration: none;
}
#menu div.barraMenu a.botonMenu:hover {
background-color: black;
}
#menu div.barraMenu a.botonMenu:active {
background-color: #FFFFFF;
color: black;
}
</style>
Código html: entre <body> o añadir un elemento de página.
<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="http://josscat.blogspot.com/">Menu 1</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 2</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 3</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 4</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 5</a>
</div>
background-color: #CCCCCC;( color de fondo )
color: white; ( color del texto )
#menu div.barraMenu a.botonMenu:hover {background-color: black;} ( color al selecionar )
font-size: 8pt; ( tañano del texto )
style="color:#000000;">">Menu 5 ( texto del menú )
veámos el código:
Código CSS:entre <head> </head> de la plantilla
<style>
#menu div.barraMenu,
#menu div.barraMenu a.botonMenu {
font-family: sans-serif, Verdana, Arial;
font-size: 8pt;
color: white;
}
#menu div.barraMenu {
text-align: left;
}
#menu div.barraMenu a.botonMenu {
background-color: #CCCCCC;
color: white;
cursor: pointer;
padding: 1px 9px 2px 9px;
text-decoration: none;
}
#menu div.barraMenu a.botonMenu:hover {
background-color: black;
}
#menu div.barraMenu a.botonMenu:active {
background-color: #FFFFFF;
color: black;
}
</style>
Código html: entre <body> o añadir un elemento de página.
<div id="menu"><div class="barraMenu">
<a class="botonMenu" href="http://josscat.blogspot.com/">Menu 1</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 2</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 3</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 4</a>
<p><a class="botonMenu" href="http://josscat.blogspot.com/">Menu 5</a>
</div>
background-color: #CCCCCC;( color de fondo )
color: white; ( color del texto )
#menu div.barraMenu a.botonMenu:hover {background-color: black;} ( color al selecionar )
font-size: 8pt; ( tañano del texto )
style="color:#000000;">">Menu 5 ( texto del menú )
No hay comentarios:
Publicar un comentario