サンプルページ　　　階層メニュー 21

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　階層ﾒﾆｭｰ 21　　hr_menu21.htm

階層ﾒﾆｭｰ、縦長、背景画像。　　　　　　DHTML。　　　　　　背景画像、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

< ご使用方法 >

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

　・　このDHTMLの実装方法は、hr_menu21.htm をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、ﾎｰﾑﾍﾟｰｼﾞ作成ｿﾌﾄなどのHTML挿入/編集ﾒﾆｭｰなどを使って、新しいﾍﾟｰｼﾞ 1 や hogehoge.html（=任意の挿入先ﾌｧｲﾙ名）の、 <head>　～　</head> の任意の行間に (*1) を、さらに <body>　～　</body>の任意の行間に (*2) をﾍﾟｰｽﾄします。

　･　編集方法は、hogehoge.html を WordPad や SmipleTextなどのﾃｷｽﾄｴﾃﾞｨﾀｰ、あるいは ”FrontPage Express” などのﾎｰﾑﾍﾟｰｼﾞ制作ｿﾌﾄのHTMLﾀｸﾞ挿入/編集ﾒﾆｭｰで開き編集します。　　　　下記の（例） (*1) と、(*2)、(*3) を参考に太字部分の編集を任意に行います。　　　ｱｲｺﾝ画像などの変更は準備した画像ﾌｧｲﾙ名を、hogehoge.html などの該当部分に記述。　　ﾊﾟﾗﾒｰﾀｰの変更は該当部分で。　　　　※: ﾃｷｽﾄｴﾃﾞｨﾀｰによる編集は、HP制作ｿﾌﾄとの互換性の問題を生じません（HP制作ｿﾌﾄ間は少し生じる）。

　・　作動ﾃｽﾄは、ﾛｰｶﾙ（PC）に保存し、 Internet Explorer 6.x～などで開いて。　　　　更新の確認は、ie、Netscapeやｻｰﾊﾞｰからのｷｬｯｼｭﾃﾞｰﾀｰ更新を、目的のﾍﾟｰｼﾞを表示し ieで [F5]ｷｰを押し最新ﾃﾞｰﾀ読み込みで行います（≠再ｱｸｾｽ）。　　　Netscapeは、Ctrl+Ｒｷｰで。

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

　･　関連情報：色記号、2、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門が便利！。　　　Web & Internet Samples、Online Columns、XML、DHTMLとは？、ColorTable、HTMLの色指定、色見本。

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

　HTMLの編集方法　

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

〔この列ﾍﾟｰｽﾄ不要〕

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

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

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

ﾒｲﾝﾒﾆｭｰ

ﾒｲﾝﾒﾆｭｰﾊｲﾊﾟｰﾘﾝｸ

ﾒｲﾝﾒﾆｭｰ　ﾏｳｽｵｰﾊﾞｰ時

ｻﾌﾞﾒﾆｭｰ

ｻﾌﾞﾒﾆｭｰ　ﾊｲﾊﾟｰﾘﾝｸ

ｻﾌﾞﾒﾆｭｰ　ﾏｳｽｵｰﾊﾞｰ時

<base target="_blank">
<title>サンプルページ　　階層メニュー 21</title>

<style type="text/css">
#dhtmlgoodies_menu{
font-family:Verdana;　　 /* Font for main menu items */
width:130px; 　　　　　　　/* Width of main menu */
}

#dhtmlgoodies_menu li{ /* Main menu <li> */
list-style-type:none; /* No bullets */
margin:0px;　　　　　　　 /* No margin - needed for Opera */
}

#dhtmlgoodies_menu ul{
margin:0px; 　　　　　　　/* No <ul> air */
padding:0px; 　　　　　　　/* No <ul> air */
}

#dhtmlgoodies_menu ul li ul{　/* Styling for those who doesn't have javascript enabled */
padding-left:10px;
}

