階層メニュー FOLIOLE アピアランス

セルのアピアランス

メニューセルの外観を設定するのは，けっこうめんどうくさいです。それで，いくつかのアピアランスと JavaScript のコードを例示しますので，コピーするなり改良するなりして，ご活用ください。
コードの部分は，データ項目 ( 書き換えてご利用ください ) ，色の設定，形状の設定であり，設定方法のページでいうところの，ステップ２，３，４に相当する部分です。
もしかしたら， OFFSET_RIGHT と OFFSET_DOWN の設定は，すこしややこしく思われるかもしれませんが，アピアランスとコードを見比べて，いろいろ試してみてください。
また，各層セルの大きさ・設置位置・画像ファイルのパスなども，適当に付けてありますので，適宜再設定してください。

しくみ特長設置方法ノートFAQ動作サンプルアピアランス更新情報ダウンロード

appearance 1
アピアランス１

JavaScript code 1

//アピアランス１
//メニューのデータ項目を設定
var mydata = new Array(  //第1層目の2項目
['id_1','label_1','#'],
['id_2','label_2','#']
);
mydata.id_1 = new Array(  //第2層目の3項目
['id_1_1','label_1_1','#'],
['id_1_2','label_1_2','#'],
['id_1_3','label_1_2','#']
);
mydata.id_2 = new Array(  //第2層目の1項目
['id_2_1','label_2_1','#']
);
mydata.id_1.id_1_2 = new Array(  //第3層目の3項目
['id_1_2_1','label_1_2_1','#'],
['id_1_2_2','label_1_2_2','#'],
['id_1_2_3','label_1_2_3','#']
);

//メニューの色を設定
var mycolor=[];
mycolor.CHAR_REVERSE= 'White'; //反転時文字色
mycolor.BG = ['Gainsboro','#E5D3D3','#D3DBE5']; //背景色
mycolor.INNER_LEFT_UP= 'White'; //左上・内枠線色
mycolor.INNER_RIGHT_DOWN= ['#C8C8C8','#D5BBBB','#BBC7D5']; //右下・内枠線色
mycolor.OUTER_LEFT_UP= null; //左上・外枠線色
mycolor.OUTER_RIGHT_DOWN= null; //右下・外枠線色
mycolor.BG_REVERSE= '#2F3F4D'; //反転時背景色
mycolor.CHAR= 'Black'; //文字色
mycolor.PARTITION= '#EEEEEE'; //仕切線色
mycolor.SHADOW= '#666666'; //影線色
mycolor.BG_PRESSED= 'Red'; //マウス押下時背景色

