e24TabMenu – Menú desplegable AJAX
Introducción
e24TabMenu es un plugin de scriptaculous que permite hacer un tab menú que al clicar sobre sus pestañas se expanden hacia abajo.
Demos
¿Cómo utilizarlo?
Incluya Prototype 1.6.0.2 y Scriptaculous 1.8.1 dentro del header del código HTML de la página. Incluya e24TabMenu después de ambos:
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> |
Ahora escriba el código HTML necesario para definir el menú. Necesitaremos una capa contenedora (“menu” en el ejemplo) y dentro de la capa contenedora pondremos una capa para cada elemento del menú donde podremos añadir el contenido correspondiente. A continuación añada un enlace (etiqueta “A”) para cada pestaña del menú, el atributo “rel” debe tener como valor e24menuitem[id_de_la_capa_del_contenido] donde id_de_la_capa_del_contenido es el nombre de la capa que contiene el contenido del elemento de menú a desplegar (en el ejemplo “ítem_3d”, “ítem_gall”, “ítem_menu”, “ítem_efec”). Además, después de los enlaces podemos añadir contenido que aparecerá cuando el menú no tenga ninguna pestaña desplegada.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <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--> |
Ahora veremos el código javascript necesario para el funcionamiento del menú, donde pasaremos como primer parámetro el id de la capa contenedora del menú “menu” y un array de parámetros para el efecto.
1 | oe24TabMenu = new e24TabMenu( 'menu', { duration: 1.0, transition: Effect.Transitions.sinoidal } ); |
Todas las Opciones
- duration: Un valor decimal que representa el tiempo en segundos que durará el despliegue de la pestaña del menú. Valor por defecto: 1.0
- transition: Función que modifica cada punto de la animación: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker
- callback: función que se llamará cuando se complete la animación, útil para concatenar animaciones.
Métodos
- toggleMenu: Despliega o expande una pestaña de menú según sea el caso. Requiere como parámetro el objeto referente al enlace correspondiente al elemento de menú en cuestión.
?Ver código JAVASCRIPT
1
oe24TabMenu.toggleMenu($('3d'));
Errores conocidos y cosas por hacer
- Permitir el menú en varias direcciones, de abajo hacia arriba, izquierda a derecha, derecha a izquierda.
Descargar
e24TabMenu 0.8 beta (176 KB)
Si quieres saber en qué trabajo ahora sígueme en 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 [...]