Menu con fading

**fredericks** · 14-07-2009, 11:58

Ciao...posto l'ennesima domanda sull'effetto fade. Non ho trovato soluzione nei precedenti post...
Vorrei fare un menu orizzontale con la struttura che vedete nel codice che ho postato. E' un esempio semplificato e ridotto, per concentrare il problema.

In pratica, sul primo livello...se passo col mouse, il secondo livello compare in verticale. Fin qui tutto ok, sia su FF che IE (per ie ho provato min-width, zoom e altri per permettere di ottenere l'effetto giusto).
Da secondo livello in poi...il menu si dovrebbe espandere in orizzontale (come i menu di qualsiasi applicazione eseguibile).
Per fare questo ho messo position:relative ai div con id item ed ho aggiunto un ulteriore div interno posizionato con position:absolute.
Su firefox, funziona a meraviglia. Invece, su ie non sono riuscito in nessun modo ad ottenere il risultato voluto. Quando vado su con il mouse, dal secondo livello in poi (sub1.1), gli elementi non vengono visualizzati per nulla. Se invece non uso il trucco del posizionamento relativo+assoluto (sub2.1),il fading funziona correttamente.

Per favore...qualcuno è in grado di capire cosa sto sbagliando? Ci sto diventando pazzo
Grazie
Federico

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<style>
#MenuSito{	
}

a {
	color:yellow;
	background-color:brown;
	width:140px;
	display:block;
	border:1px solid #990000;
}

div.headout{
	color:white;
	font-weight:bold;
	background-color:brown;
	width:140px;	
	border:1px solid #990000;
	cursor:pointer;	
}

div.level1item
{
	margin-bottom:2px;
}
</style>
<script>
function Show(id) {document.getElementById(id).style.display=""}
function Hide(id) {document.getElementById(id).style.display="none"}
function oShow(Obj) {if (Obj) Obj.style.display=""}
function oHide(Obj) {if (Obj) Obj.style.display="none"}

function GetOpacity(id) {
	Obj = document.getElementById(id);
	
	if (Obj.filters) return Obj.filters.alpha.opacity;
	if (Obj.style.opacity) return Obj.style.opacity*100;
	if (Obj.style.MozOpacity) return Obj.style.MozOpacity*100;
}

function SetOpacity(id,value) {
	Obj = document.getElementById(id);
	//alert(Obj.filters.alpha.opacity);
	if (Obj.filters) Obj.filters.alpha.opacity = value;
	if (Obj.style.opacity)Obj.style.opacity = value/100;
	if (Obj.style.MozOpacity) Obj.style.MozOpacity = value/100;
}

function FadeIn(id) {
	Show(id);
	for (i=0; i<=10; i++) {
		setTimeout("SetOpacity('"+id+"',"+i*10+")",i*10);
	}
}
</script>
<body>
<div id='MenuSito'>
	<div id='box1' style='float:left'>
		<div id='head1' class='headout level1item' onmouseover='FadeIn("item1");'>Sub1</div>
		<div id='item1' style='min-width:0;display:none;filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;'>
			<div id='box1.1'>
				<div id='head1.1' class='headout' onmouseover='FadeIn("item1.1");'>Sub1.1</div>
				<div id='item1.1' style='min-width:0;display:none;position:relative;filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;' >
					<div style='position:absolute;left:142px;top:-22px;'>
						Link1.1.1
						Link1.1.2
					</div>
				</div>
			</div>
		</div>		
	</div>
	<div id='box2' style='float:left'>
		<div id='head2' class='headout level1item' onmouseover='FadeIn("item2");'>Sub2</div>
		<div id='item2' style='min-width:0;display:none;filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;'>
			<div id='box2.1'>
				<div id='head2.1' class='headout' onmouseover='FadeIn("item2.1");'>Sub2.1</div>
				<div id='item2.1' style='min-width:0;display:none;/*position:relative;*/filter:alpha(opacity=0); opacity:.0; moz-opacity:.0;' >
					
						Link2.1.1
						Link2.1.2
					
				</div>
			</div>
		</div>		
	</div>
	Link3
</div>
</body>
</html>

**fcaldera** · 14-07-2009, 12:24

sinceramente mi sembra che questo menu abbia qualche problema anche su firefox che tralaltro si comporta come IE6 (suppongo quindi tu lo stia provando su IE8 o 7). i sottolivelli si sovrappongono passando da una voce all'altra.

