Menu vertical y horizontal con CSS

Menu vertical y horizontal con CSS

Código CSS

Por ASP clásico / 13/09/2014 @ 14:14:54 / 1499 visitas

En estos ejemplos estoy usando listas desordenadas y CSS básico, para lograr el formato y los efectos al pasar el mouse sobre ellos.

Los 2 menús tienen la misma estructura lo único que cambia es el código CSS y el identificador, veamos:

Menu Vertical con listas y CSS

El código HTML para el menú vertical es:

<div id="menuv"> 
 <ul> 
 <li><a href="#menuv">Inicio</a></li> 
 <li><a href="#menuv">Comentarios</a></li> 
 <li><a href="#menuv">Noticias</a></li> 
 <li><a href="#menuv">Contacto</a></li> 
 <li><a href="#menuv">Acerca de nosotros</a></li> 
 </ul> 
 </div>

El código CSS para el menú vertical es:

#menuv { border: 1px solid #ACCFE8; border-width: 1px 1px 0 1px; width: 150px; font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif; } 
 #menuv ul, li { list-style-type: none; } 
 #menuv ul { margin: 0; padding: 0; } 
 #menuv li { border-bottom: 1px solid #ACCFE8; } 
 #menuv a { text-decoration: none; color: #3366CC; background: #F0F7FC; display: block; padding: 3px 6px; width: 138px; } 
 #menuv a:hover { background: #DBEBF6; }

Menu Horizontal con listas y CSS

El código HTML para el menú horizontal es:

<div id="menuh"> 
 <ul> 
 <li><a href="#menuh" id="primero">Inicio</a></li> 
 <li><a href="#menuh">Comentarios</a></li> 
 <li><a href="#menuh">Noticias</a></li> 
 <li><a href="#menuh">Contacto</a></li> 
 <li><a href="#menuh">Acerca de nosotros</a></li> 
 </ul> 
 </div>

El código CSS para el menú horizontal es:

#menuh { font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif; margin-top: 20px; } 
 #menuh ul, li { list-style-type: none; } 
 #menuh ul { margin: 0; padding: 0; } 
 #menuh li { float: left; } 
 #menuh a { text-decoration: none; color: #3366CC; background: #F0F7FC; display: block; padding: 3px 10px; text-align: center; border: 1px solid #ACCFE8; border-width: 1px 1px 1px 0; } 
 #menuh a#primero { border-left: 1px solid #ACCFE8; } 
 #menuh a:hover { background: #DBEBF6; }

En los ejemplos verán que el código HTML (Estructura) está separado del código CSS (Presentación o formato); esto nos ayuda a modificar rápidamente el código, ahorrar el ancho de banda.

Ventajas
– Poco peso: al ser código simple, ocupa poco espacio, y esto también ayuda a la carga rápida de la página.
– Manejable: se puede cambiar fácilmente los colores y efectos gracias a CSS.
– Simple: el código es sencillo de entender, no se complica tanto como los menús a base de tablas y JavaScript.
– Accesible: el usuario puede usar el menú aunque tenga discapacidad o esté navegando en cualquier dispositivo o navegador.

Descubre más sobre cómo simplificar y optimizar tu trabajo empresarial en el Blog de CoreASP.