Menu vertical y horizontal con CSS

Código CSS

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.


tags:

En esta sección encontrarás una mezcla de códigos recopilados de fuentes públicas de Internet y otros creados por CoreASP. Estos recursos se comparten de buena fe con el único objetivo de servir como base de conocimiento en el desarrollo de aplicaciones en ASP Clásico. CoreASP no garantiza la precisión, vigencia ni funcionamiento de los artículos o fragmentos de código publicados, y no se hace responsable por el uso que se les dé. Se recomienda siempre revisar, adaptar y probar el código antes de implementarlo en entornos de producción.