Esempio css gratuito di un effetto accordion verticale che visualizza le informazioni completi di testo ed immagine quando si passa sopra i titoli con il mouse.
Il CSS News Accordion Verticale:
CSS NEWS ACCORDION
Lorem ipsum
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. 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 has been the industry’s standard dummy text ever since the 1500s.Lorem ipsumLorem 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.Lorem ipsumLorem 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.Lorem ipsumLorem 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 ipsumLorem 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. 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 has been the industry’s standard dummy text ever since the 1500s.
css-news-accordion-10.zip (7.3 KiB, 1,716 hits)
Provato su IE6+, FF2+, Safari3, Opera9, Google Chrome su Windows.
{ 1 trackback }
{ 11 comments… read them below or add one }
Complimenti davvero carino. Ho però una domanda da farti. Devo fare in modo che l’utente scriva il testo in una pagina separata dalla home, in modo che, per errore, non modifichi la struttura. Se po fà?
Grazie
Buonasera Giovanna,
la prima idea che mi viene in mente sarebbe di usare un php include che carica il contenuto dentro l’elemento span.
Esempio:
<a href="#nogo">
<b>Lorem ipsum</b>
<span>
<? include("news.html"); ?>
</span>
</a>
In news.html ci sarà allora solo il contenuto.
Esempio:
<img src="img/css_news_accordion_pic.jpg" alt="" />
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
Io invece ho l’esigenza di creare un menù dove, cliccandoci sopra, si apre un sottomenù che man mano viene “popolato” che si appoggia su un database
Ciao Manuela,
per l’evento onclick dovrai passare a javascript mentre per prendere i dati dal database, credo che ti servira php (o un altro linguaggio server del genere).
Cerca su google le parole ‘database driven css menu’. Qualche tutorial ci sono in giro!
Una domanda … E se io lo volessi utilizzare in orizzontale?
Buonasera Patty,
barre/testo verticale che si aprono verso la destra in orizzontale?
Si intendevo proprio questo … Utilizzarlo in orizzontale piuttosto che in verticale …
Ciao Patty,
mentre l’apertura in verticale, non ha limite sullo spazio, in orizzontale sarebbe da dare misure fisse. Con misure fisse, il tutto diventa piu facile, basta cambiare la larghezza dell’elemento a sullo stato hover. Esempio: il link è inizialmente largo 30px, il suo contenuto (sempre posizionato in modo assoluto) nascosto con il overflow:hidden;, sul a:hover la larghezza passa a 400px per rendere il contenuto visibile e automaticamente fare spostare le altre voce del menu a destra o sinistra.
Vedro se posso postare un nuovo esempio per lunedi!
ciao a tutti, ho sistemato questo splendido css su http://www.carfilm.it/oscuramento-con-pellicole-per-auto.php ma con FF non riesco a visualizzare correttamente gli elementi.
sarebbe più pratico una comportamento ONCLICK piuttosto che AHOVER. come posso modificare?
grazie, daniele.
Ciao Daniele,
con un po di ritardo, dovrebbe integrare un javascript per gestire l’evento onclick. Se vai a vedere la mappina d’italia (http://css.flepstudio.org/css-menu/css-mappa-italia-8.html) , un utente l’ha fatto (in fine del articolo). Sarebbe piu o meno stesso procedimento!
…niente da fare…
ho messo per prova
#news a:active span{
background-color:#FF0000;
display:block;
}
su IE si blocca ma quando vado a scorrere giù con lo scroll laterale ritorna allo stato iniziale.
su FF non si blocca per nulla.