Menu orizzontale css...al contrario!

[ivanisevic82]

Ciao ragazzi, ho bisogno di una mano per creare un menu css un pò particolare.

E' il classico menu orizzontale ma la particolarità è che quando sarò col mouse "hover", al posto di "attivarsi" la voce del menu su cui mi trovo, devono attivarsi TUTTE le altre, mentre quella su cui sono col mouse deve rimanere immutata.

Come è possibile fare una cosa del genere? Potete darmi qualche idea o spunto?

Grazie!

[Gufo]

Originariamente inviato da ivanisevic82
Ciao ragazzi, ho bisogno di una mano per creare un menu css un pò particolare.

E' il classico menu orizzontale ma la particolarità è che quando sarò col mouse "hover", al posto di "attivarsi" la voce del menu su cui mi trovo, devono attivarsi TUTTE le altre, mentre quella su cui sono col mouse deve rimanere immutata.

Come è possibile fare una cosa del genere? Potete darmi qualche idea o spunto?

Grazie!

Devi usare JS es:
If (se)
else premo 2
allora 1 e 3 si attivano
else (altrimenti)
premo 1
allora 2 e 3 si attivano
ecc.ecc.

[ivanisevic82]

Quale sarebbe il modo più semplice per farlo SENZA js?

Ad esempio, questo metodo è valido?

http://www.3point7designs.com/blog/2...ss-menu-trick/

[fcaldera]

se fai un menu a liste di link è impossibile farlo in puro css e crossbrowser

perchè dato l'hover sul link dovresti salire di un livello (cioè raggiungere l'elemento[*] è questo è impossibile perchè non esiste un selettore di ascendenza "<" ) e poi agire sui link di tutti gli altri[*] ovvero raggiungere i nodi adiacenti con un selettore di "adiacenza generale" (~) prevista solo nei CSS3

in altre parole ti serivirebbe una regola del tipo

(li < a:hover) ~ li ul { display:block; }

che al momento è decisamente impraticabile.


Se vuoi sposto la discussione su javascript.

[ivanisevic82]

No no no per favore, sono fuggito da li proprio perchè non era un problema di js!!!

Se avete visto la guida che ho postato poco sopra, li creano l'effetto di qui stiamo parlando, tutto in css.

Io sono riuscito a riprodurlo qui:

www.ivanisevic82.com (guardate SOLO la parte arancione, ovviamente si tratta di test).

Vi sembra tutto corretto?

Il codice che ho usato io sarebbe questo al momento:

CSS

#main_nav { 
list-style: none;
margin: 0;
padding: 0; 
}

#main_nav li { 
float: left; 
list-style: none;
}

#main_nav li a { 
text-indent: -999999px; 
overflow: hidden; 
display: block; 
height: 80px; 
} 

#home{ background: url(/media/1.jpg); width: 103px; }
#why { background: url(/media/2.jpg); width: 103px; }
#try { background: url(/media/3.jpg); width: 103px; }


#home:hover { background: url(/media/1.jpg) 0 0 !important; }
#why:hover { background: url(/media/2.jpg) 0 0 !important; }
#try:hover { background: url(/media/3.jpg) 0 0 !important; }

#main_nav:hover li a#home { background-position: -206px; }
#main_nav:hover li a#why { background-position: -206px; }
#main_nav:hover li a#try { background-position: -206px; }

PHP

<ul>
	[*]<span></span>home
	[*]<span></span>why
	[*]<span></span>try[/list]

[Gufo]

A parte che non capisco l'utilità, ma io vedo che sia meglio un piccolo JS che tutta quella pappardella