Last Updated: "2007-07-23 Mon 17:04:58 Cuzco, Peru"

* JavaScript エレベーターメニュー

このエレベーターメニューを、使っていただいてる方、ご連絡ください。このページからリンクさせていただきます。→ info@kakura.jp

特徴

メニュー移動の速さを変更できる。
メニュー開閉の速さを変更できる。
メニューを移動させるか固定するかを指定できる。
メニューが画面から離れすぎたら急いで追いつく。
あらかじめ開いておく項目を指定できる。
CSS ですべてのデザイン要素を変更できる。
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>

注意

UTF-8 で保存してあります。ご自分の HTML ページが Shift_JIS の場合は、tabifufu.js を Shift_JIS で保存しなおしてください。

History

2007-07-23 v1.4	IE 以外のブラウザ用に、別の移動ピクセル幅を指定できるように変数を追加。
2007-07-13 v1.3	最初に開いておく項目を name で指定しても、Firefox では動作しなかったバグを修正。岩出さん報告と修正ありがとう。
2007-05-24 v1.2	sticky の意味を変更。メニューを固定した場合、class="tfm-stop" のデザイン要素が反映されないバグを修正。
2007-05-24 v1.1	expand_speed が速すぎると、リンクが機能しないバグを修正。
2006-10-31 v1.0	公開。