1.  サイト 1  コメント …
    1. サイト内検索5a
    2. 画像切換25
    3. 画像切換24
    4. 画像切換21
    5. 照明画像4
    6. スライドショー32
    7. スライドショー31
    8. スライドショー30
    9. マウスオーバー24
    10. NASA
    11. iTunes Movie Trailers
    12.  
    13. WMediaPlayer4
    14. WMediaPlayer5b
    15. Web Radio
    16. 絵合わせ9b
    17. クイズ3
    18. 初期右ページ
    19. … 
  2.  サイト 2  コメント …
    1. サイト21 …
    2. サイト22 …
    3. サイト23 …
    4. サイト24 …
    5. サイト25 …
    6. サイト26 …
    7. サイト27 …
    8. … 
  3.  サイト 3  コメント …
    1.  サイト 31  …
      1. サイト311 …
      2. サイト312 …
      3. サイト313 …
      4. サイト314 …
      5. サイト315 …
      6. サイト316 …
      7. サイト317 …
      8.  …
    2.  サイト 32  …
      1. サイト321 …
      2. サイト322 …
      3. サイト323 …
      4. サイト324 …
      5. サイト325 …
      6. サイト326 …
      7. サイト327 …
      8.  …
    3.  サイト 33  …
      1. サイト331 …
      2. サイト332 …
      3. サイト333 …
      4. サイト334 …
      5. サイト335 …
      6. サイト336 …
      7. サイト337 …
      8.  …
    4.  サイト 34  …
      1. サイト341 …
      2. サイト342 …
      3. サイト343 …
      4. サイト344 …
      5. サイト345 …
      6. サイト346 …
      7. サイト347 …
      8.  …
  4.  サイト 4  コメント …
    1.  サイト 41  …
      1. サイト411 …
      2. サイト412 …
      3. サイト413 …
      4. サイト414 …
      5. サイト415 …
      6. サイト416 …
      7. サイト417 …
      8.  …
    2.  サイト 42  …
      1. サイト421 …
      2. サイト422 …
      3. サイト423 …
      4. サイト424 …
      5. サイト425 …
      6. サイト426 …
      7. サイト427 …
      8.  …
    3.  サイト 43  …
      1. サイト431 …
      2. サイト432 …
      3. サイト433 …
      4. サイト434 …
      5. サイト435 …
      6. サイト436 …
      7. サイト437 …
      8.  …
    4.  サイト 44  …
      1. サイト441 …
      2. サイト442 …
      3. サイト443 …
      4. サイト444 …
      5. サイト445 …
      6. サイト446 …
      7. サイト447 …
      8.  …
  5.  サイト 5  コメント …
    1.  サイト 51  …
      1. サイト511 …
      2. サイト512 …
      3. サイト513 …
      4. サイト514 …
      5. サイト515 …
      6. サイト516 …
      7. サイト517 …
      8.  …
    2.  サイト 52  …
      1. サイト521 …
      2. サイト522 …
      3. サイト523 …
      4. サイト524 …
      5. サイト525 …
      6. サイト526 …
      7. サイト527 …
      8.  …
    3.  サイト 53  …
      1. サイト531 …
      2. サイト532 …
      3. サイト533 …
      4. サイト534 …
      5. サイト535 …
      6. サイト536 …
      7. サイト537 …
      8.  …
    4.  サイト 54  …
      1. サイト541 …
      2. サイト542 …
      3. サイト543 …
      4. サイト544 …
      5. サイト545 …
      6. サイト546 …
      7. サイト547 …
      8.  …

 

 

 

 

 

 

 

 

 

 

 

※: ホームへ …、以下の説明部分は削除して使用。

ホーム へ       サンプルページ  折り畳みリスト 3c1l(初期折り畳み)  oritatami3c1l.htm(左右フレームの左・折り畳みメニューページ)

折り畳み/展開のリンクメニュー。   アイコン画像付き。   左右フレームの左ページ   DHTML。      配色、ハイパーリンクなどのカスタマイズはテキストエディターなどで可 、ページ/折り畳みリストのフォント・サイズ固定(CSS)マウスオーバー作動に変更可。    all 対応。     コピー、編集し、簡単にWebで応用できまっ。

