CSS horizontal accordion – example 14
After the example of a vertical css news accordion, this a new example of css accordion in horizontal.
This css example displays a div element on opening and a serie of links viewable on the hover state like a horizontal slide. Each link contains more inline elements:
- b: the name of the links
- img: the background image
- em: the semi transparent background (using the property css3 opacity) of the text content
- span: the text related to the link
Css horizontal 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.
Tested with IE6+, Firefox2+, Safari3+, Opera9+
css-menu-14.zip (161.5 KiB, 6,231 hits)
About The Author
Drona
The accordion script is damn AWESOME!!! I used it in making the college website and the committee overlooking the development was impressed!!! A BIG THANK YOU to you!!! I tried using jQuery and AJAX and everything to get that effect but this is simply superb!!!
May the force be with you
Code Ninja
banty love style
best