データの作り方。

しらぎくポップアップメニューで取扱うメニューのデータはJAVAスクリプトファイルで作成します。

データファイルの読込みは<script>要素で行います。
データファイルは必ず本スクリプトより前に読込んで下さい。
データファイルは複数に跨っても構いません。

目次。

データの作り方。

データスクリプトは以下のように書きます。

m_menuname="メニュー名";

m_msg[番号]='メニュー';
m_list[番号]='<ul>'+
    '<li><a href="File-1.html">ファイル１</a></li>'+
    '<li><a href="File-2.html">ファイル２</a></li>'+
    …
    '</ul>';

「m_menuname」はメニューに名前を付けるものです。ダイナミックHTMLに対応しない環境ではこの名前が見出しに使われますので、必ず分り易いメニュー名を付けておいて下さい(この名前にリンクを張る事は出来ません)。
「番号」は右端を「0」として連続した整数にして下さい。
「m_msg[番号]」はメニューの項目の見出しです。<a>要素でリンクを張る事も出来ます。
「m_list[番号]」はメニューの項目本体です。<ul>要素でリスト形式で記述します。各項目を<li>要素で記述して下さい(<li>要素の終了タグは省略しても構いません)。

本頁の目次

子メニューを利用する場合。

第4.00-版(平成18年 7月10日)より、現行のブラウザに対しては、子メニューを利用出来るようになりました。

子メニューとは、始めに表示されるメニューの特定の項目にマウスカーソルを合わせると、その隣にポップアップされる新たなメニューです。

また、子メニューに同じ仕掛けを施す事で、孫メニューを出す事も可能です。

主な対象ブラウザは以下の通りです。
- もじら系ブラウザ(ファイヤーフォックス, カミーノ, ネットスケープ 6.x以降, フロックなど)
- インターネットエクスプローラ 5.0以降
- オペラ 7.x以降
- サファリ
対象外となるブラウザでも、子メニューが出ないだけで、本スクリプトの利用は可能です。

子メニューの作り方・呼出し方。

子メニューのデータの作成方法は以下のようになります。

子メニューの本体。

一行目を

m_msg[番号]='';

とします。

すなわち、見出しを空にする事で、親メニューから呼び出される子メニューと認識します。

番号は親メニューに与える番号と共に、連続している事が必要ですが、親メニューの前後途中などは問いません。

子メニューを呼び出す側

まず、子メニューを表示させている際に項目を反転表示させるため、反転表示色を指定しておきます。

反転表示色は、CSSでマウスカーソルを合わせている際の背景色(a:hoverセレクタで指定される背景色)をお勧めします。
配布時のデフォルトは薄緑色となっております。

そのうえで、子メニューを呼び出したい項目の<a>要素に、rel="子メニューの番号"属性を与えます。

この場合、

子メニューに対応している環境には、当該項目をポイントすると自動的に番号で指定された子メニューが表示されます。
子メニューに対応していない環境でも、当該項目の<a>要素href属性で指定されたURLへのアンカーとなります。

子メニュー内でも同様の記述に依り、孫メニューの呼出しが可能です。

子メニューを利用する場合の注意事項。

子メニューを呼び出すメニューでは、各項目の内容は全て一行に収まるようにして下さい。

二行以上になっている項目が含まれる場合、その項目より下で子メニューを呼び出した際に、子メニューが上にずれて表示されます。

子メニューを利用しない場合は項目の行数を考慮する必要はありません。

同じ子メニューを複数の項目で使い廻さないようにして下さい。

一つの子メニューは一画面中一箇所でしか表示出来ません。

同じ内容の子メニューを複数の項目で使いたい場合は、項目数の分だけ同じ内容の子メニューを用意して下さい。

本頁の目次

作成上の注意。

読込むデータファイルのうち、一本には必ず後述の初期設定文を先頭に記述して下さい。
「m_msg[番号]」「m_list[番号]」の各項目にリンクを張る場合、相対アドレスは当該ファイルを読込むHTML文書基準となります。
シフトJISコードで記述する場合、一部の文字で文字化けやエラーの原因となるものがあります。このような場合は当該文字の直後に半角で「\」を附加して下さい。また、半角の「\」は「\\」と記述して下さい。
タグ以外で半角の「<」「>」を用いる場合は半角でそれぞれ「<」「>」と記述して下さい。
内容に「'」を用いる場合はその直前に半角で「\」を補って「\'」と記述して下さい。
<li>要素の終了タグは省略できますが、その他のタグは省略しないで下さい。
項目で改行を要する場合は<br>要素が使えます。

