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

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾄｯﾌﾟﾅﾋﾞｹﾞｰｼｮﾝﾊﾞｰ 5　　top_navi_bar5.htm

MicrosoftのWebｻｲﾄ風のﾄｯﾌﾟﾅﾋﾞﾊﾞｰです。　　　ｽｸﾛｰﾙを無視、定位置を保持します。　　DHTML/CSS。　　　　ﾒﾆｭｰのﾊｲﾊﾟｰﾘﾝｸの追加/変更/削除などは簡単です。　　　　 all 対応。　　　　　ｺﾋﾟｰ、編集して制作者の情報を反映、Webﾍﾟｰｼﾞで応用可能。

ﾃﾞﾓは、ﾒﾆｭｰのｸﾘｯｸや、Winのｽｸﾛｰﾙで。　　Winｻｲｽﾞ変更後は、F5ｷｰ（ie）か、Ctrl+Ｒｷｰ（NN）を押さえ再読みを！。

<ご使用方法>

・　ﾛｰｶﾙ（=PC）への保存は、　top_navi_bar5.htm、05menuct.js、05menu.js をそれぞれ右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……などで。　　　　※1:ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少しある）。　　　 ※2:hogehoge.html ：制作者が名付けた挿入先ﾌｧｲﾙの総称。

　・　このDHTMLの実装方法は、top_navi_bar5.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 と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像、*.jsなども転送/配置し実施。　　※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。　　　FTPなどで変わったﾌｧｲﾙ名は要修正。　　　　ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。

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

HTMLの編集方法　

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

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

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

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

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

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

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

HTMLの編集方法　

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

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

ｺﾝﾃﾝﾂとｽｸﾘｰﾝ間ﾏｰｼﾞﾝ

ﾍﾟｰｼﾞ背景　ﾘﾝｸ　表示済みﾘﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸ色

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

</script>

(*3) ：　 05menuct.js　（例）　ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。　Wordpadは、”ﾃｷｽﾄ文書”で保存します。（ﾌｧｲﾙ名を保ちます。）

*.js の編集方法　

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

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

ﾒﾆｭｰid　ﾒﾆｭｰ名　吹き出し文字

ﾒﾆｭｰ数の加減は、ﾒﾆｭｰid行の追加/削除で。

以下同様。

ﾒﾆｭｰid　ｻｲﾄ名　吹き出し文字　URL

ｻﾌﾞﾒﾆｭｰの加減は行単位の追加/削除で。

以下同様。

function showToolbar()

{

// AddItem(id, text, hint, location, alternativeLocation);

// AddSubItem(idParent, text, hint, location);

menu = new Menu();

menu.addItem("id1", "サーチエンジン", "世界の主な検索ｻｲﾄ", null, null);

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

menu.addSubItem("id1", "Googleサーチ", "最新の超高速検索ｴﾝｼﾞﾝ", "http://www.google.com/");

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

menu.addSubItem("id5", "……58", "……58", "http://www.……/xx08.html");

menu.showMenu();

}

(*4) ：　 05menu.js　（例）　　ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。　Wordpadは、”ﾃｷｽﾄ文書”で保存します。（ﾌｧｲﾙ名を保ちます。）

*.js の編集方法　

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

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

ﾒﾆｭｰ背景色　

ﾒﾆｭｰの書体　ｻｲｽﾞ　ﾌｫﾝﾄ

ﾒﾆｭｰ枠線ｻｲｽﾞ

ﾒﾆｭｰ幅ｻｲｽﾞ

ﾒﾆｭｰ全体の幅(ﾋﾟｸｾﾙ)、600 → 100%(相対ｻｲｽﾞ指定)も。

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

rightX = 0;

function Menu()

{

this.bgColor = "#E6E1EF";

if (ie) this.menuFont = "bold small MSPゴシック";

if (n) this.menuFont = "bold x-small MSPゴシック";

// this.fontColor = "white";

this.addItem = addItem;

this.addSubItem = addSubItem;

this.showMenu = showMenu;

this.mainPaneBorder = 0;

this.subMenuPaneBorder = 0;

this.subMenuPaneWidth = 150;

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

HTMLstr += "<table width='600' bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";

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