サンプルページ　　　トップナビバー 12

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ12　　top_nav_bar12.htm

ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ、ﾏｳｽｵｰﾊﾞｰでﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ（Table of Contents: TOC)を表示。　　高速展開・表示。　　　　　　DHTML、CSS。　　　　　配色、ﾘﾝｸ、ﾒﾆｭｰｻｲｽﾞなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　IE4.x～対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ。

< ご使用方法 >

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

　・　このDHTMLの実装方法は、top_nav_bar12.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 10.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

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

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

　HTMLの編集方法　

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

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

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

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

ﾊｲﾊﾟｰﾘﾝｸ文字色　背景色　下線
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃

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

ﾄｯﾌﾟﾅﾋﾞﾊﾞｰﾏｳｽｵｰﾊﾞｰ時文字色

ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ背景色　〃幅　絶対位置

ﾌｫﾝﾄｻｲｽﾞ　文字色　上右下左余白　ｶｰｿﾙ

太字ﾌｫﾝﾄ　ｶｰｿﾙ

展開ﾒﾆｭｰﾌｫﾝﾄｻｲｽﾞ　背景色

展開ﾒﾆｭｰ罫線　〃色　余白

展開ﾒﾆｭｰ下線無し　文字色　太字

展開ﾒﾆｭｰﾏｳｽｵｰﾊﾞｰ時文字色　〃背景色　余白

<base target="_blank">
<title>サンプルページ　　　トップナビバー 12</title>

<script LANGUAGE="JScript"><!--

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

if ("clsMenuBarItem" == eSrc.className)
{
eSrc.style.color = "#D24AD1"; //　ﾄｯﾌﾟﾅﾋﾞﾊﾞｰﾏｳｽｵｰﾊﾞｰ時文字色
var eMenu = document.all[eSrc.id.replace("tdMenuBarItem","divMenu")];
if (eOpenMenu && eOpenMenu != eMenu)

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

{
eSrc.style.color = "";
}
}
//-->
</script>

<style TYPE="text/css">
</style>

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

　HTMLの編集方法　

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

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

ﾒﾆｭｰ

ﾀｰｹﾞｯﾄ　URL　吹き出し　ｻｲﾄ名ﾞ

以下、同様。

ﾒｰﾙｱﾄﾞﾚｽ

<body>

<div ID="divMenuBar">
<table ID="tblMenuBar" BORDER="0">
<tr>
<td CLASS="clsMenuBarItem" ID="tdMenuBarItem1">ﾒﾆｭｰ　　1</td>
<td>|</td>
<td CLASS="clsMenuBarItem" ID="tdMenuBarItem2">ﾒﾆｭｰ　　2</td>
<td>|</td>
<td CLASS="clsMenuBarItem" ID="tdMenuBarItem3">ﾒﾆｭｰ　　3</td>
<td>|</td>
<td CLASS="clsMenuBarItem" ID="tdMenuBarItem4">ﾒﾆｭｰ　　4</td>
<td>|</td>
<td CLASS="clsMenuBarItem" ID="tdMenuBarItem5">ﾒﾆｭｰ　　5</td>
<td>|</td>
<td CLASS="clsMenuBarItem" ID="tdMenuBarItem6"> </td>
</tr>
</table>
</div>
<div CLASS="clsMenu" ID="divMenu1">
<div CLASS="clsMenuSpacer">
</div>
<div>
<a TARGET="_new" HREF="http://tv.yahoo.co.jp/vhf/tokyo/realtime.html" title="番組表・TV関連ﾘﾝｸ">TVｶﾞｲﾄﾞ-東京</a></div>
<div>
<a TARGET="_new" HREF="http://www.nhk.or.jp/hensei/fm/" title="現在の番組表">NHK-FM番組</a></div>
<div>
<a TARGET="_new" HREF="http://Apple.com/quicktime/" title="Apple QuickTime">QuickTime ♪</a></div>
<div>
<a TARGET="_new" HREF="http://realguide.real.com/" title="Real Guide Home">Real Guide</a></div>
<div>
<a TARGET="_new" HREF="http://entertainment.msn.com/Stations/Default.aspx" title="WebRadio ｽﾃｲｼｮﾝ">msn -Radio</a></div>
<div>
<a TARGET="_new" HREF="http://windowsmedia.microsoft.com/mg/Radio.asp?" title="WebRadio ｽﾃｲｼｮﾝ">WindowsMedia－Radio</a></div>
<div>
<a TARGET="_new" HREF="http://entertainment.msn.com/" title="ﾑｰﾋﾞｰ ♪">msn -Eentertainment</a></div>
<div>
<a TARGET="_new" HREF="http://season.biglobe.ne.jp/" title="季節の楽しみいろいろ">BIGLOBE -四季</a></div>
<div>
<a TARGET="_new" HREF="http://　……　.html" title="ｺﾒﾝﾄの記述はまだないな、=( ﾟ oﾟ )=">ｻｲﾄ名は未定(-."-;)</a></div>
<div>
<a TARGET="_new" HREF="mailto:xxxxx@xxx.net" title="お手紙ちょうだい…*">ﾒｰﾙ－φ(.. )</a></div>

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

<a TARGET="_new" HREF="http://　……　57.html">XXXXX57　　　　　　　　</a></div>
</div>

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

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