Index

HOME > プログラムTOP > JavaScript


メニュー三態(3) : ナビゲーションメニュー

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

sasaraan programming

Exposition

■CSSのみのメニュー

　ナビゲーションメニューは、スクリプトを使わなくとも、CSSだけで簡単に実現できます。通常は table か li 要素で作成します。以下は li 要素で作成するサンプルです。 table を利用する例は、本ページのブロック・メニューの項を参考にしてください。 
/* CSS ソース */
<style type="text/css"><!--
    /* ナビゲーションバー用 */
    ul.navibar    {list-style:none; margin-left:0;}
    .navibar li    {display:inline;}
    .navibar li a  {padding:0.5ex 1em; text-decoration:none;}
    .navibar li a:link     {color:white; background-color:green;}
    .navibar li a:visited {color:white; background-color:green;}
    .navibar li a:active  {color:white; background-color:lime;}
    .navibar li a:hover  {color:white; background-color:blue;}
--></style>
<!-- HTMLソース -->
<ul class="navibar">
    <li><a href="page1.html">PAGE 1</a>
    <li><a href="page2.html">PAGE 2</a>
    <li><a href="page3.html">PAGE 3</a>
    <li><a href="page4.html">PAGE 4</a>
</ul>
　以上のように、li 要素を使うと、ナビゲーションバーが簡単につくれます。スタイルシートの display プロパティに 'inline' を指定して横並びにさせ、余白や色を設定するだけで済みます。
　ただ、IE5.0 では li 要素への padding は無効になるようで、思った通りの表示にはなりません。したがって IE5.5 以上、NN6 以上が対象となります。

■スクリプトの活用

　以下は、table と JavaScript で擬似的にリンクをつくり出す例です。click イベントを活用して、引数にリンク先を渡してページを移動させます（TD_Click 関数）。ここでは背景色を変更しているだけですが、スクリプトを使うと、複数のイメージを切り替えることが可能となります。 
// JavaScript ソース

// SetTDStyle 関数 : td 要素のスタイルを設定します
// ... 引数 idTD : td 要素の id
// ... 引数 strMode ... 状態を示す文字列（'over':mouseover時、'out':mouseout時）
function SetTDStyle(idTD, strMode) 
{
    if (!document.getElementById) return;
    var objTD = document.getElementById(idTD);
    if (strMode == "over") {
        objTD.style.color = "white";
        objTD.style.backgroundColor = "blue";
        objTD.style.cursor = "pointer";
        window.status = objTD.name;
    } else if (strMode == "out") {
        objTD.style.color = "white";
        objTD.style.backgroundColor = "green";
        objTD.style.cursor = "default";
        window.status = "";
   }
}

// TD_Click関数 : tdオブジェクトのclickイベントに対応してページを移動させます
// ... 引数 strURL : ページの場所
function TD_Click(strURL) 
{
    document.location = strURL;
}
/* CSS ソース */

<style type="text/css"><!--
    /* ナビゲーションバー用 */
    table.navibar {border:0; width:24em; font-size:100%;}
    .navibar td {border:0; text-align:center;}
--></style>
<!-- HTMLソース -->

<body onload="SetTDStyle('td1','out'), SetTDStyle('td2','out'), 
                SetTDStyle('td3','out'), SetTDStyle('td4','out')">
    ...
<table class="navibar">
    <tr>
        <td id="td1" name="page1.html" 
              onmouseover="SetTDStyle('td1','over')" onmouseout="SetTDStyle('td1','out')"
              onclick="TD_Click(name)">PAGE 1
        <td id="td2"  name="page2.html" 
              onmouseover="SetTDStyle('td2','over')" onmouseout="SetTDStyle('td2','out')"
              onclick="TD_Click(name)">PAGE 2
        <td id="td3"  name="page3.html" 
              onmouseover="SetTDStyle('td3','over')" onmouseout="SetTDStyle('td3','out')"
              onclick="TD_Click(name)">PAGE 3
        <td id="td4"  name="page4.html" 
              onmouseover="SetTDStyle('td4','over')" onmouseout="SetTDStyle('td4','out')"
              onclick="TD_Click(name)">PAGE 4
    </tr>
</table>
　この例では、リンク先がステータスバーに自動表示されません。表示させたい場合は、関数内で window オブジェクトの status プロパティに文字列を指定する必要があります。この時、本来の使い方とは異なりますが、name 属性にリンク先を格納しておいて、SetTDStyle 関数で取り出すようにしています。

■ブロック・メニュー

　縦に並べるナビゲーションメニューのサンプルです。CSSのみでスクリプトを使わない例だけを挙げておきます。
MENU
PAGE 1
PAGE 2
PAGE 3
PAGE 4
/* CSSソース */
table.listmenu  {margin:1ex; border:0; width:8em; font-size:100%;}
.listmenu td    {text-align:center; background-color:silver;}
.listmenu a     {display:block; width:100%; text-decoration:none;}
.listmenu a:link     {color:white; background-color:gray;}
.listmenu a:visited {color:white; background-color:silver;}
.listmenu a:active {color:white; background-color:green;}
.listmenu a:hover  {color:white; background-color:blue;} 
<!-- HTMLソース -->
<table class="listmenu">
    <tr><td><strong>MENU</strong></tr>
    <tr><td><a href="page1.html">PAGE 1</a></tr>
    <tr><td><a href="page2.html">PAGE 2</a></tr>
    <tr><td><a href="page3.html">PAGE 3</a></tr>
    <tr><td><a href="page4.html">PAGE 4</a></tr>
</table>
　table を使って、各メニュー項目を縦に並べればリスト式のメニューをつくることができます。a 要素のdisplay プロパティに 'block' を指定する点がポイントとなります。

www.sasaraan.net

(c) morijoh