Css news accordion – css esempio 10
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, 3,950 hits)
Provato su IE6+, FF2+, Safari3, Opera9, Google Chrome su Windows.
About The Author
Giovanna Petrachi
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
Onsitus
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
Manuela
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
Onsitus
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!
Patty
Una domanda … E se io lo volessi utilizzare in orizzontale?
Onsitus
Buonasera Patty,
barre/testo verticale che si aprono verso la destra in orizzontale?
Patty
Si intendevo proprio questo … Utilizzarlo in orizzontale piuttosto che in verticale …
Onsitus
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!
danielix
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.
Onsitus
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!
danielix
…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.
Giovanni
Ciao, spero che tu legga questo post, il mio problema è il seguente. Volevo utilizzare un metodo simile per creare un menu, usando solo il css, soltanto che ho notato un comportamento fastidioso del menu. Ovvero quando passo da un link all’altro, con il mouse, il menù si chiude bruscamente. Non c’è un modo, possibilmente senza usare javascript, per far si che si possa scorrere tranquillamente le varie voci senza che il menù si chiuda improvvisamente? Grazie.
Gio