//メニューの形状を設定
var menu_cfg = [];
//----- 次の3項目は設定が必須です。省略ができません。
menu_cfg.menu_name= 'mymenu'; //(設定必須)いまから作る階層メニューの名前
menu_cfg.data_array= mydata; //(設定必須)データ項目配列の名前
menu_cfg.color_array= mycolor; //(設定必須)カラーデータ配列の名前
//----- 次の5項目は，すべて数値で設定してください(省略可/カッコ内はデフォルト値)。
menu_cfg.is_vertical= 0; //( 0)第１層目が縦方向->1 / 横方向->0
menu_cfg.position_x= 40; //( 0)第１層目の左上隅のウインドウ上の右方向位置
menu_cfg.position_y= 40; //( 0)第１層目の左上隅のウインドウ上の下方向位置
menu_cfg.root_gap= 0; //( 0)第１層目のセルどうしの隙間
menu_cfg.time_lag= 20; //(20)コンテナ開閉のタイムラグ(ミリ秒)
//----- 次の17項目は，値もしくは変数名または配列で設定(省略可/カッコ内はデフォルト値)。
menu_cfg.CELL_WIDTH= [80,100]; //(     100)各層セル幅(px)
menu_cfg.CELL_HEIGHT= 15; //(      15)各層セル高(px)
menu_cfg.CELL_PADDING= '0px 10px'; //(   '0px')各層セルパディング(px)
menu_cfg.CELL_ALIGN= ['center','left']; //(  'left')各層セル寄せ方
menu_cfg.INNER_BORDER_WIDTH= 1; //(       0)各層セル内側枠幅(px)
menu_cfg.OUTER_BORDER_WIDTH= 0; //(       0)各層セル外側枠幅(px)
menu_cfg.PARTITION_WIDTH= 1; //(       1)各層セル仕切線幅(px)
menu_cfg.SHADOW_WIDTH= 1; //(       0)各層セル影線幅(px)
menu_cfg.OFFSET_RIGHT= [0,0,-4]; //(       0)各層セル右オフセット(px)
menu_cfg.OFFSET_DOWN= [0,1,0]; //(       0)各層セル下オフセット(px)
menu_cfg.FONT_SIZE= 12; //(      12)各層セル文字サイズ(px)
menu_cfg.FONT_WEIGHT= 'normal'; //('normal')各層セル文字の太さ
menu_cfg.TARGET_WINDOW= ''; //(      '')各層別リンク先のウインドウ名
menu_cfg.CELL_OPACITY= null; //(    null)各層セル不透明度(nullは完全不透明)
menu_cfg.CELL_BG_IMG= null; //(    null)各層背景画像(パス付きで)
menu_cfg.IMG_ARROW= './arrow.png'; //(    null)各層矢印画像(パス付きで)
menu_cfg.POSITION_ID= null; //(    null)位置を連動させる他の要素を登録

appearance 2
アピアランス２

JavaScript code 2

//アピアランス２
//メニューのデータ項目を設定
var mydata = new Array(  //第1層目の2項目
['id_1','label_1','#'],
['id_2','label_2','#']
);
mydata.id_1 = new Array(  //第2層目の3項目
['id_1_1','label_1_1','#'],
['id_1_2','label_1_2','#'],
['id_1_3','label_1_2','#']
);
mydata.id_2 = new Array(  //第2層目の1項目
['id_2_1','label_2_1','#']
);
mydata.id_1.id_1_2 = new Array(  //第3層目の3項目
['id_1_2_1','label_1_2_1','#'],
['id_1_2_2','label_1_2_2','#'],
['id_1_2_3','label_1_2_3','#']
);

//メニューの色を設定
var mycolor=[];
mycolor.CHAR_REVERSE= 'White'; //反転時文字色
mycolor.BG = '#E6E6E6'; //背景色
mycolor.INNER_LEFT_UP= 'White'; //左上・内枠線色
mycolor.INNER_RIGHT_DOWN= '#C8C8C8'; //右下・内枠線色
mycolor.OUTER_LEFT_UP= 'Silver'; //左上・外枠線色
mycolor.OUTER_RIGHT_DOWN= '#666666'; //右下・外枠線色
mycolor.BG_REVERSE= ['#800000','#2F3F4D']; //反転時背景色
mycolor.CHAR= 'Black'; //文字色
mycolor.PARTITION= 'Silver'; //仕切線色
mycolor.SHADOW= '#666666'; //影線色
mycolor.BG_PRESSED= 'Red'; //マウス押下時背景色

//メニューの形状を設定
var menu_cfg = [];
//----- 次の3項目は設定が必須です。省略ができません。
menu_cfg.menu_name= 'mymenu'; //(設定必須)いまから作る階層メニューの名前
menu_cfg.data_array= mydata; //(設定必須)データ項目配列の名前
menu_cfg.color_array= mycolor; //(設定必須)カラーデータ配列の名前
//----- 次の5項目は，すべて数値で設定してください(省略可/カッコ内はデフォルト値)。
menu_cfg.is_vertical= 0; //( 0)第１層目が縦方向->1 / 横方向->0
menu_cfg.position_x= 40; //( 0)第１層目の左上隅のウインドウ上の右方向位置
menu_cfg.position_y= 40; //( 0)第１層目の左上隅のウインドウ上の下方向位置
menu_cfg.root_gap= 0; //( 0)第１層目のセルどうしの隙間
menu_cfg.time_lag= 20; //(20)コンテナ開閉のタイムラグ(ミリ秒)
//----- 次の17項目は，値もしくは変数名または配列で設定(省略可/カッコ内はデフォルト値)。
menu_cfg.CELL_WIDTH= [80,100]; //(     100)各層セル幅(px)
menu_cfg.CELL_HEIGHT= 15; //(      15)各層セル高(px)
menu_cfg.CELL_PADDING= '0px 10px'; //(   '0px')各層セルパディング(px)
menu_cfg.CELL_ALIGN= ['center','left']; //(  'left')各層セル寄せ方
menu_cfg.INNER_BORDER_WIDTH= 1; //(       0)各層セル内側枠幅(px)
menu_cfg.OUTER_BORDER_WIDTH= 1; //(       0)各層セル外側枠幅(px)
menu_cfg.PARTITION_WIDTH= 3; //(       1)各層セル仕切線幅(px)
menu_cfg.SHADOW_WIDTH= 0; //(       0)各層セル影線幅(px)
menu_cfg.OFFSET_RIGHT= [0,0,-4]; //(       0)各層セル右オフセット(px)
menu_cfg.OFFSET_DOWN= [0,0,4]; //(       0)各層セル下オフセット(px)
menu_cfg.FONT_SIZE= 12; //(      12)各層セル文字サイズ(px)
menu_cfg.FONT_WEIGHT= 'normal'; //('normal')各層セル文字の太さ
menu_cfg.TARGET_WINDOW= ''; //(      '')各層別リンク先のウインドウ名
menu_cfg.CELL_OPACITY= null; //(    null)各層セル不透明度(nullは完全不透明)
menu_cfg.CELL_BG_IMG= null; //(    null)各層背景画像(パス付きで)
menu_cfg.IMG_ARROW= './arrow.png'; //(    null)各層矢印画像(パス付きで)
menu_cfg.POSITION_ID= null; //(    null)位置を連動させる他の要素を登録

appearance 3
アピアランス３

JavaScript code 3

//アピアランス３
//メニューのデータ項目を設定
var mydata = new Array(  //第1層目の2項目
['id_1','label_1','#'],
['id_2','label_2','#']
);
mydata.id_1 = new Array(  //第2層目の3項目
['id_1_1','label_1_1','#'],
['id_1_2','label_1_2','#'],
['id_1_3','label_1_2','#']
);
mydata.id_2 = new Array(  //第2層目の1項目
['id_2_1','label_2_1','#']
);
mydata.id_1.id_1_2 = new Array(  //第3層目の3項目
['id_1_2_1','label_1_2_1','#'],
['id_1_2_2','label_1_2_2','#'],
['id_1_2_3','label_1_2_3','#']
);

//メニューの色を設定
var mycolor=[];
mycolor.CHAR_REVERSE= 'White'; //反転時文字色
mycolor.BG = 'White'; //背景色
mycolor.INNER_LEFT_UP= 'transparent'; //左上・内枠線色
mycolor.INNER_RIGHT_DOWN= 'transparent'; //右下・内枠線色
mycolor.OUTER_LEFT_UP= 'transparent'; //左上・外枠線色
mycolor.OUTER_RIGHT_DOWN= 'transparent'; //右下・外枠線色
mycolor.BG_REVERSE= '#2F3F4D'; //反転時背景色
mycolor.CHAR= 'Black'; //文字色
mycolor.PARTITION= 'transparent'; //仕切線色
mycolor.SHADOW= null; //影線色
mycolor.BG_PRESSED= 'Red'; //マウス押下時背景色

