サンプルページ　　　左メニュー 8

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　左ﾒﾆｭｰ 8　　left_menu8.htm

左端にﾌﾛｰﾃｨﾝｸﾞするｱｲｺﾝのｸﾘｯｸで、ﾌﾟｯｼｭﾒﾆｭｰを表示、ｱｲｺﾝは非画像。　　　　　　jQuery、DHTML。　　　　　　配置・ｻｲｽﾞ・配色・ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。　　　関連・詳細情報：font-awesome.css　New！icons　icons一覧

ﾃﾞﾓは、ｱｲｺﾝのｸﾘｯｸでﾒﾆｭｰを開き、ﾒﾆｭｰのﾊｲﾊﾟｰﾘﾝｸのｸﾘｯｸなどで。　　　　　このﾍﾟｰｼﾞへの復旧は、”Alt; + ←”ｷｰや、”戻る” ｱｲｺﾝで。　　　　（×） のｸﾘｯｸや、このﾍﾟｰｼﾞのｸﾘｯｸでﾒﾆｭｰを閉じます。

< ご使用方法 >

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

　・　このDHTMLの実装方法は、left_menu8.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) ：　left_menu8.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

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

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

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

互換表示

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

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

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

font-awesome.

jQuery

<title>サンプルページ　　左メニュー 8</title>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Rosario:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="006357711.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="006357711.js">
/***********************************************
* Side Push Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

<script>
jQuery(function(){ // on DOM load
menu1 = new pushmenu({ // initialize menu example
menuid: 'pushmenu1',
position: 'left',
marginoffset: 0,
revealamt: -8,
onopenclose:function(state){ // add or remove "open" class to animated drawer button depending on menu state
var $buttonref = $('#drawer')
if (state == 'open')
$buttonref.addClass('open')
else
$buttonref.removeClass('open')
}
})
})
</script>

</head>

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

　HTMLの編集方法　

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

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

URL　吹き出し　font-awesome.ｱｲｺﾝ　ｻｲﾄ名

以下、同様。

<body>

<nav id="pushmenu1" class="pushmenu">
<h2>Navigation</h2>
<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>
<ul class="mainnav">
<li><a href="http://　……　index2.html" title="太陽風ДζΨΠ∀"><i class="fa fa-bolt"></i> HOME</a></li>
<li><a href="http://　……　oritatami3c.html" title="Java JavaScript DHTML XML CSS ﾌﾚｰﾑｻﾝﾌﾟﾙ･応用方法など"><i class="fa fa-css3"></i> JavaScript DHTML XML CSS 応用ｻﾝﾌﾟﾙ</a></li>
<li><a href="https://　……　7LwhqXwuog/playlists" title="連続演奏"><i class="fa fa-comment-o"></i> YouTube　♫Jazz・Pops Playlist</a></li>
<li><a href="https://　……　HO/playlists" title="連続演奏"><i class="fa fa-search"></i> YouTube ♫ｸﾗｼｯｸ Playlist</a></li>
<li><a href="http://　……　t.ne.jp/"><i class="fa fa-gears"></i> 太陽風 Blog</a></li>
<li><a href="http://　……　/google_feed.htm" title="ﾆｭｰｽｻｲﾄのﾌｨｰﾄﾞ獲得"><i class="fa fa-gears"></i> News Index</a></li>
<li><a href="http://　……　search_engine2_a.htm" title="検索ｴﾝｼﾞﾝ切り換え"><i class="fa fa-gears"></i> ﾏﾙﾁ検索</a></li>
</ul>
<h2>Share It</h2>
<p style="padding: 10px">Follow us on <a href="https://twitter.com/　……　">Twitter</a> or via <a href="http://　……　.ne.jp/index.xml">RSS feed!</a></p>
</nav>

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

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

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

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

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

body{ /* style of BODY */

}

#contentwrapper{ /* wrapper around page content other than menu markup */
position: relative;
width: 100%;
-moz-transition: left 100ms ease-in-out, right 100ms ease-in-out; /* Content wrapper transition. Actual duration controlled by script */
-webkit-transition: left 100ms ease-in-out, right 100ms ease-in-out;
transition: left 100ms ease-in-out, right 100ms ease-in-out;
}

.pushmenu{ /* shared class for horizontal push menu */
background-color: #D9D6D4;　　/* 背景色 */ 　
color: #000000;
width: 200px; 　　/*　ﾒﾆｭｰ幅　 default menu width */
height: 100%;
position: fixed;
z-index: 1000;
font-size: 14px;
top: -100%;
clear: both;
display: block;
visibility: 'hidden';
overflow-y: auto;
-moz-transition: all 100ms ease-in-out; /* Menu transition. Actual duration controlled by script */
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}

.pushmenu.left{ /* Additional push menu style when orientation is "left" */
border-right: 4px solid black;
box-shadow: 8px 0 5px rgba(174, 174, 174, .8);
}

