Introdution

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

Demos

• All tabs hidden
• One tab expanded

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'));

Known Issues

• Add more directions like, down-top, letf-right, right-left.

Download

e24TabMenu 0.8 beta (176 KB)