posso suggerirti di 1) guardare sul sito cssplay.co.uk per scaricare un menu in puro css (ce ne sono a decine nella sezione menu, anche simili a quello che ti serve) e quindi 2) di aggiungere eventuali effetti attraverso javascript non intrusivo (magari prendendo come spunto per l'enhancement una tecnica di cui ho trattato su http://css.html.it/articoli/leggi/26...ascript-delay/)

**fredericks** · 14-07-2009, 12:36

innanzitutto grazie per la risposta...
il menu che ho postato non è completo...i livelli si sovrappongono perchè non c'è il fade out...quello che viene visualizzato non lo nascondo poi da nessuna parte.....se e quando funzionerà...al passaggio del mouse sul primo livello verranno nascosti prima i rami visibili.
Si...in effetti ho provato su ie7...sul 6 non so che effetto ha, buono a sapersi che si comporta come firefox.

Insommma...è normale che si sovrappongano per ora, non mi aspettavo che non succedesse. Quello che non capisco è perchè i sottolivelli di sub1.1 non compaiono

guardare sul sito cssplay.co.uk per scaricare un menu in puro css (ce ne sono a decine nella sezione menu, anche simili a quello che ti serve) e quindi 2) di aggiungere eventuali effetti attraverso javascript non intrusivo (magari prendendo come spunto per l'enhancement una tecnica di cui ho trattato su http://css.html.it/articoli/leggi/26...ascript-delay/)

ok...ci darò un'occhiata...grazie per la disponibilità

**loop** · 14-07-2009, 13:01

Hai considerato la possibilità di fare un meno in JS2 io ne ho fatti tanti e non ho mai avuto problemi.

**fredericks** · 14-07-2009, 13:10

Originariamente inviato da loop
Hai considerato la possibilità di fare un meno in JS2 io ne ho fatti tanti e non ho mai avuto problemi.

Credo di non conoscerlo...cos'è?

**loop** · 14-07-2009, 13:17

Originariamente inviato da fredericks
Credo di non conoscerlo...cos'è?

Semplicemente Javascript.
Faccio un esempio e te lo posto fra un paio d'ore, ora devo scappare

**fredericks** · 14-07-2009, 13:26

Originariamente inviato da loop
Semplicemente Javascript.
Faccio un esempio e te lo posto fra un paio d'ore, ora devo scappare

ah...beh ho frainteso...pensavo parlassi di qualcos'altro....
ma dici costruirlo interamente in javascript? Non ho provato...ma in ogni caso il risultato finale sempre html deve essere...

Cmq...giusto per chiarificare...quello che ho postato non è il menu vero. Il menu lo genero lato php leggendo un file xml, tramite il quale poi creo il menu grosso modo come ho postato...

**fcaldera** · 14-07-2009, 13:32

se posso dare un parere, un menu che dipende esclusivamente da javascript non è una buona idea in termini di accessibilità (e anche manutenibilità).

Ad ogni modo se propendi per questa strada (oltre ad essere spostato nel forum apposito) cerca di strutturarlo almeno in modo tale che sia visibile e funzionale in assenza di javascript e css...

**fredericks** · 14-07-2009, 14:50

Originariamente inviato da fcaldera
se posso dare un parere, un menu che dipende esclusivamente da javascript non è una buona idea in termini di accessibilità (e anche manutenibilità).

mah...sai la mia idea era quella di farlo quasi del tutto in css...usando poi il javascript per visualizzare/nascondere.
La cosa si è complicata quando ho voluto dare l'effetto di fading...con i problemi che vedi in explorer 7 (dato il tuo commento suppongo che succeda da ie7 in poi...)
Comunque...si..probabilmente dovrò prevedere la possibilità di javascript disabilitato. Ma prima volevo avere il piacere di vedere il menu con il fading funzionante. Pensavo fossero solo voci quelle che dicevano che ie7 avesse più problemi di ie6, ma visto quello che hai detto forse c'è un fondo di verità.

Mi spulcierò i link cmq...al limite lo costruisco con un'altra struttura il menu...ma cercherò lo stesso di scoprire il perchè delle voci sparite.

Grazie
Federico

**loop** · 14-07-2009, 16:09

Ecco il menu

Mi dispiace che solo ora mi accorgo che il fading funziona solo con IE

Discussione: Menu con fading

Strumenti discussione

Ricerca discussione

Visualizza

Menu con fading

Permessi di invio