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

Release:

Current: 2.0.0 Beta(tested on jQuery 1.3+ / 1.4+ /1.6+)

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

Tested on:

Browser	working	comment	planned updates
Firefox 4		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
IE 8		works fine
Safari 5		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 tested / working

Dependencies

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

The Markup:

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;
  }
 
© 2012 portalZINE

Example calls & options:

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"
  });
 
  });
© 2012 portalZINE

Downloads
Type	Name	Date	Hits	Download
	jQuery_Horizontal...	Feb 19, 2011	83943
Description: 2.00.00 Beta

jQuery Horizontal Accordion