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

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

縦長配置階層ﾒﾆｭｰ、展開したﾒﾆｭｰは固定ｽﾍﾟｰｽ内に表示。　　　　　　DjQuery、HTML。　　　　　　ﾊｲﾊﾟｰﾘﾝｸ、配色などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、ﾒﾆｭｰ展開、ﾊｲﾊﾟｰﾘﾝｸをｸﾘｯｸなどで。

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、hr_menu34/をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、hr_menu34.htm、011077010.js、011077010.css　を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。

　・　このDHTMLの実装方法は、hr_menu34.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 10.x～などで開いて。　　　　更新の確認は、[F5]ｷｰを押し、最新ﾃﾞｰﾀ読み込み、で。　　　　あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ﾂｰﾙ] - [ｲﾝﾀｰﾈｯﾄｵﾌﾟｼｮﾝ] - [閲覧の履歴] - [削除] などでも。

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

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

　HTMLの編集方法　

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

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

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

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

ﾘﾝｸを新しいWinで開くを標準（削除可）※：target=　いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent

お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）

jQuery

<title>サンプルページ　　階層メニュー34</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="011077010.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="011077010.js">
/***********************************************
* Mobile Power List Menu (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more..
***********************************************/
</script>

<script type="text/javascript">
var powerinstance
jQuery(function($){ // on DOM load
powerinstance = new Powerlistmenu({
menuid: 'powermenu1' // id of main nav container
})
})

</script>

</head>

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

　HTMLの編集方法　

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

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

URL　ｻｲﾄ名

吹き出し

以下、同様。

<body>

<nav id="powermenu1" class="powerlistmenu">
<ul>
<li><a href="http://www　……　index2.html">太陽風ДζΨΠ∀</a></li>
<li><a href="http://www　……　oritatami3c.html">JavaScript DHTML XML CSS応用</a></li>
<li><a href="http://www　……　oritatami3c.html">JavaScript DHTML XML CSS</a>
<ul>
<li><a href="http://　……　slideshow21s.htm" target="_blank" title="Flash、XML、ｱｳﾄﾙｯｸ風の表示、ﾌｪｲﾄﾞ効果。">ｽﾗｲﾄﾞｼｮｰ21</a></li>
<li><a href="http://　……　slideshow34.htm" target="_blank" title="雪崩れ効果、自律/ﾎﾞﾀﾝ制御、ﾏｳｽｵｰﾊﾞｰでｺﾒﾝﾄ表示、ｸﾘｯｸでﾍﾟｰｼﾞを開く。ﾞ">ｽﾗｲﾄﾞｼｮｰ34</a></li>

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

<li><a href="http://www　……　tab_menu9.htm" target="_blank" title="IFRAME表示ﾍﾟｰｼﾞのﾀﾌﾞ選択。　選択痕跡付き。">ﾀﾌﾞﾒﾆｭｰ9</a></li>
<li><a href="http://www　……　oritatami_vb.htm" target="_blank" title="MenuBehaviors、展開/折り畳み。ﾀｰｹﾞｯﾄﾍﾟｰｼﾞを右に、vb版">折り畳みﾒﾆｭｰ</a></li>
</ul>
</li>
<li><a href="http://www　……　oritatami3c.html">World Media</a>
<ul>
<li><a href="http://www.apple.com/" target="_blank" title="ﾒｯｾｰｼﾞ">Apple</a></li>
<li><a href="http://entertainment.msn.com/" target="_blank" title="Celebrity gossip, news, photos and more">MSN Entertainment</a></li>
<li><a href="http://www.sternsmusic.com/index.php?" target="_blank" title="ﾒｯｾｰｼﾞ">Afro Pop</a></li>

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

<li><a href="http://www.nasa.gov" target="_blank" title="">NASA</a></li>
<li><a href="http://edition.cnn.com/" target="_blank">CNN</a></li>
</ul>
</li>
<li><a href="http://www　……　oritatami3c.html">ｻｲﾄ 3</a></li>
<li><a href="http://www　……　oritatami3c.html">ｻｲﾄ 4</a>
<ul>
<li><a href="http://www　……　oritatami3c.html">ｻｲﾄ 4.1</a></li>
<li><a href="http://www　……　oritatami3c.html">ｻｲﾄ 4.2</a>
<ul>
<li><a href="http://www　……　oritatami3c.html">ｻｲﾄ 4.2.1</a></li>
<li><a href="http://www　……　oritatami3c.html">ｻｲﾄ 4.2.2</a></li>
<li><a href="http://www　……　oritatami3c.html">ｻｲﾄ 4.2.3</a>
<ul>
<li><a href="http://lacasamia2.exblog.jp/" target="_blank">フィレンツェ田舎生活便り２</a></li>
<li><a href="http://wanderphoto.com/blog/" target="_blank" title="新しいWinで開きます。">ﾕｷﾉﾋﾉｼﾏｳﾏ</a></li>

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

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

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

　*.css の編集方法　

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

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

ﾒﾆｭｰ幅
ﾒﾆｭｰ縦

枠色

ｻﾌﾞﾀｲﾄﾙ背景色

枠色

ﾊｲﾊﾟｰﾘﾝｸ縦余白

ﾏｳｽｵｰﾊﾞｰ背景色

nav.powerlistmenu{
position: relative;
width: 230px; /* width of menu. Percentage value accepted */
height: 270px; /* height of menu */
overflow: hidden;
border: 1px solid darkred;
border-left: 10px solid darkred;
}

nav.powerlistmenu div.loadingscreen{ /* DIV that temporarily covers menu while Ajax content being fetched */
position: absolute;
z-index: 1001;
width: 100%;
height: 100%;
background: black;
color: white;
font-weight: bold;
opacity: 0.7;
text-align: center;
vertical-align: middle;
}

nav.powerlistmenu div.loadingscreen > *{ /* center any text/ image inside this DIV */
position: relative;
top: 50%;
transform: translateY(-50%);
}

nav.powerlistmenu div.drawer{ /* DIV that surrounds each UL after being flattened */
position: absolute;
width: 100%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
overflow-y: auto; /* set y overflow to scroll if needed */
left: 0;
top: 0;
background: white;
font-weight: bold;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

nav.powerlistmenu div.drawer.submenu{ /* Targets all but top level UL menu */

}

nav.powerlistmenu div.drawer div.breadcrumb{ /* Breadcrumb DIV that gets added to top of each sub level UL menu */
position: relative;
padding: 10px;
border-bottom: 1px solid gray;
background: lightyellow;
font-weight: bold;
cursor: pointer;
}

nav.powerlistmenu div.drawer div.breadcrumb span.left{ /* SPAN inside breadcrumb containing "left" arrow markup */
margin-right: 5px;
font-weight: bold;
font-size: 1.5em;
color: darkred;
}

nav div.drawer ul{
margin: 0;
padding: 0;
list-style: none;
}

nav.powerlistmenu div.drawer ul li{

}

nav.powerlistmenu div.drawer ul li a{
text-decoration: none;
display: block;
padding: 5px;
color: black;
border-bottom: 1px solid #eee;
}

nav.powerlistmenu div.drawer ul li a:hover{
background: #ffe896;
}

nav.powerlistmenu div.drawer ul li a span.right{ /* SPAN inside LI headers containing "right" arrow markup */
position: absolute;
right: 8px;
font-weight: bold;
font-size: 1.1em;
}

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

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