Ajax Coding: Top Drop Down Menu

In this Ajax Coding we are going to design a menu which can slide downwards and we can put some content in that dropdown area.

First we need to add the script in the head menu,

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

After Adding Script, now we need to design the menu using HTML tags,

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

Now we have to add the java script in menu,

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

Download the Top Menu sliding using Ajax Coding