以下、自由コンテンツ(HTML)を記述。  テキスト(例)。  ---------------------------------------------------------------- ----------------------------------------------------------------  ---------------------------------------------------------------- ----------------------------------------------------------------  ----------------------------------------------------------------

 

 

 

 

ホーム へ       サンプルページ  トップナビバー 14v topnavibar14v.htm

Windows2000のサイト風、トップナビバー(階層メニュー)。   縦型。        フェード効果(残像)や痕跡色配色カスタマイズ可。    DHTML。     カスタマイズはテキストエディターなどで可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ。  

 

< ご使用方法 >

・ ローカル(=PC)への保存は、topnavibar14v.htm(DHTML実装ファイル)、88550v.js(ハイパーリンク・トップナビバーの記述ファイル)、88551.js(JavaScriptソースファイル)、arrow.gifを右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、topnavibar14v.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、88550v.js を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。    更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.jsなども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

(*1) : topnavibar14v.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<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:13px;
}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  トップナビバー 14</title>

<SCRIPT>/*

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

*/</SCRIPT>

<SCRIPT language=JavaScript src="88550v.js" type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript src="88551.js" type=text/javascript></SCRIPT>

 

(*2) 88550v.js(例)        トップナビバー ・ハイパーリンクメニュー の記述ファイル。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTML太字部分を編集し使用。
〔この列ペースト不要〕

 

 

 

 

次層メニュー配置オフセット

フェード効果

配色 ※: 色記号2

 

Winの”ターゲット”

メニューの”サイズ変更”、”スクロールバー”、”ツールバー”、”ロケーション”、”ステイタスバー”、”メニューバー”のカスタマイズ 、無し=no0 (ゼロ)

 

配色 ※: 色記号2

 

 

 

 

 

フォント

 

 

 

 

 

痕跡色

 

 

 

 

 

 

 

メニュー位置・座標

トップバーセルサイズ

配置

 

 

 

 

 

 

 

トップバー:縦=無し  横=1 

 

 

メニューセル名・サイト名 メニューID

罫線あり=1、なし=0

最後は、 , が無いのサ

 

 

メニューID サイズ 配置

 

ハイパーリンク

リンクメニュー数の加減は、”サイト … ”の行の追加、削除で。

以下、説明の太字記述の省略あり。

ステイタスバーに表示するテキスト

最後は、 , が無いのサ

 

timegap=50

followspeed=20

followrate=20

suboffset_top=5;

suboffset_left=0;

effect = "fade(duration=0.3);Shadow(color='#777777', Direction=135, Strength=5)"

function openwin(url)

{

nwin=window.open(url, "nwin",config="scrollbars=yes,resizable=yes,toolbar=yes,location=yes,status=yes,menubar=yes,");

nwin.focus();

}

prop1=[ // prop1

"1B002F", // Off Font Color

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

"F0ECED", // Off Back Color

"5B0009", // On Font Color

"DDDAE8", // On Back Color

"999999", // Border Color

12, // Font Size

"normal", // Font Style

"normal", // Font Weight

"MSP Gothic,MS Gothic,",      // Font……

3, // Padding

"arrow.gif",     // Sub Menu Image……

0, // 3D Border & Separator……

"66ffff", // 3D High Color……

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

"000099", // 3D Low Color

"000099", // Refe……

"C3ACEA", // Re……

]

menu1=[ // This is ……

10, // Top

10, // left

140, // Width

1, // Border Width

"left",      // Screen Position - here you can use "center;middle;right"

prop1,     // Properties Array - this is set higher up, as above

1, // Always Visible - allows the menu item to be visible at all time

"center",     

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

" サイト1","show-menu2",,"#",1, // "Description Text", "URL", "Alternate URL", "Status", "Separator Bar"

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

]

menu2=[,,140,1,"",prop1,,"left",effect,,,,,,,

"サイト11","show-menu7",,,1,

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

"NHK-FM番組","http://www.nhk.or.jp/hensei/fm/",,,1

]

menu7=[,,160,1,"",prop1,,"left",effect,,,,,,,

"サイト111","show-menu10",,,1,

"サイト112","show-menu11",,,1,

"常駐コンテンツ 6","http://www…….htm#(*2)",,"スクロールを無視した(流されぬ)、……の項へ往きますわ。",1,

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

"サイト59","http://www.xxxx.xx.jp/xxxxx/xxxxx.html",,,1

]

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

・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。