//メニューの形状を設定
var menu_cfg = [];
//----- 次の3項目は設定が必須です。省略ができません。
menu_cfg.menu_name= 'mymenu'; //(設定必須)いまから作る階層メニューの名前
menu_cfg.data_array= mydata; //(設定必須)データ項目配列の名前
menu_cfg.color_array= mycolor; //(設定必須)カラーデータ配列の名前
//----- 次の5項目は，すべて数値で設定してください(省略可/カッコ内はデフォルト値)。
menu_cfg.is_vertical= 0; //( 0)第１層目が縦方向->1 / 横方向->0
menu_cfg.position_x= 40; //( 0)第１層目の左上隅のウインドウ上の右方向位置
menu_cfg.position_y= 40; //( 0)第１層目の左上隅のウインドウ上の下方向位置
menu_cfg.root_gap= 2; //( 0)第１層目のセルどうしの隙間
menu_cfg.time_lag= 20; //(20)コンテナ開閉のタイムラグ(ミリ秒)
//----- 次の17項目は，値もしくは変数名または配列で設定(省略可/カッコ内はデフォルト値)。
menu_cfg.CELL_WIDTH= [80,100]; //(     100)各層セル幅(px)
menu_cfg.CELL_HEIGHT= 15; //(      15)各層セル高(px)
menu_cfg.CELL_PADDING= '0px 10px'; //(   '0px')各層セルパディング(px)
menu_cfg.CELL_ALIGN= ['center','left']; //(  'left')各層セル寄せ方
menu_cfg.INNER_BORDER_WIDTH= 0; //(       0)各層セル内側枠幅(px)
menu_cfg.OUTER_BORDER_WIDTH= 0; //(       0)各層セル外側枠幅(px)
menu_cfg.PARTITION_WIDTH= 2; //(       1)各層セル仕切線幅(px)
menu_cfg.SHADOW_WIDTH= 0; //(       0)各層セル影線幅(px)
menu_cfg.OFFSET_RIGHT= [0,0,2]; //(       0)各層セル右オフセット(px)
menu_cfg.OFFSET_DOWN= [0,2,0]; //(       0)各層セル下オフセット(px)
menu_cfg.FONT_SIZE= 12; //(      12)各層セル文字サイズ(px)
menu_cfg.FONT_WEIGHT= 'normal'; //('normal')各層セル文字の太さ
menu_cfg.TARGET_WINDOW= ''; //(      '')各層別リンク先のウインドウ名
menu_cfg.CELL_OPACITY= null; //(    null)各層セル不透明度(nullは完全不透明)
menu_cfg.CELL_BG_IMG= null; //(    null)各層背景画像(パス付きで)
menu_cfg.IMG_ARROW= './arrow.png'; //(    null)各層矢印画像(パス付きで)
menu_cfg.POSITION_ID= null; //(    null)位置を連動させる他の要素を登録

appearance 4
アピアランス４

JavaScript code 4

//アピアランス４
//メニューのデータ項目を設定
var mydata = new Array(  //第1層目の2項目
['id_1','label_1','#'],
['id_2','label_2','#']
);
mydata.id_1 = new Array(  //第2層目の3項目
['id_1_1','label_1_1','#'],
['id_1_2','label_1_2','#'],
['id_1_3','label_1_2','#']
);
mydata.id_2 = new Array(  //第2層目の1項目
['id_2_1','label_2_1','#']
);
mydata.id_1.id_1_2 = new Array(  //第3層目の3項目
['id_1_2_1','label_1_2_1','#'],
['id_1_2_2','label_1_2_2','#'],
['id_1_2_3','label_1_2_3','#']
);

//メニューの色を設定
var mycolor=[];
mycolor.CHAR_REVERSE= 'White'; //反転時文字色
mycolor.BG = 'White'; //背景色
mycolor.INNER_LEFT_UP= '#2F3F4D'; //左上・内枠線色
mycolor.INNER_RIGHT_DOWN= '#2F3F4D'; //右下・内枠線色
mycolor.OUTER_LEFT_UP= 'transparent'; //左上・外枠線色
mycolor.OUTER_RIGHT_DOWN= 'transparent'; //右下・外枠線色
mycolor.BG_REVERSE= '#2F3F4D'; //反転時背景色
mycolor.CHAR= 'Black'; //文字色
mycolor.PARTITION= '#2F3F4D'; //仕切線色
mycolor.SHADOW= null; //影線色
mycolor.BG_PRESSED= 'Red'; //マウス押下時背景色

