Menu con submenu - cambio stato e dissolvenza

[MagicAlien]

Ciao a tutti, spero che qualcuno di voi possa aiutarmi. Suppongo che sia una modifica abbastanza banale, ma in questo momento non riesco ad ottenere quello che voglio.
Sto utilizzando come script quello che vedete in questa pagina.

Siccome mi serviva "onclick" ho sostituito la funzione nello script. Inoltre uso un css personale. Tutto funziona benissimo, vorrei però integrare 2 cose:

1) Vorrei che "onclick" cambiasse anche lo stato della voce di menu cliccata. (quello che dovrebbe fare <a onclick="this.className='nomeclasse';"> che in questa situazione non funziona)

2) Il submenu appare con una dissolvenza in Firefox ed in IE, ma non in Chrome (non so in Safari). E' possibile fargli fare la dissolvenza anche in chrome?

Vi sarò molto grato se mi aiuterete.
Saluti, Davide.

[MagicAlien]

Per praticità, vi incollo qui il codice JavaScript:

var mastertabvar=new Object()
mastertabvar.baseopacity=0
mastertabvar.browserdetect=""

function showsubmenu(masterid, id){
if (typeof highlighting!="undefined")
clearInterval(highlighting)
submenuobject=document.getElementById(id)
mastertabvar.browserdetect=submenuobject.filters? "ie" : typeof submenuobject.style.MozOpacity=="string"? "mozilla" : ""
hidesubmenus(mastertabvar[masterid])
submenuobject.style.display="block"
instantset(mastertabvar.baseopacity)
highlighting=setInterval("gradualfade(submenuobject)",50)
}

function hidesubmenus(submenuarray){
for (var i=0; i<submenuarray.length; i++)
document.getElementById(submenuarray[i]).style.display="none"
}

function instantset(degree){
if (mastertabvar.browserdetect=="mozilla")
submenuobject.style.MozOpacity=degree/100
else if (mastertabvar.browserdetect=="ie")
submenuobject.filters.alpha.opacity=degree
}


function gradualfade(cur2){
if (mastertabvar.browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99)
else if (mastertabvar.browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=10
else if (typeof highlighting!="undefined") //fading animation over
clearInterval(highlighting)
}

function initalizetab(tabid){
mastertabvar[tabid]=new Array()
var menuitems=document.getElementById(tabid).getElementsByTagName("li")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
menuitems[i].setAttribute("rev", tabid) //associate this submenu with main tab
mastertabvar[tabid][mastertabvar[tabid].length]=menuitems[i].getAttribute("rel") //store ids of submenus of tab menu
if (menuitems[i].className=="selected")
showsubmenu(tabid, menuitems[i].getAttribute("rel"))
menuitems[i].getElementsByTagName("a")[0].onclick=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}
}
}
}

[MagicAlien]

bump

[MagicAlien]

bump2

[lucavizzi]

Originariamente inviato da MagicAlien
Ciao a tutti, spero che qualcuno di voi possa aiutarmi. Suppongo che sia una modifica abbastanza banale, ma in questo momento non riesco ad ottenere quello che voglio.
Sto utilizzando come script quello che vedete in questa pagina.

Siccome mi serviva "onclick" ho sostituito la funzione nello script. Inoltre uso un css personale. Tutto funziona benissimo, vorrei però integrare 2 cose:

1) Vorrei che "onclick" cambiasse anche lo stato della voce di menu cliccata. (quello che dovrebbe fare <a onclick="this.className='nomeclasse';"> che in questa situazione non funziona)

2) Il submenu appare con una dissolvenza in Firefox ed in IE, ma non in Chrome (non so in Safari). E' possibile fargli fare la dissolvenza anche in chrome?

Vi sarò molto grato se mi aiuterete.
Saluti, Davide.

l'onclick che metti nel nel tag a viene sovrascritto qui:

menuitems[i].getElementsByTagName("a")[0].onclick=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
}

quindi per cambiare anche la classe del link dovresti fare:

menuitems[i].getElementsByTagName("a")[0].onclick=function(){
showsubmenu(this.parentNode.getAttribute("rev"), this.parentNode.getAttribute("rel"))
this.classname='nomeclasse';
}

riguardo la compatibilità, prova a sostituire tutte le occorrenze di 'MozOpacity' con 'Opacity' (Proprietà CSS supportata dale ultime versioni dei vari browser).

Luca

[MagicAlien]

Ciao Lucavizzi, innanzitutto ti ringrazio per il tuo aiuto.
Sto provando con il codice che mi hai consigliato, purtroppo però senza successo.
Ho messo online una pagina per farmi aiutare meglio: http://www.cmmkm.com/layout_dyn.html.

Come potrai leggere, ho modificato lo script come mi hai consigliato (file attaccato: js/cmmkm.js)
La classe la potrai leggere nel css (css/cmmkm.css) - ma sinceramente dubito di aver sbagliato in questo.

Ancora un grazie a chiunque voglia aiutarmi.

P.S.: per ora non ho modificato lo script per quanto riguarda l'opacity.

[lucavizzi]

className, non classname... Errore mio.

[MagicAlien]

Ciao Lucavizzi,
ho aggiornato il codice in js/cmmkm.js come mi hai detto tu. Avevo già provato in realtà, ma purtroppo ancora non funziona.
Ho anche provato ad usare "..." invece di '...' ; ed ho provato con this.style.color:"black"; ma nessun risultato.
Grazie ancora comunque.

[lucavizzi]

this.style.color="black";
non
this.style.color:"black";

visto che c'è già jquery nella pagina prova a cercare un menu scritto con quel framework, sarebbe anche compatibile con tutti i browser.

[MagicAlien]

Originariamente inviato da lucavizzi
this.style.color="black";
non
this.style.color:"black";

visto che c'è già jquery nella pagina prova a cercare un menu scritto con quel framework, sarebbe anche compatibile con tutti i browser.

Ciao Lucavizzi,
this.style.color:"black"; funziona! Però al click su un'altra voce di menu, non ritorna allo stato iniziale restando quindi in "black"
Forse hai ragione, mi converrebbe trovare qualcosa in jquery.
Nel caso avessi visto in giro qualcosa che al click apre un submenu, potresti linkarmelo?
Grazie ancora per il tuo aiuto.