Arreglo para IE6 con Hover y Selects (IE6 Fix with Hover and Selects) - Parte II

Lo primero sería implementar Suckerfish y así comenzar el desarrollo.
Primero lo primero: La lista.

Código A.1

<ul><br /> <li><a href="javascript:void(0)"><span>Menu1</span></a><br /> <ul><br /> <li><a href="javascript:void(0)"><span>Submenu 1.1</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 1.2</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 1.3</span></a><br /> <ul><br /> <li><a href="javascript:void(0)"><span>Sub Submenu 1.3.1</span></a></li><br /> </ul><br /> </li><br /> <li><a href="javascript:void(0)"><span>Submenu 1.4</span></a></li><br /> </ul><br /> </li><br /> <li><a href="javascript:void(0)"><span>Menu 2</span></a><br /> <ul><br /> <li><a href="javascript:void(0)"><span>Submenu 2.1</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 2.2</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 2.3</span></a></li><br /> </ul><br /> </li><br /> <li><a href="javascript:void(0)"><span>Menu 3</span></a></li><br /> <li><a href="javascript:void(0)"><span>Menu 4</span></a></li><br /> <li><a href="javascript:void(0)"><span>Menu 5</span></a></li><br /> <li><a href="javascript:void(0)"><span>Menu 6</span></a></li><br /></ul>

Este código se ve algo así:

Vista A.1

• Menu1
  
  • Submenu 1.1
  • Submenu 1.2
  • Submenu 1.3
    
    • Sub Submenu 1.3.1
  • Submenu 1.4
• Menu 2
  
  • Submenu 2.1
  • Submenu 2.2
  • Submenu 2.3
• Menu 3
• Menu 4
• Menu 5
• Menu 6

La idea es que todos los li que contengan los "menu X" se conviertan en la raiz del menú principal y los li contenidos en un ul dentro de un li "menu X" sean submenús del correspondiente "menu X".

¿Cómo lograrlo?
CSS - Cascading Style Sheet - Hoja de Estilo

Primero modificamos la lista A.1 para que sea más fácil aplicar los estilos de la hoja de estilo:

Código B.1

<ul id="superior"><br /> <li><a href="javascript:void(0)"><span>Menu1</span></a><br /> <ul><br /> <li><a href="javascript:void(0)"><span>Submenu 1.1</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 1.2</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 1.3</span></a><br /> <ul><br /> <li><a href="javascript:void(0)"><span>Sub Submenu 1.3.1</span></a></li><br /> </ul><br /> </li><br /> <li><a href="javascript:void(0)"><span>Submenu 1.4</span></a></li><br /> </ul><br /> </li><br /> <li><a href="javascript:void(0)"><span>Menu 2</span></a><br /> <ul><br /> <li><a href="javascript:void(0)"><span>Submenu 2.1</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 2.2</span></a></li><br /> <li><a href="javascript:void(0)"><span>Submenu 2.3</span></a></li><br /> </ul><br /> </li><br /> <li><a href="javascript:void(0)"><span>Menu 3</span></a></li><br /> <li><a href="javascript:void(0)"><span>Menu 4</span></a></li><br /> <li><a href="javascript:void(0)"><span>Menu 5</span></a></li><br /> <li><a href="javascript:void(0)"><span>Menu 6</span></a></li><br /></ul>

Y la hoja de estilos queda así:

CSS B.1

#superior {list-style-type:none; padding:0px; margin:0px;}<br />#superior ul {list-style-type:none; padding:0px; margin:0px;}<br />#superior li {float:left; background:#000000; margin:1px 0px 0px 0px; width:160px; height:16px; line-height:16px;}<br /><br />#superior li ul li {background:#666666;}<br />#superior li ul li:hover, #superior li ul li.over {background:#444444;}<br /><br />#superior span {<br />margin: 0px; padding: 0px; line-height:16px; height:16px; width: 160px;<br />}<br /><br />/* for IE5.5 and IE6 only */<br /><br />#superior li a {display:block; height:16px; line-height:16px; width:120px; text-decoration:none; text-align:center; color: #ffffff;}<br />#superior li a table {position:absolute; left:0; top:-1px; border-collapse:collapse; width:0; height:0;}<br /><br />#superior :hover, #superior .over {color:#cccccc; position:relative;}<br />#superior :hover > a, #superior .over > a {color:#cccccc;}<br /><br />#superior ul, <br />#superior :hover ul ul, #superior .over ul ul,<br />#superior :hover ul :hover ul ul, #superior .over ul .over ul ul {visibility:hidden; width:0px; height:0px; line-height:0px; overflow : hidden;}<br /><br />#superior :hover ul, #superior .over ul {visibility:visible; overflow:visible; position:absolute; height:auto; width:160px; left:0px; top:16px; background:url(transparent.gif);} /* the background image is for IE7 */<br />

El menú se ve así ahora:


Increíble no? Bueno lamentablemente esto necesita un pequeño truco en java para hacer que el estúpido IE6 entienda que al colocarme sobre una celda le estoy haciendo hover y por ende debería responder a una instrucción por el estilo. En el menú superior la captura es de Firefox por lo que no hay problema. En IE7 tampoco. El problema es IE6 (de ahí el título de este post).

Para corregir su tontera, necesitamos usar el siguiente script (recordar colocarlo en la sección HEAD <head></head> del HTML):

SCRIPT B.1

<script language="javascript" type="txt/javascript"><br><br />startList = function() {<br><br />if (document.all&&document.getElementById) {<br><br />navRoot = document.getElementById("superior");<br><br />for (i=0; i<navRoot.childNodes.length; i++) {<br><br />node = navRoot.childNodes[i];<br><br />if (node.nodeName=="LI") {<br><br />node.onmouseover=function() {<br><br />this.className+=" over";<br><br />}<br><br />node.onmouseout=function() {<br><br />this.className=this.className.replace(" over", "");<br><br />}<br><br />}<br><br />}<br><br />}<br><br />}<br><br />window.onload=startList;<br><br /></script>

Si se fijan, lo que hace el script es reemplazar dinámicamente los hover por una clase llamada over; en el CSS B.1, en cada li donde hay un hover, se duplica el selector CSS reemplazando hover en el duplicado, por over.

O sea, donde dice: #superior li ul li:hover
Agrego: (una coma) #superior li ul li.over
De esta fácil forma, consigo que IE6 me muestre las acciones hover sobre celdas, inputs, selects, en fin lo que sea posible hacer hover.

Hasta aquí la funcionalidad de suckerfish está explicada o más o menos clara.

Si tienen dudas o quieren ver ejemplos mejores o lo que sea, diríjanse al sitio de A list Apart, o al de Suckerfish y Son of Suckerfish

Aún falta una cosa que corregir y que no es fácil de detectar hasta que colocas un menú suckerfish que despliega sobre un select y que al fin y al cabo de eso trataba inicialmente el post. El desplegable del menú pasa por DEBAJO del select o input. ¿La causa? Una pifia de IE6 a la hora de leer las posiciones de los elementos y dejando siempre en la posición más alta los inputs y selects (y seguramente todo lo que sea un campo de un form).

En el siguiente, la solución a este problema.