Jack Fiallos Blog (AkKa Erling) Vida, Curiosidad y Proyectos

Esto ha pasado mas de una vez en diferentes webs por las cuales navego, pero es algo nuevo que no había notado y en lo que normalmente siendo yo un usuario experimentado no me había percatado… Pero sucede que cuando desarrollamos web ya sean páginas, sitios o aplicaciones usamos los famosos y ya quemados menus de navegación.. Desde que el css se empezó a popularizar, las tablas se sustituyeron rapidamente por listas que al ser verticales u horizontales nos facilitaban la creación de menus… Pero algo que es muy importante y que al parecer se ha olvidado, es la forma en que se hacen estos menus… Dos ejemplos muy claros para entender lo malo y como corregirlo a continuación..

 
<!--
		* {
			font-family: Helvetica,sans-serif;
		}
 
		li {
			list-style-type:none;
			background-color: lightblue;
			width:150px;
		}
 
		ul#mnucorrecto li a {
			float: left; /* en esta linea esta la magia*/
			width:150px;
			background-color: lightgreen;
		}
 
                ul li a:hover, ul#mnucorrecto li a:hover {
			background-color: lightgray;
		}
 
-->
<h3>Ejemplo #1 :: Lo Incorrecto</h3>
<ul>
	<li>
		<a href="http&gt;//answer.com">Answer</a></li>
	<li>
		<a href="http&gt;//yahoo.com">Yahoo</a></li>
</ul>
<h3>Ejemplo #2 :: Lo Correcto</h3>
<ul id="mnucorrecto">
	<li>
		<a href="http://bing.com">Bing</a></li>
	<li>
		<a href="http://google.com">Google</a></li>
</ul>

En este caso ambos menus estan construidos de maneras muy similares, la única diferencia que tienen es que el enlace del 2do menú toma una longitud definida lo que ayuda a que su área seleccionable sea más amplia, en cambio en el 1er ejemplo el enlace solamente contiene al texto.

Pasemos a ver el ejemplo.

About the author

Erling Fiallos wrote 290 articles on this blog.

Profesional en el Desarrollado de aplicaciones web, usuario de linux, fanático de la tecnología. Arquitecto de interfaces apasionado uso de los estándares web Usabilidad/Accesibilidad.. En el camino he aprendido mucho sobre diseño y me dedico a mejorar las aplicaciones pensando en que toda la web debe de ser accesible para todas las personas. Parte activa en el equipo de desarrollo y consultoría de Qbit Mexhico.

• Blog
• Twitter

Entradas Similares:

1. Ciclo de vida de una aplicacion web utilizando un framework MVC
2. Aplicación para realizar cuestionarios en línea
3. Implementando un ToDo con jQuery para tu aplicacion Web
4. Super Happy Developer House 9
5. Popularizando el uso de los frameworks