Index

HOME > プログラムTOP > JavaScript


メニュー三態(1) : ドロップダウンメニュー

　JavaScriptの実用的なTIPS集です。ここでは、JavaScriptでの使用を前提としたメニューのうち、select要素を利用したドロップダウン式メニューを考えてみます。この形式では、ユーザーは、クリックにより表示されたリストの中から、メニュー項目を選択します。
PageSectionContent
(1)ドロップダウンメニュー ・ボタンで移動 : プッシュボタンでページを移動させる
・選択時に移動 : メニュー選択時にページを移動させる
・選択時に移動・改良篇 : メニュー選択時に移動の別バージョン
(2)ツリービューメニュー ・テキストツリー : テキストのみのツリービューメニュー
・アイコンツリー/読込型 : アイコンを読み込んで加えたツリービュー
・アイコンツリー/据置型 : 設置済みアイコンを利用したツリービュー
(3)ナビゲーションメニュー ・CSSのみのメニュー : li またはtable要素とCSSのみを使って作成
・スクリプトの活用 : スクリプトを使用して作成
・ブロック・メニュー : 縦に配列するナビゲーション・メニュー

sasaraan programming

Exposition

■ボタンで移動

// JavaScript ソース
function Go_Click() 
{
    var index = document.Form1.Select1.selectedIndex;
    document.location = document.Form1.Select1.options[index].value;
} 
<!-- HTMLソース -->
<form name="Form1" style="margin:1ex; padding:0; font-size:13px;">メニュー : 
    <select name="Menu1">
        <option value="page1.html">PAGE 1</option>
        <option value="page2.html">PAGE 2</option>
        <option value="page3.html">PAGE 3</option>
        <option value="page4.html">PAGE 4</option>
    </select>
    <input type="button" value="GO" onclick="Go_Click()"/>
</form>
　最もオーソドックスな方法です。選択ボックスでページを選択し、[GO] ボタンでページを移動します。ボタンのクリックイベントに Go_Click 関数を結び付けています。
　ここでは、JavaScript側でオブジェクトを取得するために、name属性を利用しています。DOM を利用して id 属性を使用することもできます。この時は、getElementById メソッドを利用することになるます。
　また、ページの移動には document オブジェクトの location プロパティに場所を指定します。ただし、この方法だと、ユーザー側の操作は、「選択 → ボタン」と二段階になります。選択の一手間だけでページを移動するようにしたい時は次の方法を採ります。

■選択時に移動

// JavaScript ソース
function Option_Change() 
{
    var index = document.Form2.Select2.selectedIndex;
    document.location = document.Form2.Select2.options[index].value;
} 
<!-- HTMLソース -->
<form name="Form2" style="margin:1ex; padding:0; font-size:13px;">メニュー : 
    <select name="Menu2" onclick="Option_Change()">
        <option value="page1.html">PAGE 1</option>
        <option value="page2.html">PAGE 2</option>
        <option value="page3.html">PAGE 3</option>
        <option value="page4.html">PAGE 4</option>
    </select>
</form>
　選択ボックスのchangeイベントは、要素の値が変わると発生します。このイベントに"Option_Change"関数を結びつけると、ユーザーが項目を選択し終わったときに、ページを移動させることができます。
　ただし、onchange イベントは値が変わらなければ発生しないので、"PAGE 1"が値の時、同じ"PAGE 1"を選択してもイベントは発生しません。常にページを移動させるようにするには、適宜初期化を行う必要があります。以下に対策例を挙げています。

■選択時に移動・改良篇

// JavaScript ソース
function Option_Change_Ex() 
{
    var index = document.Form3.Select3.selectedIndex;
    document.location = document.Form3.Select3.options[index].value;
}

function Option_Initialize() 
{
    document.Form3.Select3.options.selectedIndex = 0;
}
<!-- HTMLソース -->
<form name="Form3" style="margin:1ex; padding:0; font-size:13px;">メニュー : 
    <select id="Menu3" onchange="Option_Change_Ex()" onclick="Option_Initialize()"
        <option value="" selected>選択してください</option>
        <option value="page1.html">PAGE 1</option>
        <option value="page2.html">PAGE 2</option>
        <option value="page3.html">PAGE 3</option>
        <option value="page4.html">PAGE 4</option>
    </select>
</form>
　関数 Option_Initialize は、選択ボックスの値を変更するはたらきをします。selectedIndexプロパティに項目の添え字（上から0,1,...項目数ー1）を指定すると、該当する項目を選択状態にすることができます。
　HTML側では、項目の先頭に、リンク先がない項目「選択してください」を挿入しています。そして選択ボックスがクリックされた時（clickイベント）に、この値に変わるようにします。すると、次にユーザーがどの項目を選んで（changeイベント）もページを移動させることができます。

www.sasaraan.net

(c) morijoh