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

The Markup:

Language: html

<ul id="callMe">
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>

• Content 1
• Content 2
• Content 3

The CSS:

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;
}

Examples Code:

$(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"
});

});

Demo: http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html

Download:http://www.portalzine.de/index?/Downloads/1/download/cS1hNjJkYTUzZTEwZjZlZTlkZDg1NjViNDUzMGQ5MzZlYi1pZC0yNTEzLQ%3D%3D/

Source: http://www.portalzine.de/index?/Horizontal_Accordion–print

Related Listings:

1. Horizontal and Vertical Accordion with scriptaculous This is a lightweight Horizontal and Vertical accordion that is...
2. Horizontal accordion with jQuery It is very simple, with a few parameters: speed set...
3. Jquery Accordion Menu A jQuery powered accordion content script. Group contents together and...
4. Accordion Plugin using Jquery Script This plugin is now part of jQuery UI and this...
5. Kwicks for jQuery – Horizontal Animated Menu Menu of a web page is the most important and...

Do you like this post?

Email: