Crearemos un menú vertical básico, pero vistoso, con el uso de HTML y CSS; haciendo uso de las listas desordenadas.
<ul>…</ul>
1) Primero crearemos el listado de opciones que tendrá nuestro menú, este listado deberá estar dentro de un div al cual llamaremos “menu”.
<div>
<ul>
<li>Opción 1</li>
<li>Opción 2</li>
<li>Opción 3</li>
<li>Opción 4</li>
<li>Opción 5</li>
<li>Opción 6</li>
</ul>
</div>
2) Ahora agregaremos una etiqueta de hipervinculo a cada elemento de la lista, utilizando las etiquetas <a>…</a>
<div>
<ul>
<li><a href=”#”>Opción 1</a></li>
<li><a href=”#”>Opción 2</a></li>
<li><a href=”#”>Opción 3</a></li>
<li><a href=”#”>Opción 4</a></li>
<li><a href=”#”>Opción 5</a></li>
<li><a href=”#”>Opción 6</a></li>
</ul>
</div>
3) Guardaremos nuestro archivo con el nombre de”menú.html”.
4) Ahora agregaremos el código CSS para darle el estilo al menú. Podemos hacerlo de dos formas:
a. Si tienes un poco de conocimiento previo de css y html, puedes crear una hoja de estilo independiente y vincularla a el archivo html.
b. En caso de no tener muchos conocimientos de css y html, haremos lo que sigue:
Antes del cierre de la etiqueta </head>, escribiremos:
<style type="text/css">
Aquí ira el código css
</style>
5) Escribiremos el siguiente código CSS
.menu{
border: 1px solid #C0C0C0; /*Aqui indicamos el borde que tendra el menú y su color*/
background-color: white; /*color de fondo*/
border-bottom-width: 0; /*Quitamos el borde inferior*/
width: 150px; /*Ancho del menu*/
}
.menu ul{
padding: 0;
margin: 0;
list-style-type: none; /*quitamos el icono de lista*/
}
.menu a{ /*indicamos el estilo de los vinculos*/
font: bold 14px Verdana; /*tipo, tamaño y estilo de letra*/
padding: 4px 3px; /*Espacio interno superior e izquierdo*/
display: block; /*forma en que se presenta el vinculo (bloque)*/
width: 100%; /*Definimos el ancho para evitar problemas con IE6*/
color:#036; /*color del texto*/
text-decoration: none; /*quitamos el subrayado de los vinculos*/
border-bottom: 1px solid #C0C0C0; /*agregamos un borde inferior con color*/
}
.menu a:visited{
color: #036; /*cambiamos el color del texto a los vinculos visitados*/
}
html>body .menu a{
width: auto; /*indicamos un ancho automático de los vínculos según su tamaño*/
}
.menu a:hover{ /*cambiamos color de fondo y texto al pasar el mouse sobre el vinculo*/
background-color: #000;
color: #F90;
}
6) Guardamos los cambios.
