e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.

Usage

Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24TabMenu after both:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24tabmenu.js'></script>

Next, write the necesary HTML code to define de menu. We will need a container layer (“menu” on the example) and inside the container we will have a layer for each menu item where we will add its content. After that, add links (html tag “A”) for each menu’s tab, the “rel” attribute value must be e24menuitem[layer_id] where layer_id is the id of the content layer (on the example “ítem_3d”, “ítem_gall”, “ítem_menu”, “ítem_efec”). Bellow the links we can add contents that will show when all tabs are collapsed.

<div id="menu" ><!---menu container-->
<div id="item_3d" class="menutarget">
	Contenido</div>
<div id="item_gall" class="menutarget">
	Contenido</div>
<div id="item_menu" class="menutarget">
	Contenido</div>
<div id="item_efec" class="menutarget">
	Contenido</div>
<!---tabs del menu-->
  <a id="3d" href="#3d" rel="e24menuitem[item_3d]"><img src="img/3d.gif" alt="Efectos 3D" /></a>
  <a id="gall" href="#galerias" rel="e24menuitem[item_gall]"><img src="img/galerias.gif" alt="Galeria de fotos AJAX" /></a>
  <a id="menus" href="#menus" rel="e24menuitem[item_menu]" ><img src="img/menus.gif" alt="Efectos de Menus" /></a>
  <a id="efec" href="#efectos" rel="e24menuitem[item_efec]"><img src="img/efectos.gif" alt="Otros efectos ajax" /></a>
  <!---tabs del menu-->
<div id="maincontent">
	Contenido principal</div>
<!--texto--></div>
<!--menu container-->

Finally we write the necesary javascript code to define the menu. As first param we will pass the container layer id , and as second param an option’s array.

oe24TabMenu = new e24TabMenu( 'menu', { duration: 1.0, transition: Effect.Transitions.sinoidal } );

Options

• duration: Decimal, representing the time in seconds that will take the menu item movement. Default value: 1.0
• transition: Function that modifies each animation’s point: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker
• callback: callback function that will be processed once the animation is complete. It is useful to concatenate animations.

Methods

toggleMenu: Toggles the tab. Requieres the object reference of the corresponding link.

oe24TabMenu.toggleMenu($('3d'));

The article source:http://www.flash-free.org/en/2008/04/05/e24tabmenu-%E2%80%93-menu-desplegable-ajax/