Horizontal javascript accordion is good for creating menus, presentations, and much more.
You may have come across an example of horizontal javascript accordion on this site’s homepage. That one and the one below are both inspired by Michael Leigeber’s lightweight 1kb javascript based on MooTools compact framework.
As you hover mouse pointer over the 3 buttons below, observe how each of them automatically spreads to reveal more content. This can be a way to accommodate some more contents in a webpage for the benefit of search engines yet not readily visible to a visitor to the page.
The content can be text, image, or even a form for say inviting subscription for rss feed.
The video below demonstrates how to use Michael’s script to create your own html for showing a horizontal accordion on your webpage.
The Steps
Here are the steps followed for making the horizontal accordion above:
- 3 buttons, each 120×90 pixels, are made.
- Michael Leigeberg’s javascript is downloaded and unzipped. The script to be used here ensures that the accordion automatically shifts to the original position on mouseout.
- The CSS file for playing the javascript is now made. It’s given below.
- Finally, the html for the webpage is made, also given below.
The CSS File
Though not necessary, I’ve termed the accordion ‘ha’ in place of ‘sm’, and made small changes in Michael’s script accordingly.
The 3 buttons are made to appear as unordered lists having no list type, no overflow, no space in between, and display being ‘inline’. This means that within the length and height of the unordered list, taken as 360px (3x120px) and 90px, all the 3 buttons will appear side by side.
The length of each section (for each button) denoted by the ‘p’ tag is also made 360px. This will ensure that on mouseover event each button will expand to fully hide the other 2 buttons.
The rest of the page-style concerns about how the content for each button will be – their background colors, font style, link style, etc.
* {margin:0; padding:0;}
body {background-color: #fff; margin:0;}
.ha {list-style:none; width:360px; height:90px; display:block; overflow:hidden;}
.ha li {float:left; display:inline; overflow:hidden;}
.ha li img {padding:0; margin-right:5px;}
.ha li.left {background:#c0c000; }
.ha li.middle {background:#d3d2d0; }
.ha li.right {background:#ff0000; }
.ha p.left {
font:normal 11px verdana; color:#202000;
line-height: 14px; background:#c0c000;
margin:0 10px 0 0; width:350px;
height:88px; display:block;
}
.ha p.middle {
font:normal 11px verdana; color:#333;
line-height: 14px; background:#d3d2d0;
margin:0 10px 0 0; width:350px;
height:88px; display:block;
}
.ha p.right {
font:normal 11px verdana; color:#fff;
line-height: 14px; background:#ff0000;
margin:0 10px 0 0; width:350px;
height:88px; display:block;
}
.ha a.right {
color: #fff;
text-decoration: underline;
}
.ha a.right:hover {
color: #fff;
text-decoration: none;
}
The Html File
Two things are of importance…1) calling the 2 external files, the CSS & the JS files, in the head section, and 2) putting the slidemenu javascript into action as the webpage displays in the browser with ‘body onload’ command:
<body onload="slideMenu.build('ha',360,10,10,1)">
Note the 5 parameters within the parenthesis (). The first refers to the id of the unordered list that controls the accordion. The second is the width in pixels that a particular accordion selection expands to.
This width is made 360px in the example above, which means when each accordion portion expands, it completely hides the other 2 buttons.
The third is the timeout variable to control how quickly the sliding function is called. The fourth is the speed of the accordion with 1 being the fastest.
The last digit determines which accordion section will expand as the webpage opens and the accordion is loaded. Here it is shown ‘1’ meaning the first accordion will open, but in the actual html below this figure is not included.
Not including it ensures that all the accordion sections load in same and equal dimension, which is 120px.
Following is the html code, a bit simplified.
<html><head>
<title>Horizontal Accordion With MooTools</title>
<link rel="stylesheet" type="text/css" href="slidemenu-mt.css" />
<script type="text/javascript" src="slidemenu-mt.js"></script>
</head>
<body onload="slideMenu.build('ha',360,10,10)">
<ul id="ha" class="ha">
<li>
<img align=left src="twitter-logo.png" title="" />
<p class=left>
<b><u>Twitter</u></b><br /><br />
Among the most popular social media tools, Twitter has recently broken into top-50 most visited sites in the US.
</p>
</li>
<li>
<img align=left src="facebook-logo.png" title="" />
<p class=middle>
<b><u>Facebook</u></b><br /><br />Facebook is the third most popular web destination in India, coming after Orkut and YouTube.
</p>
</li>
<li>
<img align=left src="2wv-logo.png" title="" />
<p class=right>
<b><u>2WebVideo</u></b><br /><br />2WebVideo video making course is highly popular.<br /><br />Click <a class=right href="http://www.2webvideo.com">here</a> to check out now.
</p>
</li>
</ul>
</body>
</html>
 This article of July 30th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
