AJAX24 » e24TabMenu – Menú desplegable AJAX

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:

<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.

<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.

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.
```
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)

Esta entrada fue publicada el Sábado, 5 de Abril, 2008 a las 2:14 am categorizada como General, Javascript, Menú, Prototype, Scriptaculous, Componentes, Efectos. Usted puede seguir las respuestas a esta entrada a través del feed RSS 2.0. Puede dejar un comentario, o enlazarlo desde su propio sitio.

26 Respuestas para “e24TabMenu – Menú desplegable AJAX”

La web de Ramón Castro » Blog Archive » Ajax (menús espectaculares) Dice:
18 de Abril, 2008 a las 4:00 pm
[…] 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 […]
Departe Dice:
21 de Abril, 2008 a las 10:50 pm
Thanks, nice work. The tabs look great.

I had to switch browsers to get the demonstration showing in the iframe.
aartiles Dice:
21 de Abril, 2008 a las 11:04 pm
Thanks, tell me please which browsers are failing with iframes.
Departe Dice:
22 de Abril, 2008 a las 12:25 pm
It’s internet explorer. I checked the lightbox site and it works there, could be a conflict or you need an update.
Ignacio Coloma Dice:
30 de Abril, 2008 a las 8:18 am
Nice script. When middle-clicking in firefox, I would expect that the tab opens as selected in a new window/browser tab.
Mike Dice:
6 de Junio, 2008 a las 1:10 am
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.
webeame.net Dice:
16 de Junio, 2008 a las 7:36 pm
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…
sha Dice:
13 de Julio, 2008 a las 4:49 am
Actually the problem in opera 9.5, is the height, that is too small.
zhar Dice:
14 de Julio, 2008 a las 4:39 am
why the menu is covered by swf file?? please help me
pligg.com Dice:
16 de Julio, 2008 a las 3:39 pm
Ajax: Dropdown Tab Menu…

Un plugin scris pentru scriptaculous. In esenta un tab menu care se extinde si colapseaza usor….
0423961559 Dice:
23 de Julio, 2008 a las 8:27 am
Hi thanks for a great script…Any ideas on a vertical version…..sorry i don’t speak Spanish.

x
Sarah
Pradeep Dice:
24 de Julio, 2008 a las 6:55 am
Hi,

This is awesome tab technique

I tried it myself… it worked…

Thanks
aartiles Dice:
25 de Julio, 2008 a las 9:46 pm
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.
free Dice:
31 de Julio, 2008 a las 2:03 am
hey…

nice…
Al Dice:
31 de Julio, 2008 a las 3:10 pm
Can this tab menu used from the bootom of the page going up?
aartiles Dice:
2 de Agosto, 2008 a las 8:39 pm
The tab menu appearing from diferent directions will be ready on the next release.
Jak Dice:
1 de Septiembre, 2008 a las 6:17 am
is it possible to have the contents dynamically loaded using prototype?
Rafael Dice:
3 de Septiembre, 2008 a las 2:52 am
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.
adommurmoulp Dice:
23 de Septiembre, 2008 a las 3:19 am
thank you, man
rapidshare links Dice:
28 de Septiembre, 2008 a las 11:30 am
greatings…

wonderful…
sv creation Dice:
30 de Septiembre, 2008 a las 7:37 pm
That are great Ajax tutorial thanks
Rafael Dice:
11 de Octubre, 2008 a las 1:56 pm
Someone out there has to know how to activate this “onMouseOver” instead of “onClick” there has to be a way!!!
KaBaDaYi Dice:
16 de Octubre, 2008 a las 9:04 am
#menu {
position: relative;
height: 500px;
margin-left: 5px;
}

how ?

height: 500px; auto pixel ?
vanessa Dice:
21 de Octubre, 2008 a las 5:14 am
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?
Pablo Dice:
14 de Noviembre, 2008 a las 3:35 pm
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!
PAblo Dice:
14 de Noviembre, 2008 a las 3:42 pm
quiero lo mismo, pero que deslice para la derecha.. alguien sabe como hacerlo?

e24TabMenu – Menú desplegable AJAX

26 Respuestas para “e24TabMenu – Menú desplegable AJAX”

Dejar un Comentario

Páginas

Archivo

Categorías