Dopo l’esempio del css news accordion in senso verticale, ecco un nuovo esempio di accordion nel senso orizzontale.
Questo esempio css, visualizza un elemento div in apertura e una serie di link che si aprono sullo stato hover orizzontalmente tipo slide. Ogni, link contiene più elementi ‘inline’:
- b: la voce del link
- img: l’immagine di sfondo
- em: lo sfondo semi trasparente (usando la proprietà css3 opacity) del relativo testo descrittivo
- span: il testo descrittivo relativo al link
Css orizzontale accordion:
CSS ACCORDION ORIZZONTALE.Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
S
L
I
D
E
1
INSERISCI QUI IL CONTENUTO DELLA SLIDE 1.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.S
L
I
D
E
2
INSERISCI QUI IL CONTENUTO DELLA SLIDE 2.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.S
L
I
D
E
3
INSERISCI QUI IL CONTENUTO DELLA SLIDE 3.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.S
L
I
D
E
4
INSERISCI QUI IL CONTENUTO DELLA SLIDE 4.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.S
L
I
D
E
5
INSERISCI QUI IL CONTENUTO DELLA SLIDE 5.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Provato su IE6+, Firefox2+, Safari3+, Opera9+
css-menu-14.zip (161.5 KiB, 2,682 hits)
{ 9 comments… read them below or add one }
Splendido!
Guarda chi si vede!!!
Grazie Pika
proprio quel che mi serviva
Bellissimo… personalizzandolo è perfetto per il mio lavoro… COMPLIMENTI PER IL SITO!
ciao!
l’effetto e’ meraviglioso, pero’ effettivamente l’hover e’ scomodo, sarebbe piu’ comodo un click, senza usare js ma solo css,
ho visto una furbata qui
http://www.raggiorosso.com/Style/Examples/007/target.html#default2 (un’interfaccia a schede)
in pratica il div visibile viene agganciato al click sull’ancora.
c’e solo un problema, se mettiamo il nostro “oggetto” sul basso di una pagina un po’ lunghetta, al click sull’ancora, la pagina si riposiziona mettendo l’”oggetto” in alto, provocando uno scomodo saliscendi,
ma se tu (che sei un genio di CSS) riesci a far in modo che la pagina rimane ferma quando clicchiamo sui link ancore………
e allora si’!!
grazie di cuore!
Ciao Danylo, bella idea. Avevo sentito parlare del nuovo selettore :target ma è il primo esempio che vedo. Un altro problema da prendere in considerazione è che :target non è compatibile con Internet Explorer e causa qualche problemi con Opera.
Ciao a tutti, io mi sono cimentata da poco con la realizzazione di un sito web per il quale mi sarebbe piaciuto adattare questo css orizzontale. Purtroppo una volta aperto il file zippato ed estratto il contenuto ho visto che non “funzionava”. Io uso Seamonkey per creare il sito, non ho grandi pretese, ma questo progetto si sarebbe adattato davvero bene, purtroppo non riesco a farlo funzionare. Sono riuscita solo ad abilitare le immagini eliminando “img/” prima del nome del file .jpg nel html sorgente. Grazie e sei bravissima!
Ciao, mai usato Seamonkey. Comunque il menu una volta ‘unzippato’ funziona come tale senza cambiare i path degli immagini o del css. Visto che senza la parte img/ nel html visualizza le immagini, mi fa pensare che tutto i file stanno messe nella stessa cartella. In quel caso, controlla l’url al file style.css a l’inizio del file html. Di origine è css/style.css, magari devi anche rimuovere css/…se no, se hai la possibilita di mettere la tua pagina che hai creata online, posta il link e si potrà capire dove è il problema.
Ciao, grazie mille ho seguito le tue indicazioni ed è andato tutto a posto!
Ciao