ホーム へ       サンプルページ  トップナビバー 7a  top_navi_bar7a.htm

マウスオーバーで展開の、トップナビバー。      DHTML。      メニュー構成・スタイル・配色、ハイパーリンクなどのカスタマイズはテキストエディターなどで可。    all対応。     コピー、編集し、簡単にWebで応用できまっ。

< ご使用方法 >

 ・ ローカル(=PC)への保存は、top_navi_bar7a.htmcustom7a.jsmenu_ie.jsmenu_ns4.jsmenu_ns6.jsmenu_op5.jsmenu7a.jssniffer.jsstyle7a.js を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

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

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

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

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

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

 

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

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

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

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

<style type 〜 </style>は(削除可)
ハイパーリンク文字色 背景色 下線
表示済みの〃
マウスオーバー時の〃
クリック中の〃

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

 

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

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

<style type="text/css"><!--
a:link { color:#55006C; background-color:#FAFAFC; text-decoration:none; }
a:visited { color:#3E0010; background-color:#F3F2F4; text-decoration:none; }
a:hover { color:#8000e2; background-color:#E8E5E9; text-decoration:underline; }
a:active { color:#E700A4; background-color:#E1DDE9; text-decoration:underline; }
-->
</style>

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

<!-- ☆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<script language="javascript" src="sniffer.js">

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

</script>
<script language="javascript1.2" src="custom7a.js"></script>
<script language="javascript1.2" src="style7a.js"></script>
<!-- ☆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

 

(*2) top_navi_bar7a.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

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

※:<body> 部の編集 背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

<.body> 部の末尾に記述。 

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

自由のHTML 

<!-- ★ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<script language="javascript1.2" src="menu7a.js"></script>
<!-- ★ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->

 

(*3) custom7a.js (例)       メニュー構造・スタイル・配色、ハイパーリンクの設定用ファイル。 テキストエディターで編集します。

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

配置

 

メニューバー背景色

メニューバーマウスオーバー背景色

※:色記号の獲得は、2で。

枠線サイズ

メニュー枠線色

メニューリンク色

メニューマウスオーバー色

メニュー下線無し

フォント

フォントサイズ

フォントスタイル

インデント

余白

オフセット

 

リンク縦位置

リンク横位置

リンク背景色

リンクマウスオーバー色

枠線サイズ

枠線色

リンク色

マウスオーバー色

リンク下線無し

フォント

フォントサイズ

フォントスタイル

インデント

余白

オフセット

シャドウ

シャドウ色

透明化

 

 

リンク、URL メニュー名  トップメニューサイズ 配置

 

リンクメニューサイズ 配置

 

URL サイト名 ターゲット

_topページ全体

_blank新しいWin

_parent親フレーム

_self同じフレーム

mainフレーム名〔<frameset に記述した <frame name=〕

以下、同様にメニュー、リンクの追加、削除を。

 

// *** POSITIONING AND STYLES *********************************************

var menuALIGN = "left"; // alignment

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

var mCOLOR = "#E0E0E0"; // main nav cell color

var rCOLOR = "#FBF8F0"; // main nav cell rollover color

var keepLIT = true; // keep rollover color when browsing menu

var bSIZE = 1; // main nav border size

var bCOLOR = "#3F0075" // main nav border color

var aLINK = "#650007"; // main nav link color

var aHOVER = "#8F0108"; // main nav link hover-color (not ns4)

var aDEC = "none"; // main nav link decoration

var fFONT = "MSP Gothic,MS Gothic"; // main nav font face

var fSIZE = 12; // main nav font size (pixels)

var fWEIGHT = "normal" // main nav font weight

var tINDENT = 7; // main nav text indent (if text is left or right aligned)

var vPADDING = 5; // main nav vertical cell padding

var vtOFFSET = 0; // main nav vertical text offset (+/- pixels from middle)

 

var vOFFSET = 1; // shift the submenus vertically

var hOFFSET = 0; // shift the submenus horizontally

var smCOLOR = "#EBEBEB"; // submenu cell color

var srCOLOR = "#FFFFFF"; // submenu cell rollover color

var sbSIZE = ; // submenu border size

var sbCOLOR = "#3F0075"; // submenu border color

var saLINK = "#23003B"; // submenu link color

var saHOVER = "#5D019E"; // submenu link hover-color (not ns4)

var saDEC = "none"; // submenu link decoration

var sfFONT = "MSP Gothic,MS Gothic";// submenu font face

var sfSIZE = 12; // submenu font size (pixels)

var sfWEIGHT = "normal" // submenu font weight

var stINDENT = 9; // submenu text indent (if text is left or right aligned)

var svPADDING = 2; // submenu vertical cell padding

var svtOFFSET = 0; // submenu vertical text offset (+/- pixels from middle)

var shSIZE = 2; // submenu drop shadow size

var shCOLOR = "#cccccc"; // submenu drop shadow color

var shOPACITY = 45; // submenu drop shadow opacity (not ns4 or Opera 5)

//** LINKS ***********************************************************

// add main link item ("url","Link name",width,"text-alignment","target")

addMainItem("http://www./……/xxx.html","メニュー 1",100,"center","");

// define submenu properties (width,"align to edge","text-alignment")

defineSubmenuProperties(140,"left","left");

// add submenu link items ("url","Link name","target")

addSubmenuItem("httpindex2.html","太陽風ДζΨΠ∀","_top");

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

addSubmenuItem("http://www.apple.com/quicktime/hotpicks/","QuickTime - Hot Picks","_blank");

addSubmenuItem("#編集","編集方法","_self");

addSubmenuItem("http://www./……/xxx.html","WebSite18","");

addSubmenuItem("http://www./……/xxx.html","WebSite19","");

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

addSubmenuItem("http://www./……/xxx.html","WebSite59","_blank");

//********************************************************************

 

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

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