Arreglo para IE6 con Hover y Selects usando Suckerfish parte III

Luego de que tuve el menú armado y choqué frente a los select tags de un form pasando por debajo de ellos en vez de encima, lo lógico era buscar una solución en los z-index de la página, pero sin ningún resultado.

Tuve que googlear, hasta que llegué a una solución que no sólo me permite hacer los menús y todo sino que además me permite darles transparencias que funcionan.

Primero que nada, el archivo que necesitamos agregar a lo que ya teníamos:

Código C.1

<br />// Created a long, long time ago by Tanny O'Haley <br />// Update history.<br />// 24 Oct 2006 - Added to http://tanny.ica.com <br />// 14 Jul 2006 - Modified the way the iframe is added to the DOM. <br />// I no longer use innerHTML but use DOM methods. <br />// 15 Sep 2006 - Added a check to see if the target element <br />// onmouseout is contained in the onmouseout element. <br />// If it is then I dont' remove the sfhover class. <br />// I made use of the Microsoft proprietary <br />// obj.contains() method. <br />// Added check to make sure that the sfhover class is not already in <br />// the li element. <br />// <br />sfHover = function() { <br /> // Support the standard nav without a class of nav. <br /> var el = document.getElementById("superior"); <br /> if(!/\bsuperior\b/.test(el.className) && el.tagName == "UL") <br /> setHover(el); <br /> <br /> // Find all unordered lists. <br /> var ieNavs = document.getElementsByTagName('ul'); <br /> for(i=0; i<ienavs.length; ul =" ieNavs[i];" <br />ieuls =" superior.getElementsByTagName('ul');"> <br />elements with <iframe>s<br /> for (j=0; j<ieuls.length; <br />iemat="document.createElement('iframe');" <br />protocol ="="" src="//0" src="" src="javascript:false" <br />scrolling="no" frameborder="0" width="ieULs[j].offsetWidth+" <br />height="ieULs[j].offsetHeight+" zindex="-1" zindex="101" <br />ielis =" nav.getElementsByTagName('li');" i="0;" <br />onmouseover="function()" onmouseout="function()" <br />classname="this.className.replace('" <br />ielis =" document.getElementById('nav').getElementsByTagName('li');" <br />i="0;" onmouseover="function()" <br />onmouseout="function()" classname="this.className.replace('" <br />oselects="document.getElementsByTagName(" i="0;i<oSelects.length;i++)" <br />oselects="document.getElementsByTagName(" i="0;i<oSelects.length;i++)" <br />classname="oSelects[i].className.replace(">

Está modificación al javascript anterior permite que funcionen las cosas tal y cual pensábamos que deberían haber funcionado siempre, es decir, la lista pasa SOBRE el select tag de un form. Hay que tener dos cosas en mente:

1. Cambiar el texto SUPERIOR en todas las partes donde aparezca en el Javascript y agregar el id que uno le otorgó al menú, y
2. Cuidar que la función es sfHover y el CSS es sfhover

Ya con esto aprendido, hacer menús con suckerfish es una opción bastante útil y funcional. Espero les ayude.

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.

Si no, no duden en contactarme.

Technorati Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

Windows Live Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover

WordPress Tags: Hover,Selects,Suckerfish,modificación,SUPERIOR,Javascript,menú,Apart,sfHover