Effetto a comparsa

[stecube]

Ciao, vorrei realizzare un effetto a comparsa come nella voce di menu in alto a destra su questo sito.

Ho provato a studiarne il codice sorgente, ma non ci ho capito granché.

Posso realizzarlo con il solo uso del CSS come mi pare di aver capito? Come posso farlo mantenendo la stessa velocità di comparsa?

Grazie a chi avrà il buon cuore di darmi una mano!

[miki003]

Si si potrebbe realizzare con i css, ma visto l'effetto di comparsa che presenta, penso ci sia anche del javascript:

Ti faccio un ESEMPIO in javascript

[stecube]

Grazie. Il tuo esempio presenta però caratteristiche diverse. Ovvero si passa il mouse sopra ad un punto e di fianco appare di punto in bianco una finestra. Quello che vorrei riuscire a fare io è invece quello di passare il mouse sopra ad una zona e poi che questa venga riempita con la finestra che scorre dolcemente. Serve comunque javascript per farlo?

[Mich_]

Con i CSS si puo` far apparire un oggetto, ma l'effetto e` immediato.
Le tecniche sono diverse, ma sfruttano tutte l'effetto :hover .

Per un movimento fluido e` necessario JS.
Essendo un menu, se fai solo con JS hai un effetto intrusivo: chi non ha JS abilitato non puo` fruire della pagina (e questo e` contro l'accessibilita` ed e` anche contrario all'usabilita`).

Quindi occorre usare tecniche di "progressive enhancement". Ecco alcuni link sull'argomento:
Graceful Degradation & Progressive Enhancement
Capire il progressive enhancement
Progressive enhancement con i CSS
Progressive enhancement con Javascript
Contenuti generati e progressive enhancement in Internet Explorer

Concludendo:
1. devi realizzare la cosa senza JS (ad esempio con i CSS)
2. applichi il JS per rendere il movimento fluido (e in parte sostituisci l'effetto CSS)

Per esempi di :hover con i CSS, puoi vedere le raccolte di menu (ad esempio i menu a tab, o i menu a tendina o sim) - Alcuni riferimenti tra i "link utili" - a me piacciono i menu di CSSplay.

[fcaldera]

Originariamente inviato da stecube
Serve comunque javascript per farlo?

sì. i css ti danno un passaggio immediato tra gli stati hover/non hover
(a meno che non usi le transizioni css supportate al momento solo da safari)

[stecube]

Grazie mille, gentilissimi!