e24TabMenu – Drop down AJAX menu
Introdution
e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.
Demos
Usage
Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24TabMenu after both:
1 2 3 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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.
1 | 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.
1
oe24TabMenu.toggleMenu($('3d'));
Known Issues
- Add more directions like, down-top, letf-right, right-left.
Download
e24TabMenu 0.8 beta (176 KB)
If you want to check what I am working on now, then follow me at twitter @aartiles24
Comentarios
Thanks, nice work. The tabs look great.
I had to switch browsers to get the demonstration showing in the iframe.
It’s internet explorer. I checked the lightbox site and it works there, could be a conflict or you need an update.
Nice script. When middle-clicking in firefox, I would expect that the tab opens as selected in a new window/browser tab.
Great tool. I also had trouble viewing the demonstration, though. I was working in Opera (9.50, build 4839). Switched to Safari and had no problems. But I had to switch back to Opera to post this comment. In Safari (3.1.1, build 5525.20) the “Envair Commentario” button is in accessible. It is hidden behind the footer.
Tab Menú Desplegable AJAX…
Menú de pestañas AJAX un tanto original, que despliega hacia abajo con un efecto deslizante suave. Muy útil para poner pestañas superiores con información adicional en nuestros sitios. Otra de las maravillas que nos trae AJAX24 de la mano de proto…
Ajax: Dropdown Tab Menu…
Un plugin scris pentru scriptaculous. In esenta un tab menu care se extinde si colapseaza usor….
Departe, Mike, Sha: Thanks for your help, i finally changed the lightbox component and i think that now it works ok on all browsers.
Zhar: i don’t knoe what do you mean,… i don’t have any swf there.
0423961559: A vertical tab menu is in my plans for the new release.
Pradeep: Thanks to you, let me know if you have any problem.
Este efecto es perfecto pero necesito que el menu se comiense “onMouseOver” en vez de “onClick”. Si me puedes ensenar como lograr esto te lo agradesia.
This effect is perfect but I need it to work “onMouseOver” not “onClick”. If you can show me how this can be achieved, I would appreciate it.
Someone out there has to know how to activate this “onMouseOver” instead of “onClick” there has to be a way!!!
hi there, this tutorial was just what i needed! thanks!
But let’s say i wanna shift the tabs to the bottom of the page, so that the content will move upwards instead of downwards.
how do i go about it??
can anyone help me?
hola.. estoy como loco buscando algo como esto, pero que se despliegue hacia la derecha!, o sea en forma horizontal.. la idea es que una pagina esta divida en 3 bloques.. izquierdo, centro, y derecho. Entonces se carga el primero (izquierdo) con la pagina, ahi pongo un vinculo, para que cargue el segundo, y este segundo se depliegue como loa hace este menu, pero horizontalmente.
jejej bueno si alguien tiene algun dato! como para modificar este script, me viene genial.
saludos!
Hi guys. This is great. I did notice that there is a height limitation of the content. For longer content, it will disappear. in IE I measured it at 650px from the top. Any advice on how to fix this?
que padre esta el menu gracias por tanta imaginacion y el tiempo que se ha invertido en ello y me servirá de mucho
Hi all!
this is great!
i need the links not to move with the div, because i want the links in other part of the document.
i installed the script and make it work, but when i press on a link, it moves down with the div.. then click again to close it and the link moves up with the div.
why¿? i have the links out of the container!
and i also removed these lines in the e24tabmenu.js file:
line 67: new Effect.Move ( p_eAnchor, { x: 0, y: p_eTarget.getHeight(), transition: this.m_iTransition, mode: ‘absolute’ } )
line 81: new Effect.Move ( p_eAnchor, { x: 0, y: 0, transition: this.m_iTransition, mode: ‘absolute’ } )
i think these lines are what makes the links to move down/up when click them… When remove them it works fine in Firefox. but not in any IE… in IE7 I’ve got this error:
‘Undefined’ is null or not an object
?¿¿¿
please, any help to make the links static???
Thanks al lot!!!
oh! i did it =)
it was easy… this things happends when you don´t read 
then… if you don´t want your links to move with the layers, just replace the y: value in line 67 for 0 (cero):
This: y: p_eTarget.getHeight(),
for this: y: 0,
then the links wont get the Height value from the layers and stay in cero. =)
good solution for now…
if someone has something better, please, let me know!
thanks!
great work with the tabs. i have a small question.
Is it possible to get the rest of the content on the page to move down or up according to the tab height ? I would be really greatful if someone can point this out.
cheers
M.S
I am also in interested in getting this working but I haven’t not been able to. Any help would be great thanks!
[...] principales de lo que se había venido a denominar Web 2.0. Ayer, navegando, me topé con esta página donde nos explican cómo incorporar menús emergentes en nuestras aplicaciones web usando un [...]