Last Updated: "2008-06-09 Mon 02:55:01 Antigua, Guatemala"

*エレベーターメニュー (安倍)

画面を下にスクロールさせてください。 ゲタの雪の如くメニューが いつまでもついてきます。
さらに、メニューをクリックするとサブメニューが下にずり落ちます。

このエレベーターメニューは、http://www.kakura.jp/pg/tfmenu/ から引用
「メニューいろいろ」へ戻る
「ホームページ作成体験」へ戻る。

メニューからのリンク先設定:
このページはフレームを使用していない。従って、リンク先も同じメニューを置く場合は、リンク先ページごとにこのメニューを置く必要がある。
ただし、外部ファイル ***.css / ***.js は共有しているのでメニュー変更は1つでよい。
別ページにコピーする際はページ冒頭の ***.css / ***.js のパス設定を忘れないように。

特徴

tfmenu.js で使用する id と class 名、および上下関係

#tfmenu                      {メニュー全体}
#tfmenu #tfm-head            {メニュー上部}
#tfmenu #tfm-body            {メニュー本文 上記の menu_html はここに入る}
#tfmenu #tfm-body .tf1       {メニュー親項目}
#tfmenu #tfm-body .tf1active {開いているメニュー親項目}
#tfmenu #tfm-body .tf1 .tf2  {メニュー子項目}
#tfmenu #tfm-foot            {メニュー下部}

menu_html の内容は tfmenu.js を直接書き換えてください。これにより、ひとつのファイルを書き換えるだけで、メニューを表示させるすべてのページに反映されるようになります。

メニュー移動時に #tfmenu に付加される class 名

.tfm-up     {上昇中}
.tfm-down   {下降中}
.tfm-stop   {停止中}

移動中の状態を class で指定することにより、状態に合わせてデザインを変更できます。

メニューデータ menu_html の書き方

tfmenu.js 内にメニューデータを入れる変数 menu_html があります。この内容を書き換えることにより、メニュー項目を作成します。

メニュー項目は、<div> で作ります。子項目の .tf2 は、親項目である .tf1 の内側に配置してください。tfm-body の終了タグを忘れないように。

下記の例のように、行の先頭と終りを "..." で囲んでください。行が続く場合は + でつなげます。最後に ; を書いて、データの終了とします。// はコメントです。

例:

var menu_html =
"<div id='tfm-head'></div>" +
"<div id='tfm-body'>" +
"<div class='tf1'>親項目 1" +
"   <div class='tf2'>子項目 1.1</div>" +
"   <div class='tf2'>子項目 1.2</div>" +
"   <div class='tf2'>子項目 1.3</div>" +
"</div>" +
"<div class='tf1'>親項目 2" +
"   <div class='tf2'>子項目 2.1</div>" +
"   <div class='tf2'>子項目 2.2</div>" +
"   <div class='tf2'>子項目 2.3</div>" +
"</div>" +
"</div>" +  // end of #tfm-body
"<div id='tfm-foot'></div>";

HTML にメニューを配置する方法

<head> タグの中に下記の一行を追加。

<script type="text/javascript" src="tfmenu.js"></script>

<body> タグの中、メニューを配置したい場所に下記の一行を追加。

<div id="tfmenu"></div>

予め特定のメニュー項目を開いておきたい場合は、menu_html 内の親項目に id を付けて、その id を上記の一行に name として指定する。

例:

menu_html の内容

"<div id='tfm-head'></div>" +
"<div id='tfm-body'>" +
"<div id='item1' class='tf1'>親項目 1" +
"   <div class='tf2'>子項目 1.1</div>" +
"   <div class='tf2'>子項目 1.2</div>" +
"   <div class='tf2'>子項目 1.3</div>" +
"</div>" +
"</div>" +
"<div id='tfm-foot'></div>";

name="item1" を追加。

<div id="tfmenu" name="item1"></div>

 

inserted by FC2 system