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

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

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.

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

Arreglo para IE6 con Hover y Selects usando Suckerfish I

Ya sé que esto no tiene nada que ver con los alegatos de siempre pero seguramente va a ayudar a muchos a dejar de alegar contra Microcrap y el IE6. Muchos de Uds. se han encontrado que cuando crean un menú, basado en Suckerfish y Son of Suckerfish (menús basados en Listas, manejados por CSS y absolutamente accesibles), se topan con problemas a la hora de visualizarlos en IE6.

La primera corrección la dan en el mismo sitio del Suckerfish y consiste en un pequeño Javascript que ayuda a que el burro IE6 se de cuenta que al pasar sobre un elemento UL estoy haciendo HOVER, tal cual como al pasar por sobre un link (a:hover) [IE6 no lee hovers más que sobre un A].

Con esto podríamos quedarnos tranquilos y nunca caer en ningún problema y reírse de IE6. Sin embargo, si por alguna razón, alguien decidiera colocar un SELECT justo bajo (o al lado) del despliegue del menú Suckerfish, se percatará que ello hace aparecer los submenús ¡¡¡BAJO el SELECT!!! Como pueden ver, el DIV en gris queda BAJO el SELECT. Lo mismo pasa con el menú Suckerfish. Luego de hurguetear internet por cerca de 6 horas, conseguí descubrir entre un montón de basura y soluciones inoperantes, un sitio que tenía una implementación del año 2006: Tanny O'Haley's Weblog.

La solución era el Javascript pequeño que usaba el menú Suckerfish, más varias líneas de código donde, luego de identificar mediante el CLASS o el ID, el UL del menú, ejerce una solución con iframes (que otros ya han medio implementado y que no siempre funciona, les dije que probé todo), y funciona perfecto (dentro de lo que IE6 considera perfecto).

La solución consta de un poco de trabajo a nivel de código y de edición en el Javascript y en CSS y HTML... aunque es obvio ¿no?

En el siguiente post colocaré la primera parte que es echar a andar el menú suckerfish.

Technorati Tags: Hover,Selects,Suckerfish,menú,Listas,Javascript,SELECT,BAJO

Windows Live Tags: Hover,Selects,Suckerfish,menú,Listas,Javascript,SELECT,BAJO

WordPress Tags: Hover,Selects,Suckerfish,menú,Listas,Javascript,SELECT,BAJO

Bienvenidos!

Desde aquí podré escribir más tranquilamente todo lo relacionado con código html, javascript, diseño, css, gráfica, arquitectura, implementación, cms’s, etc. y las soluciones que he ido encontrando para diversos problemas que se presentan en la vida diaria de un diseñador gráfico enfocado a la web.

Espero que le puedan sacar provecho y les sea de utilidad.

Saludos!

Technorati Tags: usabilidad,accesibilidad,información,Bienvenidos,arquitectura,implementación,diseñador

Windows Live Tags: usabilidad,accesibilidad,información,Bienvenidos,arquitectura,implementación,diseñador