#dhtmlgoodies_menu li a{ 　/* Main menu links */
text-decoration:none; 　/* No underline */
color:#000000; 　　　　/* Black text color */
height:16px;
line-height:16px;
vertical-align:middle; 　/* Align text in the middle */
border:1px solid #C6C4D3; 　/* Black border */
background: #F8F5F5 url('http://www.pat.hi-ho.ne.jp/oka_tosho/wttec.gif');
margin:1px; 　　　　　　　　/* A little bit of air */
padding:1px 5px 1px 5px; 　 /* 1px of "air" inside */
display:block;
}

#dhtmlgoodies_menu li a:hover,#dhtmlgoodies_menu .activeMainMenuItem{
color:#690287;
background: #F8F5F5 url('http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/tbwhb1.gif');
}

.dhtmlgoodies_subMenu{
background: #E0E0E5 url('');
cvisibility:hidden;
position:absolute;
overflow:hidden;
border:1px solid #C6C4D3;
font-family:Verdana;
text-align:left;
}

.dhtmlgoodies_subMenu ul{
margin:0px;
padding:0px;
width:150px;
}

.dhtmlgoodies_subMenu ul li{
list-style-type:none;
margin:0px;
padding:1px; 　　　　　　　　　　/* 1px of air between submenu border and sub menu item - (the "white" space you see on mouse over )*/
}

.dhtmlgoodies_subMenu ul li a{ /* Sub menu items */
white-space:nowrap; 　　　　　　　/* No line break */
text-decoration:none; 　　　 /* No underline */
background: #F8F5F5 url('http://www.pat.hi-ho.ne.jp/oka_tosho/wttec.gif');
color:#000000; 　　　　　　　/* Black text color */
height:16px; 　　　　　　　　　　 /* 16 pixels height */
line-height:16px; 　　　　　　　/* 16 pixels height */
padding:1px 5px 1px 5px; 　　　 /* 1px of "air" inside */
display:block; 　　　　　　　 /* Display as block - you shouldn't change this */
}

.dhtmlgoodies_subMenu ul li a:hover{　/* Sub menu items - mouse over effects */
color:#690287;
background: #F8F5F5 url('http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/tbwhb1.gif');
}
</style>
<script type="text/javascript" src="0017600.js"></script>

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

　HTMLの編集方法　

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

〔この列ﾍﾟｰｽﾄ不要〕

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

ｱｲｺﾝ（例）

UR　ﾀｰｹﾞｯﾄ
〔新しいWin : _blank、同じﾌﾚｰﾑ : _self、ﾍﾟｰｼﾞ全体 : _top、親ﾌﾚｰﾑ : _parent〕
　吹き出し　ﾒﾆｭｰ・ｻｲﾄ名名

以下、同様に、ﾒﾆｭｰ・ｻｲﾄ数、ﾊｲﾊﾟｰﾘﾝｸの加減・編集可。

