menu hover

[helenp]

Hola,
Tengo un menu css que usa hover, es que hover es lo suyo porque lleva varios niveles y me acabo de enterar que no fucniona en pantallas táctiles el hover...

Tengo en el css esto entro otro:
#menu ul ul .level2:hover {color:#000099; background:#FFFF99;}
#menu a:hover {color:#000099; background:#FFFF99;}
#menu li:hover {position:relative; z-index: 500;}
#menu ul ul {position:absolute;}
#menu ul ul ul {top:-1px; left:100%;}
div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul {display: none;}
div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul {display: block;}

He enctontrado un pagina que se trata de prepara la web para iphone, y no sé si la solución vale para todo o solo para iphone y como no tengo nada táctil, pues es dificil de comprobar.
He encontrado este javascript que supuestamente cambiaría el hover por ontouche:
var myLinks = document.getElementsByTagName('a');
2 for(var i = 0; i < myLinks.length; i++){
3 myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
4 myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
5 }

Si alquien me puede guiar, gracias.

[MARCASTELEON]

hola, el script que pusiste le pone una clase a los LINKS (solo etiquetas <a>) de la pagina cuando los estas "tocando" y cuando dejas de tocarlos quita la clase. Osea que no te servira para las listas ni divs, etc. No tengo clara la estructura del menu pero podrias hacer un escript como este pero para los "li" de la lista.

[helenp]

Iniciado por MARCASTELEON

hola, el script que pusiste le pone una clase a los LINKS (solo etiquetas <a>) de la pagina cuando los estas "tocando" y cuando dejas de tocarlos quita la clase. Osea que no te servira para las listas ni divs, etc. No tengo clara la estructura del menu pero podrias hacer un escript como este pero para los "li" de la lista.

Gracias, me di cuenta despues,
y como lo podia ser para li? algun enlace?

la lista es asi, en el mas larga hay dos niveles de li, lo necesito para li en general y en este caso tambien para li class="level2":
<ul>
<li><p>Properties&nbsp;<img src="new_arrow_down.gif" alt="Arrow down" border="0"></p>
<ul>
<li class="level2">Marbella Town Center&nbsp;<img src="new_arrow.gif" alt="Arrow right" border="0">
<ul>
<li class="level3"><a href="banana_beach_beachfront_apartment_marbella.h tm">Banana Beach (4-6 persons) 7 apartments 4*</a></li>
</ul>

Gracias

[helenp]

He preguntado en otro foro tambien y alli dice que solo se puede poner el menu onclick :(
Si es posible como dijo Marcacasteleon como se podia hacer?

var myLinks = document.getElementsByTagName('a');
2 for(var i = 0; i < myLinks.length; i++){
3 myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
4 myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
5 }

cambiando get document.getElementsByTagName('a') por ('li')
es asi de facil?
como no puedo hacerlo y probarlo, es complicado,
claro yo he probado los emuladores en internet pero con un ratón y claro el menu iba bien......

[MARCASTELEON]

Hola, siento la tardanza.
Como te habia mencionado anteriormente el script cambia la clase del elemento, por lo que debes hacer una clase css de mas para cuando esten "tocando" el elemento, que haga lo mismo del hover con el raton.

[helenp]

Iniciado por MARCASTELEON

Hola, siento la tardanza.
Como te habia mencionado anteriormente el script cambia la clase del elemento, por lo que debes hacer una clase css de mas para cuando esten "tocando" el elemento, que haga lo mismo del hover con el raton.

Como no entiendo mucho de javascript si te entiendo bien es solo hacer una clase css nuevo y poner algo asi, cambiar el tagname a li, y cambiar la clase hover a una clase css que llamo por ejemplo touch:

var myLinks = document.getElementsByTagName('li');
2 for(var i = 0; i < myLinks.length; i++){
3 myLinks[i].addEventListener('touchstart', function(){this.className = "touch";}, false);
4 myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
5 }


Gracias, lo intentare y que lo pruebe una amiga, como no tengo con que probar :)

[MARCASTELEON]

hola, puedes probarlo online en http://jsfiddle.net/

[helenp]

Iniciado por MARCASTELEON

hola, puedes probarlo online en [url]http://jsfiddle.net/[/url]

Gracias, lo he probado, pero me temo que no entiendo nada :(