ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ 7b　　top_navi_bar7b.htm

ﾏｳｽｵｰﾊﾞｰで展開の、ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ、詳細ｶｽﾀﾏｲｽﾞ可。　　　　　　DHTML、Filters and Transitions効果実装。　　　　　　ﾒﾆｭｰ構成・ｽﾀｲﾙ・配色、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　IE4.x〜、NNr4.x〜、NS6.x〜、Opera5.x〜、OS:Win、Mac、Linux　対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ。

　

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、top_navi_bar7b.htm、custom7b.js、menu_ie4.js、menu_ie5.js、menu_moz.js、menu_ns4.js、menu_op5.js、menu_op6.js、menu7b.js、sniffer7b.js、style7b.js を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、top_navi_bar7b.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でＦ５ｷｰを押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。　　　Netscaperは、Ctrl+Ｒｷｰで。

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

　･　関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web Development、Web開発、MSDN IE8 HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、IE7、IE6、XML、DHTML。

　

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

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

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

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

<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>サンプルページ　　サンプルページ　　トップナビバー 7b</title>

<!-- ☆ ---------- ↓ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->
<!-- ULTIMATE DROPDOWN MENU v3.4.1 by Brothercake -->
<!-- http://www.brothercake.com/dropdown/ -->
<script type="text/javascript" language="javascript" src="sniffer7b.js"></script>
<script type="text/javascript" language="javascript1.2" src="custom7b.js"></script>
<script type="text/javascript" language="javascript1.2" src="style7b.js"></script>
<!-- ☆ ---------- ↑ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->

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

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

※：<body>　部の編集　背景　ﾘﾝｸ　表示済みﾘﾝｸﾝｸ　ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値）

　

<body>　末尾に記述

　

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

ここに、ﾒｲﾝHTMLを記述するｻ。 

<!-- ★2 ---------- ↓ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->
 <script type="text/javascript" language="javascript1.2" src="menu7b.js"></script>
<!-- ★2 ---------- ↑ この間をｺﾋﾟｰ､編集､ﾍﾟｰｽﾄします｡ ---------- -->
</body>
</html>  

　

(*3) ：　custom7b.js （例）　　　　　　　　ﾒﾆｭｰ構造・ｽﾀｲﾙ・配色、ﾊｲﾊﾟｰﾘﾝｸの設定用ﾌｧｲﾙ。　ﾃｷｽﾄｴﾃﾞｨﾀｰで編集します。

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

配置

　

ﾒﾆｭｰﾊﾞｰ背景色

ﾒﾆｭｰﾊﾞｰﾏｳｽｵｰﾊﾞｰ背景色

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

枠線ｻｲｽﾞ

ﾒﾆｭｰ枠線色

ﾒﾆｭｰﾘﾝｸ色

ﾒﾆｭｰﾏｳｽｵｰﾊﾞｰ色

ﾒﾆｭｰ下線無し

ﾌｫﾝﾄ

ﾌｫﾝﾄｻｲｽﾞ

ﾌｫﾝﾄｽﾀｲﾙ

ｲﾝﾃﾞﾝﾄ

余白

　

ｵﾌｾｯﾄ

　

ﾘﾝｸ縦位置

ﾘﾝｸ横位置

ﾘﾝｸ背景色

ﾘﾝｸﾏｳｽｵｰﾊﾞｰ色

枠線ｻｲｽﾞ

枠線色

ﾘﾝｸ色

ﾏｳｽｵｰﾊﾞｰ色

ﾘﾝｸ下線無し

ﾌｫﾝﾄ

ﾌｫﾝﾄｻｲｽﾞ

ﾌｫﾝﾄｽﾀｲﾙ

ｲﾝﾃﾞﾝﾄ

余白

ｵﾌｾｯﾄ

ｼｬﾄﾞｳ

ｼｬﾄﾞｳ色

透明化

ﾘﾝｸ、URL　ﾒﾆｭｰ名　　ﾄｯﾌﾟﾒﾆｭｰｻｲｽﾞ　配置

　

ﾘﾝｸﾒﾆｭｰｻｲｽﾞ　配置

　

URL　ｻｲﾄ名　ﾀｰｹﾞｯﾄ

_top：ﾍﾟｰｼﾞ全体

_blank：新しいWin

_parent：親ﾌﾚｰﾑ

_self：同じﾌﾚｰﾑ

main：ﾌﾚｰﾑ名〔<frameset に記述した　<frame name=〕

　

　

　

　

　

　

下層展開

　

幅　ｵﾌｾｯﾄ

　

以下、同様にﾒﾆｭｰ、ﾘﾝｸの追加、削除を。

　

Filters and Transitions

Barn、Blinds、Fade、Slide、GradientWipe、Wheel、Sprialなど。

 　

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

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 = "MS PGothic,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 keepLIT = true; // keep rollover color when browsing menu

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 = "MS PGothic,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)

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

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("index2.html","太陽風ДζΨΠ∀","_top");

addSubmenuItem("http://dictionary.goo.ne.jp/cgi-bin/ej-top.cgi","英和辞典 -EXCEED","_blank");

addSubmenuItem("http://windowsmedia.microsoft.com/mg/home.asp","WindowsMedia.com","_blank");

addSubmenuItem("http://www.microsoft.com/japan/windowsxp/","Microsoft -WindowsXP","_blank");

addSubmenuItem("http://www.google.com/intl/ja/","Goole 日本","_blank");

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","");

　

addMainItem("http://www./……/xxx.html","ﾒﾆｭｰ 2",100,"center","");

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

addSubmenuItem("","WebSite21 >","","");

// define child menu properties (width,"align to edge","text-alignment",v offset,h offset,"filter")

defineChildmenuProperties(140,"left","left",12,-5,"");

// add child menu link items ("url","Link name","_target","alt text")

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

addSubmenuItem("","WebSite22 >","","");

// define child menu properties (width,"align to edge","text-alignment",v offset,h offset,"filter")

defineChildmenuProperties(140,"left","left",-9,-5,"filter:progid:DXImageTransform.Microsoft.GradientWipe(duration=0.3,spokes=20)");

// add child menu link items ("url","Link name","_target","alt text")

addChildmenuItem("http://www./……/xxx.html","WebSite221","_blank");

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

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

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