梅ちゃん堂 > JavaScript 入門 > 実用 JavaScript サンプル >
- クイックメニュー -

よくあるドロップダウンリストを使ったクイックメニューですが、 リスト内に現在のページを加えず、現在のページを別途表示できる点に特徴があります。

上はそのサンプルです。メニュー選択後、「GO」ボタンをクリックするとリンク先にジャンプします。

作り方

まず空のテキストファイルを作成し、これに "quickmenu.js" というファイル名を付けます。 (必ずしもこの名前でなければならないというわけではありません。)

次にこのテキストで2つの配列 menusaddress を設定します。

// リンク先タイトルの配列 menus を設定
menus = new Array( );
menus[0] = "コンテンツ1";
menus[1] = "コンテンツ2";
menus[2] = "コンテンツ3";
menus[3] = "コンテンツ4";



menus[x] = "コンテンツX";

// リンク先アドレスの配列 address を設定
address = new Array( );
address[0] = "contents_1.htm";
address[1] = "contents_2.htm";
address[2] = "contents_3.htm";
address[3] = "contents_4.htm";



address[x] = "contents_x.htm";

上は例ですので、実際には x には数字を入れて下さい。 例えばリンク先が12個あるなら x には 11 が入ります(0 で始まっているから)。

menus はリンク先に付ける名前で自由に設定できます。 address にはリンク先に対応する HTML の実際のファイル名を入れます。 http://〜で始まるフルパスでもかまいません。

設定を書き終えたら、次に以下のスクリプトを入れて下さい。

deflt = document.URL;
slctd = 0; // 初期表示させたいインデクス値を設定。デフォルトは 0
pageName = "";

function setMenu() {
  with(document) {
    write("<FORM name='QuickMenu'><SELECT name='MenuList'>");
    for(i = 0; i < menus.length; i++) {
      if(deflt.indexOf(address[i], 0) < 0)
      write("<OPTION value='" + menus[i] + "'>" + menus[i]);
      else pageName = menus[i];
    }
    write("</SELECT>");
    write("<INPUT type='button' name='GoBtn' value='GO' onClick='location.href=address[QuickMenu.MenuList.selectedIndex]'>");

    write(" 現在のページ「"+ pageName + "」");
    // ↑「現在のページ」を表示しないなら、この1行は削除
    write("</FORM>");
    QuickMenu.MenuList.options[slctd].selected = true;
  }

  // 以下はリストのデザイン設定
  with(QuickMenu.MenuList.style) {
    backgroundColor = "9999CC"; // 背景色
    color = "#FFFFFF"; // 文字色
    fontWeight = "bold"; // フォントの太さ
    fontSize = "9pt"; // フォントサイズ
  }
  // 以下は「GO」ボタンのデザイン設定
  with(document.QuickMenu.GoBtn.style) {
    backgroundColor = "#ffffee"; // 背景色
    color = "darkgoldenrod"; // 文字色
    fontWeight = "bold"; // フォントの太さ
    fontSize = "9pt"; // フォントサイズ
  }

} // ここまで

以上で "quickmenu.js" の設定は終わりです。ファイルを上書き保存して下さい。

※「GO」ボタンではなく、リストを選択した時点で移動させたいのであれば、

write("<FORM name='QuickMenu'><SELECT name='MenuList'>");

の行を

write("<FORM name='QuickMenu'><SELECT name='MenuList' onChange='location.href=address[this.selectedIndex]'>");

に書き換え、

write("<INPUT type='button' name='GoBtn' value='GO' onClick='location.href=address[QuickMenu.MenuList.selectedIndex]'>");

の行と「GO」ボタンのデザイン設定の個所を削除すればOKです。

次に、クイックメニューを表示させたい HTML ファイルの本文個所に以下のタグを入れて下さい。

<SCRIPT src="quickmenu.js" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">
<!--
  setMenu( );
//-->
</SCRIPT>

これでお望みの個所にクイックメニューが表示されます。 当然、HTML ファイルと同じディレクトリに "quickmenu.js" が置かれていなくてはなりません。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved