Existiendo en internet una infinidad de estos ejemplos, me animé a hacer otro más, ¿por qué? pues para explicar un poco que ventajas tienen estos menús con respecto a otros que se hacen con tablas para cada item y javascript para hacer los efectos al pasar el mouse.

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

Bueno dejémonos de palabrería y vayamos a la acción, los 2 menús tienen la misma estructura lo único que cambia es el código CSS y el identificador, veamos:

Menu Vertical

<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>

#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;
}

Ver el ejemplo del menú vertical

Menu Horizontal

<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>

#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;
}

Ver el ejemplo del menú horizontal

Como vieron es sencillísimo podemos jugar con el CSS para cambiar los colores, o talvez añadir algún efecto más, esto se los dejo a su imaginación.

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, y otras cosas que no me acuerdo.

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.

Desventajas

Ninguna (creo :)), espero sus comentarios.

Archivos relacionados