ﾎｰﾑ へ ｻﾝﾌﾟﾙﾍﾟｰｼﾞ ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ 8 top_navi_bar8.htm
ﾏｳｽｵｰﾊﾞｰで展開する、ﾄｯﾌﾟﾅﾋﾞﾊﾞｰです。 DHTML。 ﾒﾆｭｰの配色・ｻｲｽﾞ、ｻﾌﾞﾒﾆｭｰ構造、ﾊｲﾊﾟｰﾘﾝｸなど設定可。 Internet Explorer4.x〜 対応。 ｺﾋﾟｰ、編集し、簡単にWebで応用可。
< ご使用方法 >
・ ﾛｰｶﾙ（=PC）への保存は、top_navi_bar8.htm を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。 ※: 【Internet Explorer】 - [ﾌｧｲﾙ] - [名前を付けて保存]−[ﾌｧｲﾙの種類] ”Webﾍﾟｰｼﾞ、完全” ……、などで変わってしまったﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。
・ このDHTMLの実装方法は、top_navi_bar8.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 4.x〜 などで開いて。 更新の確認は、ieやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieでＦ５ｷｰを押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。
･ ｱｯﾌﾟﾛｰﾄﾞや作動ﾃｽﾄは、hogehoge.html と同じ階層〔ﾎﾙﾀﾞｰ/ﾃﾞｨﾚｸﾄﾘｰ〕に、使用する画像なども転送/配置し実施。 ※：別ﾃﾞｨﾚｸﾄﾘｰに配置時は、*.html 中のﾊﾟｽは要修正。 FTPなどで変わったﾌｧｲﾙ名は要修正。 ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。
･ 関連情報 ： 色記号6、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。 Web& Internet Samples、Web Development、XML、DHTMLとは？、ColorTable、HTMLの色指定、色見本。
(*1) ： top_navi_bar8.htm （例） 挿入先の <head> 〜 </head> の、〜 部分にﾍﾟｰｽﾄします。
| HTMLの編集方法 | (*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、編集し使用。 |
| 〔この列ﾍﾟｰｽﾄ不要〕
ｼﾌﾄJIS使用（削除不可） ｉｅなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可） <style type 〜 </style>は（削除可） ﾏｳｽｵｰﾊﾞｰ時のﾃｷｽﾄ 背景 下線非表示
非ﾏｳｽｵｰﾊﾞｰ時の下線表示（逆も可） ※：詳細などは、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ で。
ﾘﾝｸを新しいWinで開くを標準（Win全体は ="_top"で）、（削除可） お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）
※：この間、説明を省略
ﾒﾆｭｰのﾃｷｽﾄ装飾（下線など無し） ﾃｷｽﾄ色 ﾌｫﾝﾄｻｲｽﾞ ﾌｫﾝﾄ ※：色作成・記号獲得 |
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> <link REL="SHORTCUT ICON" href="faviconj.ico"> <style type="text/css"><!-- A:hover { COLOR: #8000e2; BACKGROUND-COLOR: #f3edee; TEXT-DECORATION: none } A { TEXT-DECORATION: underline } --> </style> <base target="_blank"> <title>サンプルページ トップナビバー 8</title> <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Angus Turnbull Web Site: http://gusnz.cjb.net This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com --> <!-- Begin var isDOM = false, isNS4 = false; if (document.all) var isDOM = true, docObj = 'document.all.', styObj = '.style'; else if (document.layers) var isNS4 = true, docObj = 'document.', styObj = ''; ===== この間、説明を省略 ===== // Write this menu to the document. if (showMenu) document.write(menuHTML + endDL); litNow[currMenu] = null; } } // End --> </script> <style> <!-- .Item { text-decoration: none; color: #CEBEC0; font: 12px MSP Gothic,MS Gothic, Arial, Helvetica } --> </style> |
(*2) ： top_navi_bar8.htm （例） 挿入先の <body> 〜 </body> の、〜 部分にﾍﾟｰｽﾄします。
| HTMLの編集方法 | (*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、編集し使用。 |
| 〔この列ﾍﾟｰｽﾄ不要〕
背景 ﾘﾝｸ 表示済みﾘﾝｸﾝｸ ｱｸﾃｨﾌﾞﾘﾝｸの各色（任意値） ※： 色記号、2
ﾒﾆｭｰ ﾒﾆｭｰ連番 ﾒﾆｭｰｻｲｽﾞ（ 以下同様）
ﾄｯﾌﾟﾒﾆｭｰ文字 ﾒﾆｭｰの加減は、”menu[0][3”の連番部分などで、以下同様。
ｻｲﾄ(ｻﾌﾞﾒﾆｭｰ) ｻｲﾄ連番 ﾒﾆｭｰ幅 高さ （以下同様）
ｻｲﾄ名 URL 分岐番号 （以下同様） ﾒﾆｭｰ数の加減は、”menu[n][n]”の行部分で、以下同様。
ﾒﾆｭｰ幅 高さ （以下同様）
配置 ﾒﾆｭｰ 幅 高さ ﾄｯﾌﾟﾒﾆｭｰ |
<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF"> <p> </p> <script LANGUAGE="JavaScript"> <!-- Original: Angus Turnbull Web Site: http://gusnz.cjb.net This script and many more are available free online at The JavaScript Source!! http://javascript.internet.com --> <!-- Begin /* Syntaxes: ===== この間、説明を省略 ===== // Default colours passed to most menu constructors (just passed to functions, not // a global variable - makes things easier to change later). var defOver = '#8D8A9B', defBack = '#614484', defBorder = '#000000'; // Default height of menu items - the spacing to the next item, actually. var defHeight = 22; // Menu 0 is the special, 'root' menu from which everything else arises. menu[0] = new Array(); // Pass a few different colours, as an example. menu[0][0] = new Menu('TopMenu', 0, 0, 100, '#8D8A9B', '#82809B', defBorder); // Notice how the targets are all set to nonzero values... menu[0][1] = new Item('ﾒﾆｭｰ 1', '#', defHeight, 1); menu[0][2] = new Item('ﾒﾆｭｰ 2', '#', defHeight, 2); menu[0][3] = new Item('ﾒﾆｭｰ 3', '#', defHeight, 3); menu[0][4] = new Item('ﾒﾆｭｰ 4', '#', defHeight, 4); menu[0][5] = new Item('ﾒﾆｭｰ 5', '#', defHeight, 5); menu[1] = new Array(); // The File menu is positioned 0px across and 22 down from its trigger, and is 80 wide. menu[1][0] = new Menu('Menu1', 0, 18, 140, defOver, defBack, defBorder); // Non-zero target means this will trigger a popup. menu[1][1] = new Item('11 太陽風 Home', 'index2.html#', defHeight, 6); menu[1][2] = new Item('12 Google', 'http://www.google.com/intl/ja/#', defHeight, 0); menu[1][3] = new Item('ｻｲﾄ 13', 'http://www./……/xxx.html#', defHeight, 0); menu[1][4] = new Item('ｻｲﾄ 14', 'http://www./……/xxx.html#', defHeight, 0); menu[1][5] = new Item('ｻｲﾄ 15', 'http://www./……/xxx.html#', defHeight, 0); menu[1][6] = new Item('ｻｲﾄ 16', 'http://www./……/xxx.html#', defHeight, 0); menu[2] = new Array(); menu[2][0] = new Menu('Menu2', 0, 18, 140, defOver, defBack, defBorder); menu[2][1] = new Item('ｻｲﾄ 21', 'http://www./……/xxx.html#', defHeight, 7); menu[2][2] = new Item('ｻｲﾄ 22', 'http://www./……/xxx.html#', defHeight, 0); ==== この間､説明を省略｡ ==== menu[6] = new Array(); // This is across but not down... a horizontal popout (with crazy colours :)... menu[6][0] = new Menu('MenuEx11', 140, 0, 160, '#8D8A9B', '#44314E', '#44314E'); menu[6][1] = new Item('111 ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ14<br>(^ ^) =( ﾟ 。ﾟ )= …*', 'fr-14.htm', 35, 0); menu[6][2] = new Item('112 折り畳みﾒﾆｭｰ<br> =(^。^)= ＼^o^／ 〜*', 'oritatami_vb.htm', 35, 0); menu[6][3] = new Item('113 ﾅﾋﾞﾊﾞｰ<br>=(・。.・)= ♪┌|∵|┘♪', 'navi_bar.htm', 35, 0); menu[6][4] = new Item('114 ﾀﾌﾞﾒﾆｭｰ5<br>（・!・）〔｀。´ 〕〜*', 'tab_menu5.htm', 35, 0); menu[7] = new Array(); // Leftwards popout with a negative x relative to its trigger. menu[7][0] = new Menu('MenuEx21', 140, 0, 160, '#8D8A9B', '#44314E', '#44314E'); menu[7][1] = new Item('ｻｲﾄ 211<br> (*^.^*) ＼^o^／ …*', 'http://www./……/xxx.html#', 35, 0); ==== この間､説明を省略｡ ==== else rM.top = 0; } // End --> </script> |
< 補足 > 適時参照あれ！。