.pushmenu.right{ /* Additional push menu style when orientation is "right" */
border-left: 4px solid black;
box-shadow: -8px 0 5px rgba(174, 174, 174, .8);
width: 300px;
}

.pushmenu .closebutton{ /* label button inside UL to close menu */
position: absolute;
right: 5px;
top: 11px;
cursor: pointer;
font-size: 20px;
text-align: center;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.pushmenu .closebutton:hover{
color: #C0013C;　　　/* closeﾎﾞﾀﾝﾏｳｽｵｰﾊﾞｰ時色 */
}

.pushmenu a{
color: #0F003D;
}

.pushmenu h2{　　　　/*　ﾒﾆｭｰﾀｲﾄﾙ　*/ 　　　
color: #9AA21E;
margin-left: 15px;
font-family: 'Rosario', sans-serif;
font-size: 1.0em;
letter-spacing: 5px;
border-bottom: 1px solid gray;
padding-bottom: 3px;
text-transform: uppercase;
}

.pushmenu ul.mainnav{ /* Push menu main UL style */
padding: 0;
margin: 0;
list-style: none;
font-family: 'Rosario', sans-serif;
font-weight: bold;
}

.pushmenu ul.mainnav li{
margin-bottom: 10px;
}

.pushmenu ul.mainnav a{
font-size: 1.2em;
padding: 13px;
padding-left: 25px;
display: block;
color: #190049;
text-decoration: none;
}

.pushmenu ul.mainnav a i{ /* Fontawesome icon style */
margin-right: 5px;
}

.pushmenu ul.mainnav a:hover{
background: #D6E2A9;　　　/* ﾒﾆｭｰﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時背景色　　　 */
color: #1F002E;　　　　　　　/* ﾒﾆｭｰﾊｲﾊﾟｰﾘﾝｸﾏｳｽｵｰﾊﾞｰ時ﾃｷｽﾄ色　　　 */
}

ｘ.pushmenu ul.mainnav a:visited{
background: #EDEDEB;
color: #1F002E;
}

.pushmenu ul.mainnav a:active{
background: #E9F498;　　　/* ﾒﾆｭｰﾊｲﾊﾟｰﾘﾝｸｸﾘｯｸ時背景色　　　 */
color: #1F002E;　　　　　　　/* ﾒﾆｭｰﾊｲﾊﾟｰﾘﾝｸｸﾘｯｸ時ﾃｷｽﾄ色　　　 */

}

.pushmenu.open + .menutoggler{ /* Style of menu toggler when menu is opened */
opacity: 0.3;
}

/* ######### CSS for fixed menu toggler ######### */

.menutoggler { /* 　ｵｰﾌﾟﾝﾎﾞﾀﾝ　　　fixed toggler that toggles menu visibility */
font-size: 26px; /* ｻｲｽﾞ　 */
font-weight: bold;
color: #00AD9C; /* 色　 */
position: fixed;
background: transparent;
top: 10px; 　 /* 　縦位置　 */
text-shadow: 1px 1px 2px gray;
left: 0;　　/* 　横位置　 */
z-index: 500;
padding: 2px 5px;
background: #eee;
border: 1px solid transparent;
cursor: pointer;
}

.menutoggler:hover{
border: 1px solid gray;
}

.menutoggler.right{ /* Additional fixed toggler style when menu orientation is "right" instead of "left" */
left: auto;
right: 0;
}

/* ######### CSS for sample animated drawer button style ######### */

.animateddrawer{
width: 40px; /* width of button */
height: 40px; /* height of button */
outline: none;
display: block;
position: relative;
}

.animateddrawer:before, .animateddrawer:after{
position: absolute;
content: '';
display: block;
width: 100%;
height: 10px; /* height of top and bottom drawer line */
background: #003399;
border-radius: 2px;
top: 0;
left: 0;
opacity: 1;
transition: all 0.3s ease-in;
}

.animateddrawer:after{
top: auto;
bottom: 0;
}

.animateddrawer span{
width: 100%;
height: 10px; /* height of middle drawer line */
background: #003399;
position: absolute;
top: 50%;
margin-top: -5px; /* set this to - half of middle drawer line height */
border-radius: 2px;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: all 0.3s ease-in 0.3s;
}

.animateddrawer span::after{
content: '';
display: block;
width: 100%;
height: 10px; /* height of middle drawer line */
background: #003399;
border-radius: 2px;
position: absolute;
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
transition: all 0.3s ease-in 0.3s;
}

.animateddrawer.open:before{ /* style when .open class is added to button */
top: 50%;
margin-top: -5px; /* set this to - half of top drawer line height */
opacity: 0;
}

.animateddrawer.open:after{ /* style when .open class is added to button */
bottom: 50%;
opacity: 0;
}

.animateddrawer.open span{ /* style when .open class is added to button */
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.animateddrawer.open span:after{ /* style when .open class is added to button */
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
　

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

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