..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−アクセサリー(アコーディオンメニュー)

JavaScript 無料のフリースクリプト集...

◇アコーディオンメニュー

・JavaScriptで簡単に設置できるアコーディオンメニューです。
・JavaScriptの部分は10行程度です。(少し詰めましたが・・・)
・HTMLやStyleSheetについての知識が少し必要です。
・解説は下の方にあります。


タブのタイトル1
タブのタイトル2
タブのタイトル3
タブのタイトル4
タブのタイトル5

◇解説

  1. <body>タグ内の設置したい場所に、タブとその内容を1セットとしてメニューの数だけ設置します。
    赤字の部分がタブで、青字の部分が内容になっています。
    スタイルシートのwidthで幅をheightで高さをその他ボーダーや配色の設定をします。
    最初から閉じておきたい場合は、「display:none;」とします。(サンプルでは2番目のメニュー以降を閉じています。)
    赤字の部分には、タブの数をプログラムで数えるので、クラス名(class="tab")を付けます。
    また、マウスを重ねると呼び出される関数「menuAco(0)」を設定します。
    青字の部分には、ID名(id="menuA0")を付けます。
    関数「menuAco(0)」とID「menuA0」の数字の部分を同じ数字に設定してください。
    0から始めて、連番でいくつでも、メニューを増やすことができます。

  2. (ex.サンプルプログラムのタブ1)

    <div class="tab" style="text-align:left;width:388px;height:26px;border:1pxsolid gray;" onmousemove="menuAco(0)">
    タブのタイトル1
    </div>
    
        <div id="menuA0" style="text-align:left;width:388px;height:192px;border:1pxsolid gray;display:block;">
        本文1
        <br>
        JavaScriptを使った簡単アコーディオンメニュー
        </div>

  3. JavaScriptの部分は、<body>内に設置します。
    1|変数flgMenuは現在開いているメニューの番号を覚えるための変数です。初期値は100に設定しておきます。
    1|変数maxTabは組み込まれたメニューの数を覚えるための変数です。これらは、関数の外で設定することでグローバル変数となります。
    2|関数「menuAco(n)」の設定。nにマウスを重ねているメニューの数値を取得します。
    3|一番最初に関数が実行された時は、flgMenuは100の値なので4行め以降を実行します。
    4|変数objAcにページ内の<div>タグを取得します。
    5|ここで、メニューが何個存在するのかを数えて、変数maxTabに覚えさせます。
    7|変数flgMenuと取得した変数nが同じ場合は、開いているメニューにマウスを重ねている状態なので、なにもせずに返します。
    8|取得した変数nに対応するメニューを開き、他を閉じる作業です。
    11|現在開いているメニューの数値を、変数flgMenuに覚えさせて終わりです。

  4. (ex.サンプルプログラムのJavaScriptの部分)

     0|<script language="JavaScript"><!--
     1|var flgMenu=100;var maxTab=0;
     2|function menuAco(n){
     3|    if(flgMenu==100){
     4|        var objAc=document.getElementsByTagName("div");
     5|        for(var i=0;i<objAc.length;i++){if(objAc[i].className=="tab"){maxTab++;}}
     6|    }
     7|    if(flgMenu==n){return;}
     8|    for(var i=0;i<maxTab;i++){
     9|        if(i==n){document.getElementById("menuA"+i).style.display="block";}else{document.getElementById
       ("menuA"+i).style.display="none";}
    10|    }
    11|    flgMenu=n;
    12|}
    13|//--></script>
    



..


..