<div id="mainContainer">
<div id="leftContainer">
<div id="dhtmlgoodies_menu">
<ul>
<li><a href="#"><img border="0" src="http://www.pat.hi-ho.ne.jp/oka_tosho/nav_closed.gif" title="吹き出し" width="16" height="16">　ﾒﾆｭｰ　　　1</a>
<ul>
<li><a href="http://www./……/xxx.html" target="_blank" title="ﾒｯｾｰｼﾞ">ｻｲﾄ　11</a></li>
<li><a href="http://www001.upp.so-net.ne.jp/oka/top9_frame.htm" target="_blank" title="Java Applet、IE、Win2000風のﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ + 上下ﾌﾚｰﾑ越え。">ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ 9 ﾌﾚｰﾑ</a></li>
<li><a href="http://www001.upp.so-net.ne.jp/oka/tree15fr.htm" target="_blank" title="Microsoft Windows Tree Control　〃。　3DRoundBlue、Greenｱｲｺﾝ + 左右ﾌﾚｰﾑ。">ﾂﾘｰﾒﾆｭｰ15fr</a></li>
<li><a href="http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/tab_menu12g1.htm" target="_blank" title="吹き出し">階層ﾒﾆｭｰ12g1</a></li>
<li><a href="http://www001.upp.so-net.ne.jp/oka/navi_bar.htm" target="_blank" title="DHTML、CSS、ﾏｳｽｵｰﾊﾞｰで縦横展開MSﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ風。">ﾅﾋﾞﾊﾞｰ</a></li>
<li><a href="http://www001.upp.so-net.ne.jp/oka/top_navbar28fr.htm" target="_blank" title="DHTML、MicrosoftのWebのﾌﾟﾙﾀﾞｳﾝﾒﾆｭｰ風。　横長 - 縦横展開、〃指定 + 上下ﾌﾚｰﾑ。">ﾄｯﾌﾟﾅﾋﾞﾊﾞｰ28fr</a></li>
<li><a href="http://www001.upp.so-net.ne.jp/oka/oritatami3c1_fr.htm" target="_blank" title="折り畳み/展開表示 -txtｴﾃﾞｨﾀｰ編集版 + 左右ﾌﾚｰﾑ。">折り畳みﾘｽﾄ3c1fr</a></li>
<li><a href="http://www.pat.hi-ho.ne.jp/oka_tosho/message_sr9.htm" target="_blank" title="DHTML、ｷｯﾊﾟﾘ！〔｀。´ 〕、滲む自動ｽｸﾛｰﾙﾒｯｾｰｼﾞ。">ﾒｯｾｰｼﾞｽｸﾛｰﾙ9</a></li>
<li><a href="http://www001.upp.so-net.ne.jp/oka/sub_win2.htm" target="_blank" title="DHTML、Win複数、ｵﾌﾟｼｮﾝ一括、Winｻｲｽﾞ個別指定、ｽｸﾛｰﾙ位置保持。">ｻﾌﾞｳｨﾝﾄﾞｳ2</a></li>
<li><a href="http://www.pat.hi-ho.ne.jp/oka_tosho/slideshow_16a.htm" target="_blank" title="DHTML、画像のﾌｪｲﾄﾞｲﾝ・ｱｳﾄﾀｲﾏｰ切り替え。　　H540xV600。 ">ｽﾗｲﾄﾞｼｮｰ16a</a></li>
<li><a href="http://www001.upp.so-net.ne.jp/oka/calendar13.htm" target="_blank" title="DHTML、月刊ｶﾚﾝﾀﾞｰ。　祝日、ﾊｲﾊﾟｰﾘﾝｸ、詳細配色。">ｶﾚﾝﾀﾞｰ13</a></li>
<li><a href="http://www.pat.hi-ho.ne.jp/oka_tosho/database5/database5.htm" target="_blank" title="DHTML、ｿｰﾄﾃｰﾌﾞﾙ、ｾﾙの編集、列、行の追加・編集、CSV、XMLﾌｧｲﾙへの出力。">ﾃﾞｰﾀﾍﾞｰｽ 5</a></li>
</ul>
</li>
<li><a href="#"><img border="0" src="http://www.pat.hi-ho.ne.jp/oka_tosho/nav_closed.gif" title="吹き出し" width="16" height="16">　ﾒﾆｭｰ　　　2</a>
<ul>
<li><a href="http://www./……/xxx.html" target="_blank" title="ﾒｯｾｰｼﾞ">ｻｲﾄ　　　　　　21</a></li>

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

(*3) ：　0017600.js （例）　　　　　　　　　ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。　

　*.css、*.jsの編集方法　

(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。

〔この列ﾍﾟｰｽﾄ不要〕

速度

右展開

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

************************************************************************************************************/
var timeBeforeAutoHide = 30; // Microseconds to wait before auto hiding menu(1000 = 1 second)
var slideSpeed_out = 300; // Steps to move sub menu at a time ( higher = faster)
var slideSpeed_in = 300;
var slideTimeout_out = 25; // Microseconds between slide steps ( lower = faster)
var slideTimeout_in = 10; // Microseconds between slide steps ( lower = faster)
var showSubOnMouseOver = true; // false = show sub menu on click, true = show sub menu on mouse over
var fixedSubMenuWidth = false; // Width of sub menu items - A number(width in pixels) or false when width should be dynamic
var xOffsetSubMenu = 0; // Offset x-position of sub menu items - use negative value if you want the sub menu to overlap main menu
var slideDirection = 'right'; // Slide to left or right ?
/* Don't change anything below here */
var activeSubMenuId = false;
var activeMainMenuItem = false;
var currentZIndex = 1000;

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

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

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