// tfmenu.js ver 1.0 // http://www.kakura.jp/pg/tfmenu/ // // Daisuke Kakura "2006-11-06 Mon 18:13:35 Sao Paulo, Brazil" // Some Rights Reserved under Creative Commons License. // http://creativecommons.org/licenses/by/2.1/jp/ // 設定可能な変数 ----------------------------------------------------------------------- var expand_speed = 150; // メニュー項目を開閉する速さ (ミリ秒) var updown_speed = 20; // メニューが移動する速さ (ミリ秒) var steps = 10; // メニューが updown_speed ミリ秒ごとに移動するピクセル幅 var jump = 1; // メニューが離れすぎたら高速移動する (1: yes 0; no) var sticky = 1; // メニューを上下に移動させる (1: yes 0; no) // メニュー HTML (下記の説明参照) var menu_html = "
" + "
" + "" + "
■ 診療案内" + "
" + "
■ アクセス" + "
" + "
■ 院内案内" + "
" + "
■ 院長略歴" + "
" + "" + "
■ 予防接種" + "
" + "" + "
" + // end of #tfm-body "
まきの内科クリニック
"; // 設定可能な変数 ここまで ------------------------------------------------------------- // 説明 -------------------------------------------------------------------------------- /* // ++++++++++ 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 で指定することにより、状態に合わせてデザインを変 更できます。 // ++++++++++ メニュー HTML の書き方 #tfm-body 内のメニュー項目は、
で作ります。子項目の .tf2 は、親項 目である .tf1 の内側に配置してください。tfm-body の終了タグを忘れない ように。 例: "
" + "
" + "
親項目 1" + "
子項目 1.1
" + "
子項目 1.2
" + "
子項目 1.3
" + "
" + "
親項目 2" + "
子項目 2.1
" + "
子項目 2.2
" + "
子項目 2.3
" + "
" + "
" + // end of #tfm-body "
"; // ++++++++++ HTML にメニューを配置する方法 タグの中に下記の一行を追加。 タグの中、メニューを配置したい場所に下記の一行を追加。
予め特定のメニュー項目を開いておきたい場合は、menu_html 内の親項目に id を付けて、その id を上記の一行に name として指定する。 例: menu_html の内容 "
" + "
" + "
親項目 1" + "
子項目 1.1
" + "
子項目 1.2
" + "
子項目 1.3
" + "
" + "
" + // end of #tfm-body "
"; name="item3" を追加。
*/ // ここから下は変更しないでください------------------------------------------------------ var curr_y; var istimerc_on = 0; var istimere_on = 0; var limit_y; var menu_pos = new Object(); var status_p; var tfm_body; var tfmenu; function expandMenu(e) { var close_only = 0; var col_elem; var exp_elem; var ic; var ie; var isopen = 0; var target_elem; var target_node; var timerc; var timere; var collapseItem = function() { if(col_elem[ic]) { setVisibility(col_elem[ic], "hidden"); ic++; } else { clearInterval(timerc); istimerc_on = 0; } } var expandItem = function() { if(!istimerc_on) { if(exp_elem[ie]) { setVisibility(exp_elem[ie], "visible"); ie++; } else { clearInterval(timere); istimere_on = 0; } } } if(e.target) { target_node = e.target; } else if (e.srcElement) { target_node = e.srcElement; } // for Safari. if (target_node.nodeType == 3) { target_node = target_node.parentNode; } target_elem = target_node.getElementsByTagName("div"); // if a gap between items (background tfm_body) was clicked, ignore. if(target_node.id == "tfm-body") { return; } // if clicked top item was already open, just close it. if(target_elem[0]) { if(target_elem[0].style.visibility == "visible") { close_only = 1; } } // collapse menu. if(!istimerc_on && !istimere_on) { for(var i = 0; i < tfm_body.length && !isopen; ++i) { // search the first visible chiled item. col_elem = tfm_body[i].getElementsByTagName("div"); for(var ii = 0; ii < col_elem.length; ++ii) { if(col_elem[ii].style.visibility == "visible") { isopen = 1; break; } } } if(isopen) { ic = 0; istimerc_on = 1; timerc = setInterval(collapseItem, expand_speed); } } // expand active menu items. if(!istimere_on && !close_only) { exp_elem = target_elem; ie = 0; istimere_on = 1; timere = setInterval(expandItem, expand_speed); } } function setVisibility(e, value) { e.style.visibility = value; if(value == "hidden") { e.style.lineHeight = "0px"; e.parentNode.className = "tf1"; } else { e.style.lineHeight = "100%"; e.parentNode.className = "tf1active"; } } function setTopPos() { var target_y = document.body.scrollTop; // var suffix_y; var dance_steps = steps; var distance; var status; distance = Math.abs(target_y - curr_y); // if menu box was too far from active area, then speed up. if(jump && tfmenu.offsetHeight * 2 < distance) { dance_steps = steps * 10; } // slow down if it's getting closer. if(distance < 25) { dance_steps = 1; } // do not exceed bottom of parent element. if(limit_y <= target_y) { target_y = limit_y; curr_y = limit_y; } // going up or donw? if(curr_y > target_y) { curr_y -= dance_steps; // ascending status = "tfm-up"; } else if(curr_y < target_y) { curr_y += dance_steps; // descending status = "tfm-down"; } else { status = "tfm-stop"; } if(distance != 0) { tfmenu.style.top = curr_y + "px"; } // change status (class name) if(status_p != status) { status_p = status; tfmenu.className = status; } } function setListeners(e) { var i; var ii; tfmenu = document.getElementById("tfmenu"); tfmenu.innerHTML = menu_html; tfm_body = document.getElementById("tfm-body") addListener(tfm_body, 'mousedown', expandMenu, false); tfm_body = tfm_body.childNodes; for(i = 0; i < tfm_body.length; ++i) { // if name property was set, make that node (id) to visible. var items = tfm_body[i].getElementsByTagName("div"); var visib = "hidden"; if(tfmenu.name == tfm_body[i].id) { visib = "visible"; } for(ii = 0; ii < items.length; ++ii) { setVisibility(items[ii], visib); } } if(sticky) { curr_y = document.body.scrollTop; tfmenu.style.position = "absolute"; tfmenu.style.top = curr_y + "px"; tfmenu.style.left = 0 + "px"; setInterval("setTopPos()", updown_speed); } // bug: if there is no parent element, limit_y will be screen height which is too short. limit_y = tfmenu.parentNode.offsetHeight - tfmenu.offsetHeight; } function addListener(elem, eventType, func, cap) { if(elem.addEventListener) { elem.addEventListener(eventType, func, cap); } else if(elem.attachEvent) { elem.attachEvent('on' + eventType, func); } else { window.alert("Sorry... Please use Internet Explorer or Firefox."); return false; } } addListener(window, 'load', setListeners, false); // eof