//メニューの形状を設定
var menu_cfg = [];
//----- 次の3項目は設定が必須です。省略ができません。
menu_cfg.menu_name= 'mymenu'; //(設定必須)いまから作る階層メニューの名前
menu_cfg.data_array= mydata; //(設定必須)データ項目配列の名前
menu_cfg.color_array= mycolor; //(設定必須)カラーデータ配列の名前
//----- 次の5項目は，すべて数値で設定してください(省略可/カッコ内はデフォルト値)。
menu_cfg.is_vertical= 0; //( 0)第１層目が縦方向->1 / 横方向->0
menu_cfg.position_x= 40; //( 0)第１層目の左上隅のウインドウ上の右方向位置
menu_cfg.position_y= 40; //( 0)第１層目の左上隅のウインドウ上の下方向位置
menu_cfg.root_gap= -2; //( 0)第１層目のセルどうしの隙間
menu_cfg.time_lag= 20; //(20)コンテナ開閉のタイムラグ(ミリ秒)
//----- 次の17項目は，値もしくは変数名または配列で設定(省略可/カッコ内はデフォルト値)。
menu_cfg.CELL_WIDTH= [80,100]; //(     100)各層セル幅(px)
menu_cfg.CELL_HEIGHT= 15; //(      15)各層セル高(px)
menu_cfg.CELL_PADDING= '0px 10px'; //(   '0px')各層セルパディング(px)
menu_cfg.CELL_ALIGN= ['center','left']; //(  'left')各層セル寄せ方
menu_cfg.INNER_BORDER_WIDTH= 2; //(       0)各層セル内側枠幅(px)
menu_cfg.OUTER_BORDER_WIDTH= 0; //(       0)各層セル外側枠幅(px)
menu_cfg.PARTITION_WIDTH= 1; //(       1)各層セル仕切線幅(px)
menu_cfg.SHADOW_WIDTH= 0; //(       0)各層セル影線幅(px)
menu_cfg.OFFSET_RIGHT= [0,0,-2]; //(       0)各層セル右オフセット(px)
menu_cfg.OFFSET_DOWN= [0,-2,0]; //(       0)各層セル下オフセット(px)
menu_cfg.FONT_SIZE= 12; //(      12)各層セル文字サイズ(px)
menu_cfg.FONT_WEIGHT= 'normal'; //('normal')各層セル文字の太さ
menu_cfg.TARGET_WINDOW= ''; //(      '')各層別リンク先のウインドウ名
menu_cfg.CELL_OPACITY= null; //(    null)各層セル不透明度(nullは完全不透明)
menu_cfg.CELL_BG_IMG= null; //(    null)各層背景画像(パス付きで)
menu_cfg.IMG_ARROW= './arrow.png'; //(    null)各層矢印画像(パス付きで)
menu_cfg.POSITION_ID= null; //(    null)位置を連動させる他の要素を登録

appearance 5
アピアランス５

JavaScript code 5

//アピアランス５
//メニューのデータ項目を設定
var mydata = new Array(  //第1層目の2項目
['id_1','label_1','#'],
['id_2','label_2','#']
);
mydata.id_1 = new Array(  //第2層目の3項目
['id_1_1','label_1_1','#'],
['id_1_2','label_1_2','#'],
['id_1_3','label_1_2','#']
);
mydata.id_2 = new Array(  //第2層目の1項目
['id_2_1','label_2_1','#']
);
mydata.id_1.id_1_2 = new Array(  //第3層目の3項目
['id_1_2_1','label_1_2_1','#'],
['id_1_2_2','label_1_2_2','#'],
['id_1_2_3','label_1_2_3','#']
);