本頁の目次

HTML文書へのリンク。

HTML文書のヘッダに以下のように記述します。複数ある場合は全て同様に並べて行きます。

<script type="text/javascript" charset="shift_jis" src="データファイル名"></script>

一番始めに読込むデータファイルには、必ず以下の初期設定文を先頭に記述して下さい。
```
m_msg=new Array();
m_list=new Array();
```
尚、以下の場合はエラーとなりますので充分注意して下さい。
- 初期設定文の記述がないデータファイルを先に読込んだ場合。
- 初期設定文が出てくる前にデータが記述されている場合。
- 初期設定文を記述したデータファイルを全く読込んでいない場合。
- 同じHTML文書が読込む複数のデータファイルに初期設定文が記述されている場合。
- 初期設定文などの大文字小文字を間違えている場合。
データファイルがEUC日本語コードの場合は「<script … charset="euc-jp" …>」として下さい。
データファイルは、必ず本スクリプトを読込む前に全て読込ませて下さい。

本頁の目次

実際の記述例。

実際にサイトのリンクページで利用する場合の記述をご紹介します。

子メニュー及び孫メニューも利用しております。

メニュースクリプト「Menu.js」での記述。

m_menuname="リンクサイトのご案内・リンクについて。";
m_msg=new Array();
m_list=new Array();
m_msg[0]='<a tabindex="5" href="index.html#aboutlink">リンク申込</a>';
m_list[0]=
    '<ul>'+
    '<li><a href="GuideLine.html">当サイトへのリンク</a></li>'+
    '<li><a href="GuideLine2.html">当サイトからのリンク</a></li>'+
    '<li><a href="GuideLine3.html">リンクを承れないサイト</a></li>'+
    '</ul>';
m_msg[1]='<a tabindex="4" href="index.html#linkedsites">リンク集</a>';
m_list[1]=
    '<ul>'+
    /* 一番目の項目で子メニュー(メニュー番号 2)を呼び出します。 */
    '<li><a rel="2" href="Link1.html">鉄道関連</a></li>'+
    '<li><a href="Link2.html">イラスト関係</a></li>'+
    '<li><a href="Link3.html">ネット技術関係</a></li>'+
    '<li><a href="Link4.html">その他</a></li>'+
    '</ul>';
/* 子メニュー */
m_msg[2]='';
m_list[2]=
    '<ul>'+
    /* 一番目の項目で孫メニュー(メニュー番号 3)を呼び出します。 */
    '<li><a rel="3" href="Link1-JR.html">ＪＲ関連</a></li>'+
    /* 二番目の項目で孫メニュー(メニュー番号 4)を呼び出します。 */
    '<li><a rel="4" href="Link1-Private.html">民鉄関係</a></li>'+
    '<li><a href="Link1-ThirdSector.html">第三セクタ関係</a></li>'+
    '</ul>';
/* 孫メニュー */
m_msg[3]='';
m_list[3]=
    '<ul>'+
    '<li><a href="Link1-JR-HE.html">ＪＲ北海道/東日本</a></li>'+
    '<li><a href="Link1-JR-Central.html">ＪＲ東海</a></li>'+
    '<li><a href="Link1-JR-WS.html">ＪＲ西日本/四国</a></li>'+
    '<li><a href="Link1-JR-Kyushu.html">ＪＲ九州</a></li>'+
    '</ul>';
m_msg[4]='';
m_list[4]=
    '<ul>'+
    '<li><a href="Link1-Private-NE.html">東北/東日本地方</a></li>'+
    '<li><a href="Link1-Private-Central.html">東海地方</a></li>'+
    '<li><a href="Link1-Private-West.html">関西地方</a></li>'+
    '</ul>';

HTML文書での記述(HTML 4.01 トランジッショナルの場合)。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    …

    <script type="text/javascript" charset="shift_jis" src="Menu.js"></script>
    <script type="text/javascript" charset="shift_jis" src="PopUpMenu.js"></script>

    …

    </head>
<body>

    …

    <script type="text/javascript" charset="shift_jis" src="PopUpInit.js"></script>
    </body>
</html>

本頁の目次

ページ外へのご案内。

制作者へのご連絡