これ以下は、説明。　　削除や任意のHTMLの記述で。

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ45m　　top_navbar45m.htm（作成手順・初期下ﾍﾟｰｼﾞ）

ﾄﾌﾟﾅﾋﾞﾊﾞｰ・ﾌﾚｰﾑ越え展開、影付き + 上下ﾌﾚｰﾑ。　　DHTML、CSS。　　ﾊｲﾊﾟｰﾘﾝｸ、ｱｲｺﾝ、ﾒﾆｭｰ構造・構成などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　all 対応。　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓ : ﾒﾆｭｰ展開、ｻｲﾄをｸﾘｯｸ、下ﾍﾟｰｼﾞに表示などで。　　ﾌﾚｰﾑ越えﾒﾆｭｰ展開は、ｻｲﾄ1112〜で。　　復旧は、［F5］ｷｰや(←)戻るｱｲｺﾝのｸﾘｯｸなどで。

　

< ご使用方法 >

　・　保存は top_navbar45/ をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、top_navbar45m.htm（初期下ﾍﾟｰｼﾞ・作成手順）や、top_navbar45fr.htm（上下ﾌﾚｰﾑ 、DHTML実装）、top_navbar45h.htm（上ﾍﾟｰｼﾞ）、0044300.js、 0044301.js、0044300.css を右ｸﾘｯｸ、wttec.gif を右ｸﾘｯｸ 【名前を付けてﾘﾝｸを保存】 - <保存する場所>： ……、などで。　　※:　変わってしまった、ﾌｧｲﾙ名や、*.htm 中のﾊﾟｽは要修正。

　・　ﾍﾟｰｽﾄは、top_navbar45fr.htmをﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどの ”ﾃｷｽﾄﾓｰﾄﾞ で、新しいﾍﾟｰｼﾞや hogehoge.htm（=任意の挿入先ﾌｧｲﾙ名） にﾍﾟｰｽﾄします。　top_navbar45m1.htm を同様に <head>　〜　</head> の任意の行間に (*1) を、さらに <body>　〜　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。　　　※: ﾃｷｽﾄﾓｰﾄﾞ :  ｺｰﾄﾞ/HTMLﾀｸﾞ挿入/HTMLﾒﾆｭｰ など。

　･　編集 : hogehoge.htm に ﾃｷｽﾄﾓｰﾄﾞでﾍﾟｰｽﾄ 後は、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄのﾃﾞｻﾞｲﾝや通常ﾓｰﾄﾞ、ﾃｷｽﾄﾓｰﾄﾞ、ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。　　下記の（例） (*1) と、(*2)  を参考に太字部分の編集を任意に行います。　

※: 外部ﾄﾞﾒｲﾝ（ｻｲﾄ）にｱｯﾌﾟﾛｰﾄの画像などの使用は、非表示に注意。　　画像の alt ﾀｸﾞは不可、ｻｲｽﾞ指定の pt などの省略は注意。　　ｽｸﾘﾌﾟﾄ構文中への 改行混入注意。

　･　ｱｯﾌﾟﾛｰﾄﾞは、hogehoge.htm と同じﾎﾙﾀﾞｰに、使用してる 上記画像、*.js、*.css などがあればｱｯﾌﾟﾛｰﾄﾞします。 　　別ﾎﾙﾀﾞｰの場合は、hogehoge.htm の該当ﾊﾟｽ注意。

　・　作動ﾃｽﾄは Edge〜 などで。　　更新の確認は、ﾌﾞﾗｳｻﾞｰなどのｷｬｯｼｭのｸﾘｱ後に実施。　　(1) [F5]ｷ- or Ctrl+Rｷｰ を押し、最新ﾃﾞｰﾀ読み込みで。　　更に、(2) Edgeを全て閉じ、再起動を行い、【Edge】 - 右上 [……] - [設定] - [ﾌﾟﾗｲﾊﾞｼｰ、検索、ｻｰﾋﾞｽ] - [閲覧ﾃﾞ-ﾀをｸﾘｱ] - ［ｸﾘｱ-するﾃﾞ-ﾀの選択］ - ［ｖ］閲覧の履歴 -［今すくｸﾘｱ］ をｸﾘｯｸ。　　留めに、(3) ｻｰﾊﾞｰのﾌｧｲﾙを一旦削除。

