サンプルページ　　　3層プルダウンメニュー1

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　 3層ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ1　triple_pldm1.htm

3層ﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ、[Go]ﾎﾞﾀﾝあり。　　　　　　DHTML。　　　　　　ﾒﾆｭｰ、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

< ご使用方法 >

・　ﾛｰｶﾙ（=PC）への保存は、triple_pldm1.htm、88220.js、88221.js（ﾒﾆｭｰ、ﾊｲﾊﾟｰﾘﾝｸ記述）を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　※: 変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。　　　

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

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

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

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

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

　HTMLの編集方法　

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

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

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

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

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

<title>サンプルページ　　 3層プルダウンメニュー1</title>

<script language="javascript" src="88220.js">

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

</script>
<script language="javascript" src="88221.js"></script>

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

HTMLの編集方法　

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

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

ﾒﾆｭｰ幅

<p align="left"><form name="listmenu0">
<table><tr>
<td><select name="firstlevel" style="width:100px;"></select></td>
<td><select name="secondlevel" style="width:130px;"></select></td>
<td><select name="thirdlevel" style="width:150px;"></select></td>
<td><input type="button" 　……　hirdlevel)">
</tr></table>
</form></p>

(*3) ：　88221.js （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。

*.css、*.jsの編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

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

ﾍﾟｰｼﾞを開く

新しいWinで開く

1st選択項目　

2nd選択項目

3rd選択項目（ｻｲﾄ名）

URL

以下、同様に編集。

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

var onclickaction="goto" //　……　 all set up as desired.

var newwindow=1 //Open links in new window or not? 1=yes, 0=no.

/////DEFINE YOUR MENU LISTS and ITEMS below/////////////////

addListGroup("chainedmenu", "First-Select");

addOption("First-Select", "選択項目　▼", "", 1); //HEADER OPTION
addList("First-Select", "Web制作ｿｰｽ", "", "Webmaster");
addList("First-Select", "ﾆｭｰｽｻｲﾄ", "", "News");
addList("First-Select", "車ｻｲﾄ", "", "Cars");
addList("First-Select", "日記ｲﾝﾃﾞｯｸｽ", "", "Diary");

addOption("Webmaster", "選択項目　▼", "", 1); //HEADER OPTION
addList("Webmaster", "JavaScript Links", "", "Webmaster-JavaScript");
addList("Webmaster", "PHP Links", "", "Webmaster-PHP");
addOption("Webmaster", "CodingForums → [Go]", "http://www.codingforums.com"); //END OF THIS NODE

addOption("Webmaster-JavaScript", "選択項目　▼", "", 1); //HEADER OPTION
addOption("Webmaster-JavaScript", "JavaScript Kit", "http://www.javascriptkit.com");
addOption("Webmaster-JavaScript", "Dynamic Drive", "http://www.dynamicdrive.com");
addOption("Webmaster-JavaScript", "JavaScript Reference", "http://www.javascriptkit.com/jsref/");
addOption("Webmaster-JavaScript", "Simply the Best.net", "http://simplythebest.net/scripts/DHTML_scripts/");
addOption("Webmaster-JavaScript", "Web & Internet Samples", "http://　……　elcome.asp");

addOption("Webmaster-PHP", "選択項目　▼", "", 1); //HEADER OPTION

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

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

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