以下、自由ｺﾝﾃﾝﾂ（HTML）を記述。　　　本例は、説明文。

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　折り畳みﾒﾆｭｰ 17　　oritatami17.htm

ﾏｳｽｵｰﾊﾞｰ階層のみの展開/折り畳み、自動ﾀｲﾏｰ折り畳みのﾒﾆｭｰ。　　　　　　DHTML。　　　　　ﾊｲﾊﾟｰﾘﾝｸ、彩色、ｻｲｯｽﾞ、配置などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、ﾏｳｽｵｰﾊﾞｰ、ﾊｲﾊﾟｰﾘﾝｸのｵｰﾌﾟﾝで。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、oritatami17.htm、044500.js、rbbl13.gif　を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、oritatami17.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名） の、 <head>　〜　</head> の任意の行間に (*1) を、さらに <body>　〜　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰ で開き編集します。　　　　下記の（例） (*1) と、(*2) を参考に太字部分の編集を任意に行います。　　　ｱｲｺﾝ画像などの変更は準備した画像ﾌｧｲﾙ名を、hogehoge.html などの該当部分に記述。　　 ※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 6.x〜 などで開いて。　　　　更新の確認は、ie、Netscapeやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieで [F5]ｷｰ を押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。　　　Netscapeは、Ctrl+Ｒｷｰで。

　･　ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.js なども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

　･　関連情報 ： 色記号、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門 が便利！。　　　Web & Internet Samples、Online Columns、XML、DHTMLとは？、ColorTable、HTMLの色指定、色見本。

　

(*1) ：　oritatami17.htm （例）　　　　　　　　　挿入先の 　<head> 〜 </head>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

ｼﾌﾄJIS使用（削除不可）

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）
<style type 〜 </style>は（削除可）
ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ　 背景色　下線非表示
非ﾏｳｽｵｰﾊﾞｰ時の下線表示（逆も可）

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ　target="_self"
ﾍﾟｰｼﾞ全体　　target="_top"
親ﾌﾚｰﾑ　 target="_parent"
 お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

 

 


余白　ﾌｫﾝﾄ　背景色　文字色　ﾏｳｽｵｰﾊﾞｰ時 〃　ｶｰｿﾙ　罫線色

以下、同様。

 

　

 　

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="faviconu.ico">
<style type="text/css"><!-- A:hover {
COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none
}
A {
TEXT-DECORATION: underline
}
-->
</style>
<base target="_blank">
<title>サンプルページ　　折り畳みメニュー 17</title>

　

<!--　☆ -----------　↓ この間をコピー＆ペーストします。 ------------　-->
<style>
/* CoolMenus 4 - default styles - do not edit */
.clCMAbs{position:absolute; visibility:hidden; left:0; top:0}
/* CoolMenus 4 - default styles - end */