　･　関連情報 ： 色記号 、RGB5　〃6 、〃8 、ﾌｫﾝﾄ、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門、HTMLをﾃｷｽﾄｴｷﾞﾀ-で編集。

　

(*1) ：　top_navbar45fr.htm（例）　　　　　　　　　挿入先の 　hogehoge.html（ﾌﾚｰﾑﾍﾟｰｼﾞ） にﾍﾟｰｽﾄします。

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

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

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

<style type 〜 </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景

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

　

　

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

　

　


　

ﾒﾆｭｰﾊﾞｰ　幅 間隔　罫線色

高さ　間隔　罫線太さ　罫線色

　

　

左余白　上余白　高さ
ﾒﾆｭｰ･ｻｲﾄ名　ID　ｻﾌﾞﾒﾆｭｰ

　

左余白　 上余白　幅

ﾒﾆｭｰ･ｻｲﾄ名　ID　ｻﾌﾞﾒﾆｭｰ


ﾒﾆｭｰ･ｻｲﾄ名　URL　ﾀｰｹﾞｯﾄ

　

　

　

　

上ﾌﾚｰﾑ高さ
上ﾍﾟｰｼﾞ　ﾀｰｹﾞｯﾄ
下ﾍﾟｰｼﾞ　ﾀｰｹﾞｯﾄ

　

　

　

説明文、削除可

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Language" content="ja">
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link REL="SHORTCUT ICON" href="../favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('../wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('../wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:14px;}
body,tr,td,form{ font-family:メイリオ,Lucida Sans Regular,MS PGothic; font-size: 12px;}

<base target="_blank">
<title>サンプルページ　　　トップナビバー 45fr</title>
<!--　☆ -----------　↓ この間をコピー＆ペーストします。 ------------　-->
<script type="text/javascript" language="JavaScript1.2" src="0044300.js"></script>
<script type="text/javascript" language="JavaScript1.2"><!--

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


//　　ﾒﾆｭｰﾊﾞｰ　　　　 　　幅 間隔　　　　　　罫線色　　
var hBar = new ItemStyle(100, 2, '', 0, 1, '#AEABCE', '#ACAACD', 'highText', 'highText',
'', '', null, null, 'hand', 'default');
//　　ｻｲﾄﾊﾞｰ　　　　　　高さ　間隔　　　　　罫線太さ　罫線色
var subM = new ItemStyle(22, -3, '&gt;', -15, 1, '#AEABCE', '#ACAACD', 'lowText', 'highText',
'itemBorder', 'itemBorder', null, null, 'hand', 'default');

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

// 左余白 上余白 高さ
startMenu('root', false, 1, 1, 17, hBar, 'navmenu', false);
addItem('&nbsp;　ﾒﾆｭｰ　1', 'xxxx1', 'sm:');
addItem('&nbsp;　ﾒﾆｭｰ　2', 'xxxx2', 'sm:');
addItem('&nbsp;　ﾒﾆｭｰ　3', 'xxxx3', 'sm:');
addItem('&nbsp;　ﾒﾆｭｰ　4', 'xxxx4', 'sm:');
addItem('　　< 復旧　', 'top_navbar45m.htm', 'content');

// 左余白 上余白 幅
startMenu('xxxx1', true, 0, 'content.page.scrollY()+0', 100, subM, 'content', false);
// *** Opens a file in the frame named 'content' in this current frameset.
addItem('　ｻｲﾄ　11　　>', 'xxxx11', 'sm:');
addItem('　ｻｲﾄ　12　　>', 'xxxx12', 'sm:');
// *** Opens a file that replaces the whole frameset, pass '' as the third parameter.
addItem('　ｻｲﾄ　13', 'http://www./……/xxx.html', 'content');

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

};

