Tutorialfeed nos envía un menú vertical creado con 2 KB de código CSS, parecido al menú vertical simple que os mostré, aunque un poco más sencillo. Todos los valores de este menú pueden cambiarse. Con un poco de imaginación podremos crear resultados muy buenos.
Código HTML
La estructura a seguir es una lista desordenada agrupada con un div estilizado, lo más sencillo y efectivo para crear menús:
<div id="leftNav"> <div>Mi menu vertical</div> <ul><li ><a href="#">Contenido 1</a></li> <li><a href="#">Contenido 2</a></li> <li><a href="#">Contenido 3</a></li> <li ><a href="#">Contenido 4</a></li> <li><a href="#">Contenido 5</a></li> <li><a href="#">Contenido 6</a></li> <li><a href="#">Contenido 7</a></li> <li style="border-bottom:none;"><a href="#">Contenido 8</a></li></ul></div>
Código CSS
Este es el código por defecto. Obviamente los valores aquí mostrados pueden cambiarse por los que deseemos:
#leftNav {float: left; width: 231px; border: 1px solid #c9c9c7; margin-bottom: 10px; font-family:Geneva, Arial, Helvetica, sans-serif;}
#leftNav .header{float:left; width:231px; height:20px; padding-top:4px; background:url(Images/leftMenu-header-bg.gif) repeat-x; text-align:center; color:#344f6f; font-size:13px; font-weight:bold; border-bottom:1px solid #a7b4c3;}
#leftNav ul{margin:0px; padding:0px; width:231px;}
#leftNav ul li{margin:0px; padding:0px; font-size:11px; height:24px; width:231px; color:#364e70; border-bottom:1px solid #a7b4c3; float:left; list-style-type:none;background:#cad2df; border-top:1px solid #dbe3ec;}
#leftNav ul li a{ text-decoration:none;padding-top:5px; height:19px; width:226px; text-indent:14px; background:#cad2df; color:#364e70; list-style-type:none; position:absolute;border-left:5px solid #828fa6;}
#leftNav ul li a:hover{text-decoration:underline; font-weight:bold; padding-top:5px; height:19px; width:226px; background:#394a63; color:#cad2df; border-left:5px solid #1c3552;}
Estandarización
CSS 2.1 válido.
XHTML 1.0 transitional válido.
