This jQuery plugin allows you to easily transform any unordered list into a horizontal menu.

Release:

Current: 2.0.0 Alpha (tested on jQuery 1.3+)

Product releases follow this format X.YY.ZZ (i.e. 1.0.2)

X signify a major version related to production release.

YY signify a minor version with feature changes or additions.

ZZ signify patches and bug fixes. Minor features that do not introduce backward compatibility issues are ok.

Follow me on Twitter for the latest updates: http://twitter.com/portalzine

Currrent functionality:

• No dependencies
• Optional use of easing plugin
• Close and open content one after the other
• Close and open at the same time
• Choose trigger (mouseover, click ...)
• Easily control through external calls
• Open content on load
• Open content through hash tags in the url (#tab1, #tab2...)
• Position of handle (left, right)
• Mixed handle positions - 2 left , 2 right ...
• Cycle through content by interval
• Events when animations starts and ends
• Hide content until all has been assembled

Planned additions

• Open for suggestions
• Different width per container: "200,300,250,300", will require some rewriting for the animation handling
• jQuery CSS Framework option - Themeroller compliancy
• Degrade options
• Keyboard navigation

Tested on:

Browser	working	comment	planned updates
Firefox 3		works fine
IE 6		works with fixed width setting - other errors related to png images / css (add png fix)	will work on that further down the road :)
IE 7		works fine
Safari 3		works fine
Opera		works with fixed width setting	Seems to be a jQuery problem, as it sends back different width values on Opera. Looking into that.
Chrome		works fine
Konqueror		not working

Dependencies

• jQuery 1.3+
• jQuery Easing (optional)
• Make sure to load the css definitions before you load jQuery

Language: html
<ul id="callMe">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
© 2010 portalZINE

Language: css
/* hide container until all is ready */
.test, .test2,.test3,.test4{
	display: none;
}
/*Main Container*/
.container {
	width:100%;	
}
.container ul{
	list-style-type: none;
	margin: 0;
	padding:0;	
}
.container li{
	display: inline;
	margin: 0px;
	padding:0px;
}
/*Content Container*/
.contentContainer {
	padding-left: 0px;	
	float: left;
	width:0px;
	height: 310px;	
	overflow:hidden;
}
.contentWrapper{	
}
.contentInnerWrapper{
	text-align: justify;
	padding: 10px;
}
/* Handle*/
.handle{
	float: left;
	width: 38px;
	height: 310px;
	margin: 1px;
	margin-right: -10px;
	background:  url(../images/blade.png) no-repeat;
}
.handleOver{	
	background: url(../images/blade_sel.png) no-repeat;
}
.handleSelected{	
	background: url(../images/blade_sel.png) no-repeat;
}
 
© 2010 portalZINE

Language: javascript
$(document).ready(function() {
$(".test").hrzAccordion(
{eventTrigger:"mouseover",
openOnLoad:"",
cycle: true
});
 
$(".test4").hrzAccordion(
{eventTrigger: "mouseover",
openOnLoad   : "2",
handlePositionArray	: "left,left,right,right,right"
});
 
$(".test2").hrzAccordion(
{handlePosition    : "right",
openOnLoad     	: 5,
closeOpenAnimation	: 2
});
 
$(".test3").hrzAccordion(
{containerClass     : "container3",
listItemClass      : "listItem3",					
contentWrapper     : "contentWrapper3",
contentInnerWrapper: "contentInnerWrapper3",
handleClass        : "handle3",
handleClassOver    : "handleOver3",
handleClassSelected: "handleSelected3"
});
 
});
© 2010 portalZINE

Author: A.Graef | Revision: 1.0 | Last updated: 25.11.07 - 19:58 | Created: 25.10.07 - 20:58