/*Style for the background-bar*/
.clBar{position:absolute; width:10; height:10; background-color:#E7E5ED; layer-background-color:#E7E5ED; visibility:hidden}

/*　ﾒｲﾝﾒﾆｭｰ　余白、ﾌｫﾝﾄ、背景色、文字色、ﾏｳｽｵｰﾊﾞｰ時〃、罫線色　　Styles for level 0*/
.clLevel0, .clLevel0over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:11px; font-weight:normal}
.clLevel0{background-color:#DBDAE7; layer-background-color:#DBDAE7; color:#3C0049;}
.clLevel0over{background-color:#FAF9FB; layer-background-color:#FAF9FB; color:#4D0060; cursor:pointer; cursor:hand; }
.clLevel0border{position:absolute; visibility:hidden; background-color:#A098B4; layer-background-color:#A098B4}

/*　ｻﾌﾞﾒﾆｭｰ　余白、ﾌｫﾝﾄ、背景色、文字色、ﾏｳｽｵｰﾊﾞｰ時〃、罫線色　Styles for level 1*/
.clLevel1, .clLevel1over{position:absolute; padding:2px; font-family:tahoma, arial,helvetica; font-size:11px; font-weight:normal}
.clLevel1{background-color:#EFEEF1; layer-background-color:#EFEEF1; color:#3C0049;}
.clLevel1over{background-color:#FAF9FB; layer-background-color:#FAF9FB; color:#4D0060; cursor:pointer; cursor:hand; }
.clLevel1border{position:absolute; visibility:hidden; background-color:#A098B4; layer-background-color:#A098B4}

/*　2ndｻﾌﾞﾒﾆｭｰ　余白、ﾌｫﾝﾄ、背景色、文字色、ﾏｳｽｵｰﾊﾞｰ時〃、罫線色　Styles for level 2*/
.clLevel2, .clLevel2over{position:absolute; padding:2px; font-family:tahoma,arial,helvetica; font-size:11px; font-weight:normal}
.clLevel2{background-color:#EFEEF1; layer-background-color:#EFEEF1; color:#3C0049;}
.clLevel2over{background-color:#FAF9FB; layer-background-color:#FAF9FB; color:#4D0060; cursor:pointer; cursor:hand; }
.clLevel2border{position:absolute; visibility:hidden; background-color:#A098B4; layer-background-color:#A098B4}
</style>

<script language="JavaScript1.2" src="044500.js">
/*****************************************************************************
Copyright (c) 2001 Thomas Brattli (webmaster@dhtmlcentral.com)
DHTML coolMenus - Get it at coolmenus.dhtmlcentral.com　　Version 4.0_beta
This script can be used freely as long as all copyright messages are intact.
Extra info - Coolmenus reference/help - Extra links to help files ****
CSS help: http://coolmenus.dhtmlcentral.com/projects/coolmenus/reference.asp?m=37
General: http://coolmenus.dhtmlcentral.com/reference.asp?m=35
Menu properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=47
Level properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=48
Background bar properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=49
Item properties: http://coolmenus.dhtmlcentral.com/properties.asp?m=50
******************************************************************************/
</script>
<!--　☆ -----------　↑ この間をコピー＆ペーストします。 ------------　-->

　

(*2) ：　oritatami17.htm （例）　　　　　　　　挿入先の 　<body> 〜 </body>　の、〜 部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　  (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。
〔この列ﾍﾟｰｽﾄ不要〕

※：<body>　部の編集　背景　ﾘﾝｸ　表示済みﾘﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

 

  

 

 

 

配置 

 


　

ﾒﾆｭｰ自動閉じﾀｲﾏｰ

 

 

 

 

 

 

ﾒﾆｭｰ幅 
 ﾒﾆｭｰ高さ

 

 
　

下層有無ｱｲｺﾝ（削除可） 
ｱｲｺﾝ幅
ｱｲｺﾝ高さ

 

 

 

 

2ndﾒﾆｭｰ横ｵﾌｾｯﾄ

 
　

 

 

 

 

 

ﾒﾆｭｰ、ｻｲﾄ名　URL　ﾘﾝｸを新しいWinで開く

以下、同様。

 

　

　

　

　

　

右DIVの位置設定。

　

　

　

　

右DIVの終端、末尾に記述。

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<script>
/***
This is the menu creation code - place it right after you body tag
Feel free to add this to a stand-alone js file and link it to your page.
**/
//http://www.dhtmlcentral.com/forums/topic.asp?TOPIC_ID=14477

//Menu object creation
oCMenu=new makeCM("oCMenu") //Making the menu object. Argument: menuname

oCMenu.frames = 0

//Menu properties
oCMenu.pxBetween=0
oCMenu.fromLeft=10　　//　配置 　　
oCMenu.fromTop=10 　//　配置
oCMenu.rows=0
oCMenu.menuPlacement=0

oCMenu.offlineRoot=""
oCMenu.onlineRoot=""
oCMenu.resizeCheck=1
oCMenu.wait=600 　　　//　ﾒﾆｭｰ自動閉じﾀｲﾏｰ
oCMenu.fillImg="xcm_fill.gif"
oCMenu.zIndex=0

//Background bar properties
oCMenu.useBar=0
oCMenu.barWidth="menu"
oCMenu.barHeight="menu"
oCMenu.barClass="clBar"
oCMenu.barX=0
oCMenu.barY=0
oCMenu.barBorderX=0
oCMenu.barBorderY=0
oCMenu.barBorderClass=""

//Level properties - ALL properties have to be spesified in level 0
oCMenu.level[0]=new cm_makeLevel() //Add this for each new level
oCMenu.level[0].width=120　　//　ﾒﾆｭｰ幅
oCMenu.level[0].height=20 　 // ﾒﾆｭｰ高さ
oCMenu.level[0].regClass="clLevel0"
oCMenu.level[0].overClass="clLevel0over"
oCMenu.level[0].borderX=1
oCMenu.level[0].borderY=1
oCMenu.level[0].borderClass="clLevel0border"
oCMenu.level[0].offsetX=0
oCMenu.level[0].offsetY=0
oCMenu.level[0].rows=0
oCMenu.level[0].arrow="rbbl13.gif"　　//　下層有無ｱｲｺﾝ（削除可）
oCMenu.level[0].arrowWidth=13　 　　　//　下層有無ｱｲｺﾝ幅
oCMenu.level[0].arrowHeight=13 　　 　//　下層有無ｱｲｺﾝ高さ
oCMenu.level[0].align="bottom"

//EXAMPLE SUB LEVEL[1] PROPERTIES - You have to specify the properties you want different from LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[1]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[1].width=oCMenu.level[0].width-2
oCMenu.level[1].height=20 　 // ﾒﾆｭｰ高さ
oCMenu.level[1].regClass="clLevel1"
oCMenu.level[1].overClass="clLevel1over"
oCMenu.level[1].borderX=1
oCMenu.level[1].borderY=1
oCMenu.level[1].align="right"
oCMenu.level[1].offsetX=-(oCMenu.level[0].width-2)/2+57　　//　2ndﾒﾆｭｰ横ｵﾌｾｯﾄ
oCMenu.level[1].offsetY=0
oCMenu.level[1].borderClass="clLevel1border"

//EXAMPLE SUB LEVEL[2] PROPERTIES - You have to spesify the properties you want different from LEVEL[1] OR LEVEL[0] - If you want all items to look the same just remove this
oCMenu.level[2]=new cm_makeLevel() //Add this for each new level (adding one to the number)
oCMenu.level[2].width=150　　//　ﾒﾆｭｰ幅
oCMenu.level[2].height=20 　 // ﾒﾆｭｰ高さ
oCMenu.level[2].offsetX=0
oCMenu.level[2].offsetY=0
oCMenu.level[2].regClass="clLevel2"
oCMenu.level[2].overClass="clLevel2over"
oCMenu.level[2].borderClass="clLevel2border"

/******************************************
Menu item creation:
myCoolMenu.makeMenu(name, parent_name, text, link, target, width, height, regImage, overImage, regClass, overClass , align, rows, nolink, onclick, onmouseover, onmouseout)
*************************************/
oCMenu.makeMenu('top0','','&nbsp;ｻｲﾄ　1','http://www./……/xxx.html','_blank')
oCMenu.makeMenu('sub00','top0','&nbsp;太陽風ДζΨΠ∀','http://www001.upp.so-net.ne.jp/oka/oritatami3c.html','_blank')

====　　この間、説明を省略。　　====

　oCMenu.makeMenu('sub45','top4','&nbsp;ｻｲﾄ　56','http://www./……/xxx.html','_blank')
　oCMenu.makeMenu('sub46','top4','&nbsp;ｻｲﾄ　57','http://www./……/xxx.html','_blank')
　oCMenu.makeMenu('sub47','top4','&nbsp;ｻｲﾄ　58','http://www./……/xxx.html','_blank')
　oCMenu.makeMenu('sub48','top4','&nbsp;ｻｲﾄ　59','http://www./……/xxx.html','_blank')

//Leave this line - it constructs the menu
oCMenu.construct()

====　　この間、説明を省略。　　====
}
}
</script>
<!--　↓　 右DIVの位置設定。　 -->
<div style="position: absolute; left: 140px; top: 10px;">
<!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　-->

自由HTMLを記述します。

====  この間､説明を省略｡  ====

<!-- ★ -----　右DIVの終端、末尾に ↓ を記述します｡ ---------- -->
</div>
<!-- ★ -----　右DIVの終端、末尾に ↑ を記述します｡ ---------- -->
</body>
</html>

< 補足 >　　　　適時参照あれ！。

　・　Wordpad　によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。