| １．概要 |
項目名にマウスを載せると関連する項目を表示し、その項目にリンクする方法です
よく、メーカーのページには使われていますが、アルゴリズムが難しく理解困難でした
今回、簡単に項目を設定できる方法を考えてみました
第３階層まで設定することが出来ます
ただし、フレームには利用できません |
| ２．サンプル |
まず、サンプルをご覧下さい
■ サンプル(縦方向) メニューを上端に表示
■ サンプル(横方向) メニューを左端に表示
いずれも項目の上にマウスを置くと下側、または右側にサブメニューが表示されます
さらに「写真集」 -> 「私の写真集」 にマウスを載せると、第３階層のメニューが表示されます
■ 外部ファイルのダウンロード
ファイル名をクリックするとダウンロードできます
■ 使用している画像
ファイル名をクリックするとダウンロードできます
|
|
1x1ピクセルの透明画像 |
|
|
 |
この２つの画像はどのページでも共通に使用するので、ルートの中に
image/ というフォルダーを作り、この中に入れておきます
そしてその位置は ../../ のようにパス指定をします
var img_pass = "../../image/" |
|
| ３．メニュー項目の設定 |
メニュー項目は次のように設定します
■ 第１階層のみの場合
t_menu[1]="1<>Home<>http://onohp.com/index.html<>簡単な説明<>@"
Home ← 項目名
"1 ← 階層名
http://onohp.com/index.html ← リンク先のアドレス
簡単な説明 ← title="" の中に入れます
@ ← データの区切り記号
■ 第2、3階層がある場合
t_menu[2]="1<>写真集<><><>@"
+"2<>私の写真集<><><>@"
+"3<>自然と風景<>photo/2_shizen/index.html<><>@"
+"3<>祭の写真集<>photo/3_maturi/index.html<><>@"
+"2<>いきもの達<>photo/4_ikimono/index.html<><>@"
+"2<>花の写真集<>photo/5_hana/index.html<><>@"
写真集 には第2階層があるので、アドレスは記入しません
第２階層をセットします
+"2<>私の写真集<><><>@"
ここでは第３階層があるので、URLは未記入とします
"2<> は第２階層を示します
第３階層をセットします
+"3<>自然と風景<>photo/2_shizen/index.html<><>@"
"3<> は第３階層を示します
詳しくはダウンロードした外部ファイル(*.js)のソースをご覧下さい |
| ４．設置例 |
■ 外部ファイルの(xxx.js)設定
設置サンプルのソースを見ると
<SCRIPT type="text/javascript" src="menu_tate.js"></SCRIPT>
の記述があります
現在は、このフォルダーの中に menu_tate.js が有りますが実際には
相対アドレス src="../../js/menu_tate.js
または
絶対アドレス src="http://www.xxx.yyy.ne.jp/~aaa/js/menu_tate.js
のように記入します。
■ ページ名と画像パス
<SCRIPT language="javascript">
<!--
var pass = "" ルートからのパス名。絶対アドレスでもよい
var img_pass = pass + "image/"
var p_name="yyyの風景" ここにはページ名を記入します
//-->
</SCRIPT> |
| ５．まとめ |
いかがでしょうか
仕様上、各階層で100項目まで設定できますが・・・
普通は５〜10項目程度でしょう。
問題は自分の現在のページを、どのように分類するか・・・だと思います
是非、活用してみてください
全面的にアルゴリズムを見直しました
メニューの枠からマウスを離しても直ちに非表示にならないように修正した(2010/01/12)
３秒後またはメニュー枠外でマウスの左ボタンクリックで非表示となる
|
2010/01/12 修正
2011/11/07 修正
|