//メニューの色を設定
var mycolor=[];
mycolor.CHAR_REVERSE= 'White'; //反転時文字色
mycolor.BG = 'Gainsboro'; //背景色
mycolor.INNER_LEFT_UP= 'White'; //左上・内枠線色
mycolor.INNER_RIGHT_DOWN= 'White'; //右下・内枠線色
mycolor.OUTER_LEFT_UP= 'transparent'; //左上・外枠線色
mycolor.OUTER_RIGHT_DOWN= 'transparent'; //右下・外枠線色
mycolor.BG_REVERSE= '#2F3F4D'; //反転時背景色
mycolor.CHAR= 'Black'; //文字色
mycolor.PARTITION= 'White'; //仕切線色
mycolor.SHADOW= 'Gray'; //影線色
mycolor.BG_PRESSED= 'Red'; //マウス押下時背景色

//メニューの形状を設定
var menu_cfg = [];
//----- 次の3項目は設定が必須です。省略ができません。
menu_cfg.menu_name= 'mymenu'; //(設定必須)いまから作る階層メニューの名前
menu_cfg.data_array= mydata; //(設定必須)データ項目配列の名前
menu_cfg.color_array= mycolor; //(設定必須)カラーデータ配列の名前
//----- 次の5項目は，すべて数値で設定してください(省略可/カッコ内はデフォルト値)。
menu_cfg.is_vertical= 0; //( 0)第１層目が縦方向->1 / 横方向->0
menu_cfg.position_x= 40; //( 0)第１層目の左上隅のウインドウ上の右方向位置
menu_cfg.position_y= 40; //( 0)第１層目の左上隅のウインドウ上の下方向位置
menu_cfg.root_gap= -2; //( 0)第１層目のセルどうしの隙間
menu_cfg.time_lag= 20; //(20)コンテナ開閉のタイムラグ(ミリ秒)
//----- 次の17項目は，値もしくは変数名または配列で設定(省略可/カッコ内はデフォルト値)。
menu_cfg.CELL_WIDTH= [80,100]; //(     100)各層セル幅(px)
menu_cfg.CELL_HEIGHT= 15; //(      15)各層セル高(px)
menu_cfg.CELL_PADDING= '0px 10px'; //(   '0px')各層セルパディング(px)
menu_cfg.CELL_ALIGN= ['center','left']; //(  'left')各層セル寄せ方
menu_cfg.INNER_BORDER_WIDTH= 2; //(       0)各層セル内側枠幅(px)
menu_cfg.OUTER_BORDER_WIDTH= 0; //(       0)各層セル外側枠幅(px)
menu_cfg.PARTITION_WIDTH= 1; //(       1)各層セル仕切線幅(px)
menu_cfg.SHADOW_WIDTH= 1; //(       0)各層セル影線幅(px)
menu_cfg.OFFSET_RIGHT= [0,0,-7]; //(       0)各層セル右オフセット(px)
menu_cfg.OFFSET_DOWN= [0,-2,0]; //(       0)各層セル下オフセット(px)
menu_cfg.FONT_SIZE= 12; //(      12)各層セル文字サイズ(px)
menu_cfg.FONT_WEIGHT= 'normal'; //('normal')各層セル文字の太さ
menu_cfg.TARGET_WINDOW= ''; //(      '')各層別リンク先のウインドウ名
menu_cfg.CELL_OPACITY= null; //(    null)各層セル不透明度(nullは完全不透明)
menu_cfg.CELL_BG_IMG= null; //(    null)各層背景画像(パス付きで)
menu_cfg.IMG_ARROW= './arrow.png'; //(    null)各層矢印画像(パス付きで)
menu_cfg.POSITION_ID= null; //(    null)位置を連動させる他の要素を登録

Copyright (C) 2004 Nakagawa Hiroyuki All rights reserved