Css orizzontale accordion – 14
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, 6,826 hits)
About The Author
Pikadilly
Splendido!
Onsitus
Guarda chi si vede!!!
Grazie Pika
patty
proprio quel che mi serviva
Titt@
Bellissimo… personalizzandolo è perfetto per il mio lavoro… COMPLIMENTI PER IL SITO!
danylo
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!
Onsitus
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.
Alle prime armi
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!
Onsitus
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.
Alle prime armi
Ciao, grazie mille ho seguito le tue indicazioni ed è andato tutto a posto!
Ciao
Franco
Ciao tutti! sto provando a fare un sito internet per la società di rugby di cui faccio parte e ho scoperto da poco i fogli di style css (prima ho provato ad “imparare” il linguaggio HTML, non soddisfatto dalla grafica mi sono buttato su questo)
Ho preso da questo sito questo menù che mi è piaciuto tanto, sono riuscito a metterlo sul mio sito ma ho un piccolo (grande per me) problema…
nella slide “apertura” vorrei mettere la parte iniziale di un articolo ed in fondo un link (Leggi il resto di questo articolo…) che mi manda ad un altra pagina nella quale vi sia l’articolo completo… IL PROBLEMA E’ CHE ME LO FA PERò MI METTE IL LINK IN UN “TENDINA” COME QUELLA DEL MENU GRANDE! vorrei evitare questa cosa…
Se qualcuno mi può dare una mano le sarò moooolto grato! intanto continuerò a leggere e cercare di risolvere il problema!
grazie mille
Rana Mukherjee
Awesome
name
dove sta l’html