サンプルページ　　折り畳みﾒﾆｭｰ js

ﾒﾆｭｰ 0 ﾒﾆｭｰ 1 Webｻｲﾄ 11 Webｻｲﾄ 12 Webｻｲﾄ 13 Webｻｲﾄ 14 ﾒﾆｭｰ 2 Webｻｲﾄ 21 Webｻｲﾄ 22 Webｻｲﾄ 23 Webｻｲﾄ 24 ﾒﾆｭｰ 3 Webｻｲﾄ 31 Webｻｲﾄ 32 Webｻｲﾄ 33 Webｻｲﾄ 34 ﾒﾆｭｰ 4 ﾒﾆｭｰ 5 ﾒﾆｭｰ 6 太陽風ДζΨΠ∀ ｶﾚﾝﾀﾞｰ13 Radio Station ﾅﾋﾞﾊﾞｰﾂﾘｰﾒﾆｭｰ15fr ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ28fr ｽﾗｲﾄﾞｼｮｰ10 折り畳みﾒﾆｭｰ3c1

以下、説明、削除可。

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

ｸﾘｯｸで展開/折り畳みするﾒﾆｭｰ（ﾂﾘｰ構造）。　　　　　ﾀｰｹﾞｯﾄﾍﾟｰｼﾞ（このﾍﾟｰｼﾞと同ﾄﾞﾒｲﾝﾍﾟｰｼﾞ限定）を右に表示。　　　　　 DHTMLmenuBehaviors、CSS。　　　　　　ﾒﾆｭｰ構造、ﾊｲﾊﾟｰﾘﾝｸ（このﾍﾟｰｼﾞと同ﾄﾞﾒｲﾝﾍﾟｰｼﾞ限定）などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　　　all対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ。　

< ご使用方法 >

・　ﾛｰｶﾙ（=PC）への保存は、oritatami_js.htm、oritatami_js.htc、plus.gif、minus.gif、〔以下ﾃﾞﾓ用・任意：menu0.htm、menu1.htm、menu2.htm、menu3.htm、menu4.htm、menu5.htm、menu6.htm、webx1.htm、webx2.htm、webx3.htm、webx4.htm、nav_closed.gif 〕　を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※:変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

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

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

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

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

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

　HTMLの編集方法　

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

〔この列ﾍﾟｰｽﾄ不要〕　

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

ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）

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

位置

右ｻｲｽﾞ

左ｻｲｽﾞ　

<title>サンプルページ　　折り畳みﾒﾆｭｰ js</title>

<style type="text/css"><!--

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

.container {
position:Absolute;
top: 2px;　　　　　/*　配置　*/
left: 2px; 　　/*　配置　*/
height:175px;
}

.contents {
position: absolute;
top: 0px;
left: 0px;
height: 600px;　　/*　ｺﾝﾃﾝﾂ高さ　*/ 　　　
border: solid 1 #9695AE;　　 /*　罫線太さ、色　*/
padding: 10px;
width: 925px; 　　　
cursor: hand;　　　　　　　　/*　ｶｰｿﾙ　　*/ 　
background-color: #FFFFFF;　 /*　背景色　*/
}

.topic {
left: 125px;
overflow: hidden;
position: absolute;
top: 0px;
height: 600px; /*　ﾀｰｹﾞｯﾄ高さ　*/
width: 800px;
}
--></style>

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

HTMLの編集方法　

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

〔この列ﾍﾟｰｽﾄ不要〕

右表示ﾍﾟｰｼﾞ　吹き出し　ﾒﾆｭｰ・ｻｲﾄ名

以下、同様

初期、右表示ﾍﾟｰｼﾞ

<body>

<div class="container">
<div class="contents">
<expand:node href="menu0.htm" imgExpand="default" target="topic" title="ﾒﾆｭｰ 0　□">ﾒﾆｭｰ 0
<expand:node href="menu1.htm" imgExpand="default" target="topic" title="ﾒﾆｭｰ 1　□">ﾒﾆｭｰ 1

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

</expand:node>
</div>

<iframe NAME="topic" CLASS="topic" SRC="menu0.htm" SCROLLING="no" NORESIZE></iframe>
</div>
<div style="POSITION: relative">
</div>

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

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