選單實際執行畫面

e24TabMenu 是一個可置於網頁最頂端滑動可展示簡介內容的一個套件，選單可以平穩的展開與收縮。

使用方法：
首先載入必要的檔案
//Prototype 框架檔案
<script type='text/javascript' src='js/prototype.js'></script>
//Script.aculo.us 框架檔案
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
//主程式檔案
<script type='text/javascript' src='js/e24tabmenu.js'></script>


接下來，編寫HTML的代碼來定義選單。
<div id="menu" ><!---每一個表單的內容-->
<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>
<!---表單的選項-->
  <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>
<div id="maincontent">
    Contenido principal</div>
</div>

最後再JavaScript 的地方加入
oe24TabMenu = new e24TabMenu( 'menu', { duration: 1.0, transition: Effect.Transitions.sinoidal } );

附上可供修改的選項和可用的方法

參數	說明
duration	持續時間以秒為單位.預設為一秒
transition	動畫的進行方式.預設為 Effect.Transitions.linear Effect.Transitions.reverse，Effect.Transitions.wobble，Effect.Transitions.flicker 可選
callback	動畫完成後讀取的函式

方法	說明
toggleMenu	選擇其中的一個項目 例如 oe24TabMenu.toggleMenu($('3d'));

作者網站：http://www.flash-free.org/en/2008/04/05/e24tabmenu-%e2%80%93-menu-desplegable-ajax/
檔案大小：176 KB
檔案下載：http://www.flash-free.org/wp-content/files/e24tabmenu/e24tabmenu.zip
檔案備份：下載