サンプルページ　　　折り畳みコンテンツ18

ｻｲﾄ　　　　　　1　　　　太陽風ДζΨΠ∀　　　　　　　　　　ｻｲﾄ　　　　　　3

ﾎｰﾑ　へ　　　　　　　ｻﾝﾌﾟﾙﾍﾟｰｼﾞ　　折り畳みｺﾝﾃﾝﾂ18　　hidden18.htm

ﾀｲﾄﾙﾊﾞﾅｰのﾏｳｽｵｰﾊﾞｰで、ﾘﾝｸﾃｰﾌﾞﾙを表示/折り畳み。　　　　　　DHTML、jQuery。　　　　　　ﾒﾆｭｰ構成、ﾊｲﾊﾟｰﾘﾝｸなどのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。　　　　all 対応（≠ＩＥ互換表示）。　　　　　ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。

ﾃﾞﾓは、ﾒﾆｭｰの展開で。

< ご使用方法 >

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

　・　このDHTMLの実装方法は、hidden18.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 8.x～などで開いて。　　　　更新の確認は [F5]ｷｰを押し、ｻｰﾊﾞｰやﾌﾞﾗｳｻﾞｰのｷｬｯｼｭｸﾘｱｰ、最新ﾃﾞｰﾀ読み込み（≠再ｱｸｾｽ）で行います。

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

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

　HTMLの編集方法　

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

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

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

互換表示

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<title>サンプルページ　　折り畳みコンテンツ</title>

<LINK rel="stylesheet" type="text/css" href="0058794210.css">
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<SCRIPT src="0058794210.js">
/* Split Menu Buttons: created: Aug 8th, 2012 by DynamicDrive.com. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/
</SCRIPT>

<SCRIPT>
jQuery(function(){ // on document load
$('a[data-showmenu]').splitmenubuttonMenu() // Add split button menu to links with "data-showmenu" attr
})
</SCRIPT>

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

　HTMLの編集方法　

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

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

URL　ｻｲﾄ名
以下、同様。
背景色

ｻｲﾄ 1 ～ｻｲﾄ 3 の不要ﾒﾆｭｰ（ｻｲﾄ1、ｻｲﾄ2など）は削除。

<body>

<A class="splitmenubutton" href="http://www./……/xxx.html" data-splitmenu="false" data-showmenu="dropmenu1">ｻｲﾄ　　　　　　1</A>　　　　
<A class="splitmenubutton" href="http://www　……　.html" data-showmenu="dropmenu2" title="ﾎｰﾑﾍﾟｰｼﾞ">太陽風ДζΨΠ∀　　　　　　</A>　　　　
<A class="splitmenubutton diffarrow" href="http://www./……/xxx.html" data-showmenu="dropmenu2" data-menucolors="#8BD502">ｻｲﾄ　　　　　　3</A>

<UL id="dropmenu1" class="splitdropdown">
<LI><A href="../google_api/google_feed.htm" title="Google Feed API ｻﾝﾌﾟﾙ">RSS（ﾆｭｰｽｲﾝﾃﾞｯｸｽ）　　　　　　</A></LI>
<LI><A href="../google_map/google_map3a.htm" title="Google Maps API ｻﾝﾌﾟﾙ">路線案内　　　　　　</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　13</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　14</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　15</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　16</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　17</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　18</A></LI>
　　</UL>
<UL id="dropmenu2" class="splitdropdown">
<LI><A href="http://xml-xsl.sakura.ne.jp/oritatami3c.html">Java、JavaScript、DHTMLｻﾝﾌﾟﾙ ≫</A></LI>
<UL>
<LI><A href="../tree35/tree35.htm" title="JavaScript ｻﾝﾌﾟﾙ">ﾂﾘｰﾒﾆｭｰ35　　　　　　</A></LI>
<LI><A href="../database15/database15.htm" title="JavaScript ｻﾝﾌﾟﾙ">ﾃﾞｰﾀﾍﾞｰｽ35　　　　　</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　213</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　214</A></LI>
</UL></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　22 ≫</A>
<UL>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　221</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　222</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　223 ≫</A>
<UL>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　2231</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　2232</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　2233</A></LI>
<LI><A href="http://www.apple.com/">Apple　　　　　　</A></LI>
<LI><A href="http://www.apple.com/itunes/">iTune　　　　　</A></LI>
</UL></LI></UL></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　23</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　24</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　25</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　26</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　27</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　28</A></LI></UL>


<body>

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

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

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

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

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

ﾒﾆｭｰ 1、2　文字色

ﾒﾆｭｰ 1、2　背景色

ﾒﾆｭｰ 1、2　ﾏｳｽｵｰﾊﾞｰ時背景色

.splitmenubutton, .downtoggler{ /* .downtoggler element is dynamically added by script */
color: white;
font: bold 13px Arial;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-decoration: none;
background: #6500D7; /* default color of menu button */
display: inline-block;
}

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

a.downtoggler.selected{ /* CSS to add to toggler element when it's selected */
background: #5C2DAA; /* default hover background color of menu */
}

.downarrow, rightarrow{
cursor: pointer;
}

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

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

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