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

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. I no longer use <br />// innerHTML but use DOM methods. <br />// 15 Sep 2006 - Added a check to see if the target element onmouseout is contained <br />// in the onmouseout element. If it is then I dont' remove the <br />// sfhover class. 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; i++) { <br /> var ul = ieNavs[i]; <br /> // If they have a class of nav add the menu hover. <br /> if(/\bsuperior\b/.test(ul.className)) <br /> setHover(ul); <br /> } <br /> <br />} <br /> <br />function setHover(superior) { <br /> var ieULs = superior.getElementsByTagName('ul'); <br /> if (navigator.appVersion.substr(22,3)!="5.0") { <br /> // IE script to cover <select> elements with <iframe>s <br /> for (j=0; j<ieULs.length; j++) { <br /> var ieMat=document.createElement('iframe'); <br /> if(document.location.protocol == "https:") <br /> ieMat.src="//0"; <br /> else if(window.opera != "undefined") <br /> ieMat.src=""; <br /> else <br /> ieMat.src="javascript:false"; <br /> ieMat.scrolling="no"; <br /> ieMat.frameBorder="0"; <br /> ieMat.style.width=ieULs[j].offsetWidth+"px"; <br /> ieMat.style.height=ieULs[j].offsetHeight+"px"; <br /> ieMat.style.zIndex="-1"; <br /> ieULs[j].insertBefore(ieMat, ieULs[j].childNodes[0]); <br /> ieULs[j].style.zIndex="101"; <br /> } <br /> // IE script to change class on mouseover <br /> var ieLIs = nav.getElementsByTagName('li'); <br /> for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) { <br /> // Add a sfhover class to the li. <br /> ieLIs[i].onmouseover=function() { <br /> if(!/\bsfhover\b/.test(this.className)) <br /> this.className+=" sfhover"; <br /> } <br /> ieLIs[i].onmouseout=function() { <br /> if(!this.contains(event.toElement)) <br /> this.className=this.className.replace(' sfhover', ''); <br /> } <br /> } <br /> } else { <br /> // IE 5.0 doesn't support iframes so hide the select statements on hover and show on mouse out. <br /> // IE script to change class on mouseover <br /> var ieLIs = document.getElementById('nav').getElementsByTagName('li'); <br /> for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) { <br /> ieLIs[i].onmouseover=function() {this.className+=" sfhover";hideSelects();} <br /> ieLIs[i].onmouseout=function() {this.className=this.className.replace(' sfhover', '');showSelects()} <br /> } <br /> } <br />} <br /> <br />// If IE 5.0 hide and show the select statements. <br />function hideSelects(){ <br /> var oSelects=document.getElementsByTagName("select"); <br /> for(var i=0;i<oSelects.length;i++) <br /> oSelects[i].className+=" hide"; <br />} <br /> <br />function showSelects(){ <br /> var oSelects=document.getElementsByTagName("select"); <br /> for(var i=0;i<oSelects.length;i++) <br /> oSelects[i].className=oSelects[i].className.replace(" hide",""); <br />} <br /> <br />// Run this only for IE. <br />if (window.attachEvent) window.attachEvent('onload', sfHover); <br />// end <br /> <br />

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