Menu vertical y horizontal con CSS

Escrito por Programador ASP clásico en Hojas de estilo 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.


Publicado el 10/09/2014 a las 14:14:54 hrs. | 542 visitas.

Subir
Web hosting by Somee.com