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

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

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

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

< ご使用方法 >

　・　ﾛｰｶﾙ（=PC）への保存は、hidden18/　をｸﾘｯｸ、開いたﾎﾙﾀﾞｰで、hidden18a.htm、0058794220.js（遅延時間）、0058794220.css（ﾌｫﾝﾄ、配色、位置、余白）、arrow.gif を右ｸﾘｯｸ、 [対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。　　　　※: 変わってしまった、ﾌｧｲﾙ名や、*.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) ：　hidden18a.htm （例）　　　　　　　　　挿入先の　<head> ～ </head>　の、～部分にﾍﾟｰｽﾄします。

　HTMLの編集方法　

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

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

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

<link rel="stylesheet" type="text/css" href="0058794220.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="0058794220.js">
/***********************************************
* Flex Level Drop Down 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>

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

　HTMLの編集方法　

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

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

URL　ｵﾌｾｯﾄ（横　縦）　吹き出し　ｻｲﾄ名

以下、同様。i

<body>

<p style="text-align:left"><a href="http://www.apple.com/" data-flexmenu="flexmenu2" data-dir="h" data-offsets="4,0" title="ﾏｳｽｵｰﾊﾞｰ ⇒ ﾊｲﾊﾟｰﾘﾝｸﾃｰﾌﾞﾙ展開">◆　ﾒﾆｭｰ 1　（Apple）</a></p>
<p style="text-align:left"><a href="http://www …… /index2.html" data-flexmenu="flexmenu1" data-dir="h" data-offsets="-80,15" title="ﾏｳｽｵｰﾊﾞｰ ⇒ ﾊｲﾊﾟｰﾘﾝｸﾃｰﾌﾞﾙ展開">★　ﾒﾆｭｰ 2　（太陽風）</a></p>

<ul id="flexmenu2" class="flexdropdownmenu">
<LI><A href="http://www.apple.com/">Apple　　　　　　</A></LI>
<LI><A href="http://www.apple.com/jp/itunes/">iTune 　　　　　</A></LI>
<LI><A href="http://www.apple.com/itunes/charts/songs/" title="Browse the top music downloads">iTune　Charts　　　</A></LI>
<LI><A href="http://www.youtube.com/results?search_query=iTune">iTune？⇒　You Tube Search</A></LI>
<LI><A href="http://www.google.co.jp/search?hl=ja&q=iTune">iTune？⇒　日本Google Search</A></LI>
<LI><A href="http://www.apple.com/iphone/">iPhone　　　　</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="flexmenu1" class="flexdropdownmenu">
<LI><A href="http://www ……　.html" title="最新Webﾃｸﾉﾛｼﾞｰ集">JavaScriptなどのｻﾝﾌﾟﾙ　　</A>
<UL>
<LI><A href="http://www.　……　.htm" title="JavaScript ｻﾝﾌﾟﾙ">ﾂﾘｰﾒﾆｭｰ35　　　　　　</A></LI>
<LI><A href="http://www.　……　database15/database15.htm" title="JavaScript ｻﾝﾌﾟﾙ">ﾃﾞｰﾀﾍﾞｰｽ15　　　　　</A></LI>
<LI><A href="http://www.　……　google_api/google_feed.htm" title="Google Feed API ｻﾝﾌﾟﾙ">RSS（ﾆｭｰｽｲﾝﾃﾞｯｸｽ）　　　　　　</A></LI>
<LI><A href="http://www.　……　google_map/google_map3a.htm" title="Google Maps API ｻﾝﾌﾟﾙ">路線案内　　　　　　</A></LI>
<LI><A href="http://www.　……　google_map/google_map3i.htm">最寄り拠点　　　　　　</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　217</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　218</A></LI>
</UL></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　22</A>
<UL>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　221</A>
<UL>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　2211</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　2212</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　2213</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　2214</A></LI>
<LI><A href="http://www.w3schools.com/">W3Schools Online Web Tutorials　　　　</A></LI>
<LI><A href="http://msdn.microsoft.com/ja-jp/library/cc872845.aspx">Microsoft Internet Explorer 開発　>　Internet Explorer 8 </A></LI>
<LI><A href="http://msdn.microsoft.com/ja-jp/library/aa155073.aspx">Microsoft Web開発　　　　　</A></LI>
<LI><A href="http://msdn.microsoft.com/en-us/library/aa155073.aspx">Microsoft Development　　　</A></LI>
</UL>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　222</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　223</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　224</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　225</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　226</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　227</A></LI>
<LI><A href="http://www./……/xxx.html">ｻｲﾄ　　　　　　228</A></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>

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

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

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

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

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

ﾌｫﾝﾄ

幅

背景色
罫線色

余白

ﾏｳｽｵｰﾊﾞｰ時ﾃｰﾌﾞﾙ
幅

背景色

.flexdropdownmenu, .flexdropdownmenu ul{ /*topmost and sub ULs, respectively*/
font: normal 13px メイリオ,Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}

.flexdropdownmenu li{
position: relative;
}

.flexdropdownmenu li a{
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: #F6EDD4;
border-bottom: 1px solid #ffffff;
text-decoration: none;
padding: 4px 5px;
}

* html .flexdropdownmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a{
background: #DDD4C7;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

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

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