 |
 |
« Creating Horizontal Accordion With MooTools JavaScript | How To Create Zoom-In On Mouseover With jQuery Plugin »
| Tweet |
|
|
|
In my previous blog post with video, we’ve seen designing a simple horizontal accordion using 3 large image buttons.
Though an accordion doesn’t need the use of images to work, I used them for ease of explaining the working of the accordion.
In this article we will use the original Michael Leideber horizontal accordion javascript to design a slide show that will have a welcome message, 4 images with captions, and a contact section in the end having a form to enable viewers send emails.
Here is the accordion below. The 4 images have the tickers 1, 2, 3, and 4, and so does the contact section in the end with the word ‘contact’ arranged vertically.
Hover your mouse on the tickers to see how the slide-show functions. In future I’ll attempt to show more useful examples of accordion slide-show.
The CSS and the HTML codes used for designing this horizontal accordion slideshow are given below. You can copy+paste them for your use (CSS code, HTML code). But before we go to them, here is the video that gives a glimpse of how to do the accordion slideshow.
The CSS
The main focus will be setting the width of the accordion. Since each section opens for 400px – that’s the width of the images – and the width of each of 5 ticker portion is 14px, the total width of the accordion is set at 470px.
‘Display Block’ and ‘Display Inline’ are the other 2 important features. The second makes all the accordion sections to fall ‘inline’ and be displayed side by side. ‘Display Block’ presents the whole unordered list of the accordion in a block before letting any other style determine its appearance.
Here is the CSS code.
* {margin:0; padding:0}
#sm ul {
list-style: none;
width: 470px;
height: 300px;
display: block;
overflow: hidden;
}
#sm ul li {
float: left;
display: inline;
overflow: hidden;
width:400px;
}
The HTML Code
Note the ‘body onload’ statement. It loads the javascript that governs the operation of the accordion slideshow. Each section opens for 400px as evident in the second element within the parenthesis.
The last figure is ’1′ which ensures that the first section opens when the webpage, and therefore the javascript, loads. If you change the figure to 2, 3…up to 5, the corresponding section will open on the loading of the page instead of the first section.
Here is the HTML code.
<html><head>
<title>How To Create Horizontal Accordion Slideshow</title>
<link rel="stylesheet" type="text/css" href="slidemenu.css" />
<script type="text/javascript" src="slidemenu.js"></script>
</head>
<body onload="slideMenu.build('sm',400,25,8,1)">
<div style="float:left; width:470px; height:300px;">
<!-- "Slidemenu" begins -->
<div id="sm">
<ul>
<!-- 1st section -->
<li>
<img border=0 src="slideshow-start.png" />
</li>
<!-- 2nd section -->
<li>
<img border=0 src="morephoto-A.jpg" />
</li>
<!-- 3rd section -->
<li>
<img border=0 src="morephoto-B.jpg" />
</li>
<!-- 4th section -->
<li>
<img border=0 src="morephoto-C.jpg" />
</li>
<!-- 5th section -->
<li>
<img border=0 src="morephoto-D.jpg" />
</li>
<!-- 6th section -->
<li style="width:400px; height:300px; background-image:url('contact.png')">
<form style="margin: 0;" method="post" action="http://oi.vresp.com?fid=acd1e256a6" target="vr_optin_popup" onsubmit="window.open( 'http://www.verticalresponse.com', 'vr_optin_popup', 'scrollbars=yes,width=600,height=450' ); return true;" >
<table cellpadding="0" cellspacing="3" style="margin: 180px 60px 20px;" width=100>
<tr>
<td align=left valign=middle><label style="font:normal 20px arial;color:#f00;">Email:</label><br /><input name="email_address" size="12" /></td>
<td align=left valign=middle><label style="font:normal 20px arial;color:#f00;">Name:</label><br /><input name="first_name" size="12" /></td>
<td align=left valign=bottom><input type="submit" value="I Want It!" style="margin: 0 auto; font: normal 12px verdana; height:22px;" /></td>
</tr>
</table>
</form>
</li>
</ul>
</div>
</div>
<div style="clear:both;"></div>
<!-- "slidemenu" ends -->
</body>
</html>
| Tweet |
|
|
|
This article of August 1st, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
14 Comments
Trackbacks/Pingbacks
- SOME THANK YOUS ARE IN ORDER 4.24.2011 | Kyle Darling - [...] site up and running. Also thanks to Partha Bhattacharya who had a very awesome and easy to follow tutorial. ...
- SOME THANK YOUS ARE IN ORDER 4.24.2011 | Kyle Darling - [...] site up and running. Also thanks to Partha Bhattacharya who had a very awesome and easy to follow tutorial. ...
Thanks
Great!
Thanks you SO much for this! I have been looking for a tutorial like this but most of them were very difficult. I am almost done but I have one small problem. I can’t seem to figure out why I have a blank space on the right side of the slider. I keep checking the numbers and I can’t find anything wrong. Do you have any advice?
http://members.cox.net/kyledarling
Thanks again!
@Kyle,
Glad that you liked the tutorial. I looked at your website. Nice design… touch of class I’d say! As for blank space on the right, I think it has to do with the dimensions. Also, check the accordion in all browsers.
Best wishes!
Thanks for the prompt response!
I couldn’t figure out what was going on with the blank space so I just added another accordian tab for “blog” and it looks great! Thanks again for you help. I’ll put a link to your site once I get mine completed.
@Kyle,
Oh, that’s smart! It’ll be kind of you to put a link. My sincere thanks for that!
Best wishes once again!
It is so simple and easy to install, I had a problem because I have other scripts running and all the other slide shows seem to clash with mine. Yours did it with no problem. I would like to know how what are the percentage in the increase in which script to have it with 650px long. Is it possible?
Thank you
I just recently finished my website. I have a link on there to you. Thanks again for this nice tutorial.
@H.Coulange did you adjust the second number from 400 to 650 in this little string of numbers:
@Kyle,
You kept your word! You’re awesome! Thank you.
Partha
Hi, do you know how to code a autoplay/autoscroll to the above accordion menu?
@Jinyong, take a look at this: http://www.2webvideo.com/video-production/3-slideshows-with-same-jquery
didn’t work with me :S I don’t know why! I did exactly the same as it explained here but it didn’t work.. it just display the first image only.
I created two pages, one for the slidemenu.css and another page called slide.html and I attached the slidemenu.css with this page. I also downloaded those pictures up there and I checked the images paths.
any ideas??
Thank you.
@Mina, wish I could help you..! Constraint of time! Still, show me the page where you’ve it. I don’t promise but I’ll try to check it out!
Partha
i like your article and slideshow and i want to use this
but i need your help in this code
where is SLIDEMENU.JS file in the list .. i could not find this file ..
please give me this file in my mail through attachment or suggest me how to use this or get this file
email me here please
mittul@orangewebtech.com
thanks a lott ..
@mittul, go to this page, http://www.2webvideo.com/video-production/demo/h-accordion-slideshow/h-accordion-slideshow.html. Get the page source. Click the slidemenu.js link in the head section. Copy+paste the script in a text editor. Save the file for use.
Hope this helps.