【 編集説明 】
● index.html
１. <head>〜</head>の間に
<link rel="stylesheet" href="./Tree_style.css" type="text/css">
を記述する。
</body> (最下部) の手前に
<script src="./TreeMenu.js"></script>
２. ツリーリンクについて
<a href="javascript:TreeOpen(
1)" .... >
( ) 内の番号がツリー番号となります。
その下の行の <ul ID="Tree
1"> のツリーが開きます。
サブツリーリンクについて
<a href="javascript:TreeOpen(
2,
1)" .... >
2 がツリー番号となり、
1 は、親のツリー番号となります。
３. マウスオーバーについて
上記の様に、html記述のデフォルトは、クリックオープンになり、
マウスオーバー利用はJS側での設定になります。(但し、モバイル端末表示及びタッチ端末は無効。)
<div
class="vStyle">〜</div> は、マウスオーバー利用の為にあります。
※ 基本的に、この<div>〜</div>間はツリー番号以外は書き換えしないで下さい。
４. メニュー一覧から外れた時のツリークロスについて
クリッククロス <DIV class="main_buttom"
ID="TreeOff">
マウスアウトクロス <DIV
onmouseleave="mOut('all')">
※ ツリー関連の全体像は
こちら
● TreeMenu.js 個人設定
１. ツリー増減編集後にまず初めに設定する箇所
/*====================================*/
var tCount = 6; /* 総ツリー数 */
/*====================================*/
/*----- ツリートップ位置 (未設定の場合 [ 0 ] 扱いになります。) ---*/
/* PCトップ位置 */
※ サブツリー(2階層目ツリー)の設定は必要になります。
(必ず1階層のリンク欄と重なるように)
var tpTop = { 'Tree1' : 3,
'Tree2' : -20, 'Tree3' : 3,
'Tree4' : -20,
'Tree5' : -20, 'Tree6' : 3 };
/* Mobileトップ位置 */
※ Mobile表示では基本的に設定不要かと思います。
var tmTop = { 'Tree1' : 0, 'Tree2' : 0, 'Tree3' : 0, 'Tree4' : 0, 'Tree5' : 0, 'Tree6' : 0 };
２. 以下、ツリー動作方法の設定
/*===== ツリーメニュー オープン =====*/
var onMouse = 1; /* PCでマウスオーバーオープン */
var moveType = 2; /* 1.Openのみスクロール、2.Closeもスクロール(PC 2階層ツリーはスクロール無効) */
/* 3.フェードインのみ、 4.Closeもフェード、0.何もしない、 */
var mOpacity = 1; /* ツリー背景透過 */
/*----------moveType 2 の場合-------------------*/
var pcFadout = 1; /* PC クロススクロールをフェードアウトにする場合[1] */
var mobFadout = 0; /* Mobile 〃 */
※ Mobileでは、クロスもスクロールにした方が上下移動が軽減され見やすいかと思います。
３. 以下、スクロールのスピード等の設定がありますが、基本的にそのままで良いかと思います。
● Tree_style.css
１. ツリー増減編集後にまず初めに設定する箇所
以下、一部のみ抜粋していますが、html記述の ID="Tree1"〜に対する #Tree1〜 を追加や削除して下さい。
-------------------------------------------
/*############## 全ツリーID [ #TreeX ] 指定 ###############*/
#Tree1, #Tree2, #Tree3, #Tree4, #Tree5, #Tree6 {
/*#########################################################*/
... 中省略 ...
/*############## ファースト ツリー ID 指定 ###############*/
/*======= 色分けしたい場合は、分散しそれぞれに指定 =======*/
※ カンマ[,]区切りで纏めていますが、色分けしたい場合等は別々に記述して下さい。
#Tree1 a, #Tree3 a, #Tree6 a {
padding:3px 25px; padding-top:5px; border-top: none; border-radius: 3px;
background:#999999; color: #FFFFFF; font-size:15px; font-weight: 600; }
#Tree1 a:hover, #Tree3 a:hover, #Tree6 a:hover { background:#777777; color: #FFFFFF; }
/*#########################################################*/
... 中省略 ...
/*############## サブ ツリー ID 指定 ###############*/
(サブ ツリーの横の位置はここで行ってください。必ず1階層のリンク欄と重なるように)
#Tree2, #Tree4, #Tree5{ margin: -35px 0 0
140px; padding: 0; z-index: 1; }
#Tree2 a, #Tree4 a, #Tree5 a{ border-radius: 3px; background:#666666; }
#Tree2 a:hover, #Tree4 a:hover, #Tree5 a:hover { background:#555555; }
/*#########################################################*/
-------------------------------------------
２. モバイル端末用表示
JSファイル側もそうですが、端末判定ではなく閲覧スクリーン幅が768px以下でモバイル端末用の表示としています。
以下 [
１.] 同様の編集をして下さい。
/*############## モバイル端末対応 ###############*/
/*== 768px以下 ==*/
@media screen and (max-width:768px){
... 以下省略 ...
３. 色の設定
ツリー番号に伴う編集が終えましたら、各色の設定となりますがサンプルでは
基本的にモノトーンで [ #XXXXXX ] と設定していますので、設定箇所を比較的分かり易くしています。
