En este post ensenaremos como crear un menu vertical en html y decorarlo con css a partir de una lista simple creada con el siguiente codigo que lo colocaremos entre las etiquetas <body> y </body>.
<body>
<div id="menuVertical">
<ul> <!--Define la lista en
<li> <!--Define cada elemento de la lista-->
<li> <a href="http://aflrovvs.blogspot.com/search/label/java"> Java </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/search/label/matlab"> Matlab </a> </li>
<li> <a href="http://aflrovvs.blogspot.com/search/label/html"> HTML </a> </li>
</ul>
</div>
</body>
Lo cual se vera de la siguiente manera:
Para hacer que la lista luzca como un verdadero menu vertical aplicaremos algunos estilos con css, en los que se incluye codigo para eliminar las vinetas, eliminar el subrayado, colocar paneles detras de cada elemento, entr otros.
Para poder eliminar las vinetas colocaremos:
list-style-type:none;
Dentro de la funcion #menuVertical ul{..} en la plantilla de nuestro blog dentro de la funcion body {..}
En esta misma funcion definimos el color de fondo de cada elemento de menu y el color de los bordes de los paneles de los elementos de menu respectivamente:
background:#CEFBF6;
border:solid 5px #7FFEF1;
El radio de borde viene dado por:
border-radius:9px;
Para eliminar el subrayado colocaremos la sentencia siguiente:
text-decoration: none;
Dentro de la funcion #menuVertical ul a{..} en la plantilla de nuestro blog dentro de la funcion body{...} debajo de la funcion #menuVertical ul {..}.
En esta misma funcion colocamos el tamano de la fuente que viene definida por:
font-size: 20px;
Para crear el efecto de cambio de contraste al colocar el mouse sobre el menu aplicamos el siguiente codigo que lo unico que hace es mostrar una inversion de los colores para cada caso, es decir cuando no se coloca el mouse sobre el menu el color de cada elemento de menu esta variando de negro hasta blanco y al colocar el mouse sobre el elemento de menu, este varia de blanco a negro, lo que da el efecto de seleccionar tal elemento de menu.
#menuVertical li a{
color:#06F;
margin:0px;
background:linear-gradient(#fff 0%,#dedede 100%);
background:-moz-linear-gradient(#fff 0%,#dedede 100%);
background:-ms-linear-gradient(#fff 0%,#dedede 100%);
background:-o-linear-gradient(#fff 0%,#dedede 100%);
background:-webkit-linear-gradient(#fff 0%,#dedede 100%);
border:solid 1px #f9f9f9;
border-radius:15px;
padding:10px;
}
#menuVertical li a:hover{
background:linear-gradient(#DEDEDE 0%, #FFF 100%);
background:-moz-linear-gradient(#DEDEDE 0%, #FFF 100%);
background:-ms-linear-gradient(#DEDEDE 0%, #FFF 100%);
background:-o-linear-gradient(#DEDEDE 0%, #FFF 100%);
background:-webkit-linear-gradient(#DEDEDE 0%, #FFF 100%);
border-radius:15px;
border:solid 4px #333;
color: red;
}
Al aplicar estas sentencias y las demas que vienen incluidas en la carpeta del proyecto, nuestro menu deberia verse de la siguiente manera:
Ademas se lo puede apreciar en la parte izquierda de nuestro blog.
Para descargar el proyecto seguir los enlaces siguientes:
