画面を下にスクロールさせてください。 ゲタの雪の如くメニューが いつまでもついてきます。
さらに、メニューをクリックするとサブメニューが下にずり落ちます。
このエレベーターメニューは、http://www.kakura.jp/pg/tfmenu/ から引用
「メニューいろいろ」へ戻る。
「ホームページ作成体験」へ戻る。
メニューからのリンク先設定:
このページはフレームを使用していない。従って、リンク先も同じメニューを置く場合は、リンク先ページごとにこのメニューを置く必要がある。
ただし、外部ファイル ***.css / ***.js は共有しているのでメニュー変更は1つでよい。
別ページにコピーする際はページ冒頭の ***.css / ***.js のパス設定を忘れないように。
#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 を直接書き換えてください。これにより、ひとつのファイルを書き換えるだけで、メニューを表示させるすべてのページに反映されるようになります。
.tfm-up {上昇中} .tfm-down {下降中} .tfm-stop {停止中}
移動中の状態を class で指定することにより、状態に合わせてデザインを変更できます。
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>";
<script type="text/javascript" src="tfmenu.js"></script>
<div id="tfmenu"></div>
予め特定のメニュー項目を開いておきたい場合は、menu_html 内の親項目に id を付けて、その id を上記の一行に name として指定する。
例:
"<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>";
<div id="tfmenu" name="item1"></div>