//--></script>
<!--　☆ -----------　↑ この間をコピー＆ペーストします。 ------------　-->

</head>

<!-- The frameset itself. Add other frames in here if you want. -->
<frameset rows="18,*" framespacing="1" border="0" frameborder="0">
<frame name="navmenu" src="top_navbar45h.htm" target="content" scrolling="auto"></frame>
<frame name="content" src="top_navbar45m.htm" target="_self" scrolling="auto"></frame>
<noframes>
<body>
<p>ここに、サイト=ページの紹介文などを記述します。　検索エンジンの、”サマリー”に表示されたりします。　検索キーワードも抽出されます。</p>
</body>
</noframes>
</frameset>

<!--　★　以下は説明です、削除しても動作に関係ありまへんわ。　カスタマイズ・編集は、それぞれ下記に該当する　<frameset　部分でなもし。　-->
【タイトル】
<title>上下(中)　フレーム</title>　　 　←　タイトルバーやタスクバー、お気に入りに表示される文字。　下(中)=下に”naka.htm”を表示。　

【枠線】　
frameborder="0"　　1=枠幅　
framespacing="1" 　0 =境界線を掴めなくなります。

【スクロールバー】
scrolling="auto" no =スクロールバー非表示　

【フレームサイズ】
frameset rows="80,*"　　←　Winを横2行に分割。　上フレームの高さ=80pixels固定、下フレームサイズ=*は自動変化。
rows="80,*"　　　　 フレーム行高さ、ピクセル（Winサイズ変化に非変化、解像度で変化）
rows="30％,*"　　 　フレーム行高さ、Winサイズ比（Winサイズ変化で変化）
cols="170,*"　　　　フレーム列幅、ピクセル（Winサイズ変化に非変化、解像度で変化）　　
cols="30％,*"　　 　フレーム列幅、Winサイズ比（Winサイズ変化で変化）
scrolling="auto" noresize>　　固定は、noresize を追加。

【表示先】
target="naka"　　　←　frame name="　　"　部分で宣言済みの"　　　"がリンク先(ターゲット)。
<frame name="ue" src="ue.htm" target="naka">　　←　上フレームにデフォルト表示のue.htm中のリンク先(ターゲット)は、中フレーム。
<frame name="naka" src="naka.htm" target="_self">　　←　中フレームにデフォルト表示のnaka.htm中のリンク先(ターゲット)は、自身。

【初期・デフォルトでフレームに表示するページのファイル名】
src="ue.htm"　　　←　URLでも可。
src="naka.htm"

【詳細・関連情報】
../frame_sample1/setumeisyo.htm
<!--　★　以上、説明文。　-->

</html>

　

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

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

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

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

<style type 〜 </style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景

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

　

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

ｽﾀｲﾙｼｰﾄ

　

　

JavaScript

任意HTML

画像　〃ｻｲｽﾞ

 　

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

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('../wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('../wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {font-size:12px; line-height:14px;}
body,tr,td,form{ font-family:メイリオ,Lucida Sans Regular,MS PGothic; font-size: 12px;}
 --></style>

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

<!--　☆ -----------　↓ この間をコピー＆ペーストします。 ------------　-->
<link rel="stylesheet" type="text/css" href="0044300.css" />
<!--　☆ -----------　↑ この間をコピー＆ペーストします。 ------------　-->

</head>
<body>

<!--　★　-----------　↓ この間をコピー＆ペーストします。 ------------　-->
<script type="text/javascript" language="JavaScript1.2" src="0044301.js"></script>
<!--　★　-----------　↑ この間をコピー＆ペーストします。 ------------　-->

<p>　……　navbar45m1.htm</a>（下ﾌﾚｰﾑﾍﾟｰｼﾞ1）</font></p>

<p><img border="0" src="http://www./……/xxx.jpg" width="600" height="400"></p>

</body>