Web 2.0 Tips

En mi post anterior habia explicado como hacer un menú desplegable solo con CSS sin Javascript, va aunque lamentablemente para IE si necesita JS, es solo una pequeña función para reemplazar un selector CSS que en el IE no funciona.

Ahora como les prometí en ese post, les voy a explicar como hacerlo pero de forma horizontal, tipo barra de navegación o menú de navegación y no tan tradicional.

Obviamente necesitan leer el post anterior para saber de lo que hablo ya que solo voy a marcar los cambios, el post en cuestión:

http://web2.0-tips.com.ar/32-menues-desplegables-solo-con-css-sin-javascript.html

Ahora que vimos eso, vamos a marcar las diferencias. Como es de suponer, no vamos a tocar la estructura del menú en ningún momento, el codigo html/xhtml va a seguir siendo exáctamente el mismo, de esta forma si esta integrado a algo dinámico, como un script que saque las categorías de una base de datos por ejemplo, no tendremos que modificar nada.

Anteriormente a los elementos “li” los teniasmos seteados de esta forma:

ul.menu li {
	width: 100px;
	border: 1px solid;
	position: relative;
}

Ahora necesitamos que esten uno al lado del otro, aprobechando de que los “li” tienen su pripio elemento contenedor (el “ul”), los vamos a hacer, “flotar” a la derecha, osea aplicarlos uno al lado del otro siempre buscando lugar a su lado derecho, anteriormente podriamos haberle puesto el width al ul, pero ahora tendriamos que aplicarlo al “li”, ya que si va a flotar, necesita tener un ancho fijo para poder hubicarse y no ocupar toda la linea (el bloque). Asi ahora nos queda:

ul.menu li {
	width: 100px;
	border: 1px solid;
	position: relative;
	float: left;
}

De esta manera ya nos queda el menú horizontal, pero claro cuando pasamos el mouse es un desastre, pero es solo sacar unas propiedades, anteriormente definiamos un left y un top, pero ahora eso hace que el menu se superponga, asi que simplemente se lo sacamos:

ul.menu ul {
	list-style:none;
	display: none;
	padding: 0;
	margin: 0;
	position: absolute;
	/*left:100px;
	top:-1px;*/
}

Perfecto, ahora los menúes de segundo nivel quedan abajo de los del primero como un menú decente, pero nos encontramos con otro problema, los menúes de tercer nivel toman también esta propiedad y se acoplan a los de segundo. Para esto deberemos devolverles las propiedades left y top, pero solo a los de tercer nivel para arriba, asi que agregamos a nuestro CSS:

ul.menu ul li ul {
	left: 100px;
	top: -1px;
}

Esto seria, dale estos estilos al “ul” que esta despues del “li”, del primer “ul” despues del “ul” contenedor.

Bueno, ahora cuando esta todo bonito y andando viene la parte divertida…

Haciendolo andar en IE:

Ya les dije que se van a acostumbrar a este apartado diabólico. Bueno, al tener una pocición absoluta sobre un objeto flotante, este tiene a tomar su inicialización debajo de este en paralelo, pero IE no se enteró de esto, haciendo que empieze desde el final de algun modo extraño por que tampoco es exacto, para eso hay que avisarle a IE del top y left a tomar, como solo es una propiedad de IE, vamos a perder la aprobación de W3C y a utilizar un hack CSS para Internet Explorar, que es el famoso “*”, de este modo, nos queda:

ul.menu ul {
	list-style:none;
	display: none;
	padding: 0;
	margin: 0;
	position: absolute;
	/* Arreglo solo para IE */
	*top: 20px;
	*left: 0;
}

Asi el top y left seguirá siendo el mismo en el resto de los navegadores y tendremos nuestro menú o barra de navegación cross-browser.

Como a todo les dejo el código funcional aca: http://pastebin.com/3CEvjPc8

Espero que les sea útil, ahora es cuestion de mandarle colores, fuentes  ,etc. Cualquier aprote pueden hacerlo en los comentarios, seran bienvenidos

Tips relacionados:

1. Menúes desplegables solo con CSS (Sin JavaScript)
2. CSS Sprites, reduciendo peticiones
3. Generador de menúes CSS on-line