ﾎｰﾑ へ ｻﾝﾌﾟﾙﾍﾟｰｼﾞ 折り畳みﾒﾆｭｰ39 oritatami39.htm
折り畳みﾒﾆｭｰ、選択ﾎﾙﾀﾞｰ（階層）のみ展開。 DHTML、jQuery。 ﾊｲﾊﾟｰﾘﾝｸ、配色などのｶｽﾀﾏｲｽﾞはﾃｷｽﾄｴﾃﾞｨﾀｰなどで可。 all 対応。 ｺﾋﾟｰ、編集し、簡単にWebで応用できまっ、(^ ^)。
ﾃﾞﾓは、ﾒﾆｭｰ展開、ﾊｲﾊﾟｰﾘﾝｸｵｰﾌﾟﾝなどで。
< ご使用方法 >
・ ﾛｰｶﾙ（=PC）への保存は、oritatami39/ をｸﾘｯｸ開いたﾎﾙﾀﾞｰで、oritatami39.htm、00443980.js、00443980.css を右ｸﾘｯｸ、[対象をﾌｧｲﾙに保存] - 【ﾌｧｲﾙのﾀﾞｳﾝﾛｰﾄﾞ】、【ﾌｧｲﾙ名を付けて保存】 - <保存する場所>： ……、などで。 ※: 変わってしまった、ﾌｧｲﾙ名や、*.html 中のﾊﾟｽは要修正。
・ このDHTMLの実装方法は、oritatami39.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などで変わってしまったﾌｧｲﾙ名は要修正。 ｽｸﾘﾌﾟﾄ構文中への改行混入は非作動原因。
･ 関連情報 ：
色記号5、〃6、ｽﾀｲﾙｼｰﾄﾘﾌｧﾚﾝｽ、ﾎｰﾑﾍﾟｰｼﾞ開設入門。 Web Development、Web開発、IE10
互換性ｸｯｸﾌﾞｯｸ、〃開発者向けｶﾞｲﾄﾞ、IE
API ﾘﾌｧﾚﾝｽ、IE 開発
> HTMLとCSS、開発ﾂｰﾙでｻｲﾄを修正、ｽｸﾘﾌﾟﾄ ﾃﾞﾊﾞｯｸﾞの概要、HTMLとCSSのｻﾎﾟｰﾄ、CSSの改良点、XML、〃ﾘﾌｧﾚﾝｽ、DHTML。
(*1)
： oritatami39.htm （例） 挿入先の <head> 〜 </head> の、〜 部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*1) をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
|
〔この列ﾍﾟｰｽﾄ不要〕
ｼﾌﾄJIS使用（削除不可）
互換表示
ieなどに表示するｱｲｺﾝﾌｧｲﾙ名（削除可）
<style type= 〜
</style>は（削除可）
(*1)〜(*3)表ﾀｲﾄﾙ背景
body 文字色 背景色 下線
ﾊｲﾊﾟｰﾘﾝｸ 〃
表示済みの〃
ﾏｳｽｵｰﾊﾞｰ時の〃
ｸﾘｯｸ中の〃
ﾌｫﾝﾄ
ﾘﾝｸを新しいWinで開くを標準（削除可）※：target= いろいろ
同じﾌﾚｰﾑ=_self、ﾍﾟｰｼﾞ全体=_top、親ﾌﾚｰﾑ=_parent
お気に入り、ﾀｽｸﾊﾞｰに表示するﾍﾟｰｼﾞ名（≠ﾌｧｲﾙ名）
jQuery
展開/折り畳み速度
初期展開ｺﾝﾃﾝﾂ 先頭(例)
ﾒﾆｭｰ幅
|
<!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"><meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link REL="SHORTCUT ICON" href="favicon.ico">
<style type="text/css"><!--
.xxx0
{ background: #F9F8F9 url('wttec.gif');
}
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9
url('wttec.gif'); text-decoration:none;
}
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4;
text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2;
text-decoration:underline; }
font {font-size:12px;
line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
--></style>
<base target="_blank">
<title>サンプルページ 折り畳みメニュー39</title>
<!-- ☆ ----------- ↓ この間をコピー＆ペーストします。 ------------ -->
<LINK href="00443980.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="00443980.js" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">
$(document).ready(function() {
$("#myAccordion").myAccordion({
speed: "fast", // @param : low, medium, fast
defautContent: 0 // @param : number
});
});
</script>
<style type="text/css"><!--
#myAccordion {width:150px;}
--></style>
<!-- ☆ ----------- ↑ この間をコピー＆ペーストします。 ------------ -->
|
(*2)
： oritatami39.htm （例） 挿入先の <body> 〜
</body> の、〜
部分にﾍﾟｰｽﾄします。
|
HTMLの編集方法 |
(*2)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓のHTMLを挿入先ﾌｧｲﾙにﾍﾟｰｽﾄ、太字部分を編集し使用。 |
|
〔この列ﾍﾟｰｽﾄ不要〕
ﾒﾆｭｰﾀｲﾄﾙ
URL 新しいWinで開く ｻｲﾄ名
以下、同様。
吹き出し
|
<!-- ★ ----------- ↓ この間をコピー＆ペーストします。 ------------ -->
<DIV id="myAccordion">
<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>Google Maps/Earth API</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /google_maps27.htm" target="_blank">折れ線間距離と面積</a><br/>
<a href="http:// …… /google_maps26.htm" target="_blank">白地図</a><br/>
<a href="http:// …… /google_maps25/google_maps25.htm"
target="_blank">日本百名山</a><br/>
==== この間､説明を省略｡ ====
<a href="http:// …… /google_earth8.htm" target="_blank" title="ﾒｯｾｰｼﾞ世界的名建造物の上空俯瞰、CG+実画像。">上空俯瞰e8</a><br/>
<a href="http:// …… /google_earth5.htm" target="_blank"
title="星座名">星座・地球</a><br/>
</DIV>
<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>画像・ｽﾗｲﾄﾞｼｮｰ</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /slideshow21/slideshow21s.htm" target="_blank"
title="Flash、XML、ｱｳﾄﾙｯｸ風の表示 、ﾌｪｲﾄﾞ効果。">ｽﾗｲﾄﾞｼｮｰ21</a><br/>
<a href="http:// …… /slideshow34/slideshow34.htm" target="_blank"
title="雪崩れ効果、自律/ﾎﾞﾀﾝ制御、ﾏｳｽｵｰﾊﾞｰでｺﾒﾝﾄ表示、ｸﾘｯｸでﾍﾟｰｼﾞを開く。ﾞ">ｽﾗｲﾄﾞｼｮｰ34</a><br/>
<a href="http:// …… /slideshow28.htm" target="_blank"
title="ﾗﾝﾀﾞﾑ自動ｽﾗｲﾄﾞｼｮｰ、ﾌｪｲﾄﾞ効果。">ｽﾗｲﾄﾞｼｮｰ28</a><br/>
==== この間､説明を省略｡ ====
<a href="http:// …… /slide_show14a/slide_show14c.htm" target="_blank"
title="ﾌｪｲﾄﾞｲﾝ・ｱｳﾄ風〔ﾌﾞﾚﾝﾄﾞ効果〕で自動（ﾀｲﾏｰ）画像切り替え、1230x770。">ｽﾗｲﾄﾞｼｮｰ
14c</a><br/>
<a href="http:// …… /slideshow19b.htm" target="_blank"
title="ﾎﾟｰｽﾞ・ﾌｪｲﾄﾞ効果・非ﾗﾝﾀﾞﾑ可、画像URL任意、別画像。 H1230xV1024。">ｽﾗｲﾄﾞｼｮｰ
19b</a><br/>
</DIV>
<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>CSS・ﾒﾆｭｰ・ﾃﾞｰﾀﾍﾞｰｽ</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /filters_transitions.htm" target="_blank"
title="CSS、各種ﾌｨﾙﾀｰ/変遷の効果のﾃﾞﾓとHTML生成。">Filters and Transitions</a><br/>
<a href="http:// …… /alpha_filter.htm" target="_blank"
title="CSS、Alphaﾌｨﾙﾀｰ効果のﾃﾞﾓとHTML生成。">Alpha Filter</a><br/>
<a href="http:// …… /shadow_filter.htm" target="_blank"
title="CSS、ｼｬﾄﾞｳﾌｨﾙﾀｰ効果のﾃﾞﾓとHTML生成。">Shodow Filter </a><br/>
==== この間､説明を省略｡ ====
<a href="http:// …… /jigsaw.htm" target="_blank">ｼﾞｸﾞｿｰﾊﾟｽﾞﾙ</a><br/>
<a href="http:// …… /drag_drop0/drag_drop0js.htm" target="_blank">ﾄﾞﾗｯｸﾞ
ﾄﾞﾛｯﾌﾟ</a><br/>
<a href="http:// …… /hot_spot3.htm" target="_blank">ﾎｯﾄｽﾎﾟｯﾄ</a><br/>
</DIV>
<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>ﾏﾙﾁﾒﾃﾞｨｱ・女優</H4></DIV>
<DIV class="myAccordion-content">
<a href="http:// …… /clock11/clock11.htm" target="_blank"
title="天気予報付き、背景画像自在。">時計11</a><br/>
<a href="http:// …… /hyou4-5/hyou5.htm" target="_blank"
title="ｻｳﾝﾄﾞ・ﾑｰﾋﾞｰﾗﾝﾁｬｰ、□小Win">表5</a><br/>
<a href="http:// …… /sound.htm" target="_blank" title="開始/停止ﾎﾞﾀﾝ">ｻｳﾝﾄﾞ
ｵﾝ/ｵﾌ</a><br/>
==== この間､説明を省略｡ ====
<a href="http://ameblo.jp/senkawa-tamaki/" target="_blank">仙川環</a><br/>
<a href="http://www.fairytale.jp/index.html" target="_blank">三好礼子</a><br/>
</DIV>
<!-- Element -->
<DIV class="myAccordion-declencheur"><H4>World Media・Fashion</H4></DIV>
<DIV class="myAccordion-content">
<a href="http://www.apple.com/" target="_blank" title="ﾒｯｾｰｼﾞ">Apple</a>
<a href="http://entertainment.msn.com/" target="_blank" title="Celebrity
gossip, news, photos and more">MSN Entertainment</a>
<a href="http://www.sternsmusic.com/index.php?" target="_blank"
title="ﾒｯｾｰｼﾞ">Afro Pop</a>
==== この間､説明を省略｡ ====
<a href="http://trailers.apple.com/trailers/" target="_blank"
title="Apple -iTunes Movie Trailers">iTunes Movie Trailers</a>
<a href="http://www.windowsmedia.com/Mediaguide/US/Home" target="_blank"
title="Windows Media Guide | Music">Win Media Guide ♪</a>
</DIV>
</DIV>
<!-- ★ ----------- ↑ この間をコピー＆ペーストします。 ------------ -->
==== この間､説明を省略｡ ====
|
(*3)
： 00443980.css （例） ﾃｷｽﾄｴﾃﾞｨﾀｰで開き、編集しhogehoge.htmlと同ﾃﾞｨﾚｸﾄﾘｰに転送・配置します。
| |
*.css の編集方法 |
(*3)をﾃｷｽﾄｴﾃﾞｨﾀｰで開き、下記↓の太字部分を編集し使用。 |
| |
〔この列ﾍﾟｰｽﾄ不要〕
ﾒﾆｭｰﾀｲﾄﾙ背景画像
選択ﾒﾆｭｰﾀｲﾄﾙ背景画像
凸罫線色
ﾒﾆｭｰﾀｲﾄﾙ文字色
選択ﾒﾆｭｰﾀｲﾄﾙ文字色
ﾒﾆｭｰ行間
罫線
ﾌｫﾝﾄ ﾌｫﾝﾄｻｲｽﾞ
|
.myAccordion-declencheur {
background: #E7E5E2 url('http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/bg_slva3r.jpg');
padding: 5px; margin-bottom: 1px; cursor: pointer;
}
.myAccordion-declencheur-actif {
background: #00B5B3 url('http://www.pat.hi-ho.ne.jp/oka_tosho/tab_menu12/tbwhb2.gif');
border: 1px outset #D0CEC9;
}
.myAccordion-declencheur * {
margin: 0px; padding: 0px; color: #333;
}
.myAccordion-declencheur-actif * {
color: #004140;
}
.myAccordion-content {
margin: 2px; padding: 0px;
line-height:15px;
border-left: 1px solid #F0F0F4; border-top: 1px solid #F0F0F4;
border-right: 1px solid #E2E2E7; border-bottom: 1px solid #E2E2E7;
font-family:メイリオ,Lucida Sans Regular;MS PGothic,MS Gothic, font-size:
12px;
}
.myAccordion-content-actif {
}
|
< 補足 > 適時参照あれ！。
・ Wordpad によるHTMLｿｰｽ（ﾀｸﾞ）を見ながらの直接編集方法。