デモは、カラーメニューのクリックで展開/折り畳み、ハイパーリンク先のオープンなどで。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、oritatami3c1l.htm(DHTML実装ファイル)、outline.js(DHTMLソース) 、〔参考画像 : 10app.gif10bl_r.gif10blsq.gif10db_r.gif10dbbl.gif10feed.gif10gb_r.gif10ir_r.gif10ob_r.gif10og_r.gif10page.gif10pass.gif10pr_r.gif10rd_apple.gif10ticket.gif10vl_r.gif10yl_r.gif 〕 を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、oritatami3c1l.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。     非作動時は、 <body …… onclick="dynOutline()" language="Javascript1.2"> の記述の有無を確認。    更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.jsなども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 :色記号5〃6スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

(*1) oritatami3c1l.htm (例)        挿入先の  <head> 〜 </head>の、部分にペーストします。

HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕  

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type 〜 </style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

位置

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
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>サンプルページ  折り畳みリスト3c1l</title>

<!-- ☆ ---------- ↓ この間をコピー、編集、ペーストします。 ---------- -->
<style type="text/css"><!--
li {
MARGIN-TOP: 1px; MARGIN-LEFT: -22px
}
--></style>

<script>
function jump(parts){
if(parts.selectedIndex!=0)
open(parts.options[parts.selectedIndex].value);
}
</script>
<script language="JavaScript" fptype="dynamicoutline">
<!--
function dynOutline() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicoutline" src="outline.js">
</script>
<script language="JavaScript1.2" fptype="dynamicoutline" for="document" event="onreadystatechange()">
<!--
initOutline()
//-->
</script>
<!-- ☆ ---------- ↑ この間をコピー、編集、ペーストします。 ---------- -->
<!--webbot bot="HTMLMarkup" endspan -->
 

(*2) oritatami3c1l.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

追記 
マウスオーバー作動は、onMouseoverで。 配置 サイズ 背景色 吹き出し 非透明度0〜100
 

折り畳みリストのフォント指定 -1/2
メニュー背景文字色
サイト名メニュー 任意コメント(説明など)
ターゲットframename URL サイト名
吹き出し、バル〜ン

以下同様に編集。 メニュー数の加減は、 <li>〜 </li> 単位で。

 ※:色記号2を獲得スル。

 

 

<!--webbot bot="HTMLMarkup" startspan -->
<body onclick="dynOutline()" language="Javascript1.2">
<!-- ★ --- 折り畳みメニューの、位置調整のためのDIV有りは、 ↓ この間をコピー&ペーストします。 -->
<!--               表示枠位置     表示枠サイズ        座標              表示枠背景色 -->
<div style="position:absolute; top:10; left:10; width:155; height:100; z-index:0; visibility:visible; background-color:#FFFFFF" title="=(゜。.゜)= "  STYLE="filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=85, FinishOpacity=85)">

<!-- □ ---- 折り畳みメニューは、↑の、 onclick="dynOutline()" と、↓ この間をコピー、編集、ペーストします。 ---------- -->
<ol dynamicoutline initcollapsed>
<font size="2" style="font-size: 12px; line-height: 13px">
<li STYLE="cursor:hand"><span style="background-color: #FB6B01; color: #FFFFFF; list-style-image: url('10dbbl.gif');" title="\^o^//(>_<) - 展開/折り畳みしまっ…*。"><b> サイト 1 </b></span> コメント …<ol>
<li><span style="list-style-image: url('10vl_r.gif');"><a target="_blank" href="http:// …… .htm" title="新しいWinで開く">サイト11</a></li>
<li><a target="main" href="http://www.playboy.com/playmates/" title="プレイボーイ プレイメイト">Playboy Playmates</a></li>
<li><a target="main" href="http://www.apple.com/quicktime/whatson/" title="アップル - クイックタイム ストリーミング TV チャンネル〔`。´ 〕">Music - Quick Time</a></li>

====  この間、説明を省略。  ====

<li><a target="main" href="http:// …… .htm">サイト547</a> …</li>
<li> …</li>
</ol>
</li>
</ol>
</li>
</ol>
</font>   ← ※:折り畳みリストのフォント指定 -2/2  

<!-- □ --- 折り畳みメニュー ↑ この間をコピー、編集、ペーストします。 ---------- -->
</DIV>
<!-- ★ --- 折り畳みメニューの、位置調整のためのDIV有りは ↑ この間をコピー&ペーストします。 -->
<!--webbot bot="HTMLMarkup" endspan -->
<p> </p>

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

・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。