NavFrameは、ダイナミック・ナビゲーション・ボックス（Dynamic Navigation Boxes/日本名:動的案内記事欄）についての説明です。

ダイナミック・ナビゲーション・ボックスは、折り畳みできるナビゲーションボックスをJavaScriptとスタイルシートで動作しています。
目次

1 使用方法

1.1 使用例

1.2 アンサイクロペディア仕様


2 ブラウザの対応



使用方法

divタグを使うことで導入できます。divタグのクラスにNavFrame、NavHead、NavContentを入れるだけです。
使用例<div class="NavFrame"> <div class="NavHead">[... タイトル（表示ボタンが付く） ...]</div> <div class="NavContent"> [... 折り畳み機能を使いたい部分の内容 ...] </div></div> [... タイトル（表示ボタンが付く） ...]

[... 折り畳み機能を使いたい部分の内容 ...]

なお、入れ子にするときは最外縁のNavFrameを指定したdivタグにBoxmergeクラスを指定すると見栄えがよいかもしれない<div class="NavFrame Boxmerge"> <div class="NavHead">Head 1</div> <div class="NavContent">Content 11 <div class="NavFrame"> <div class="NavHead">Head 11</div> <div class="NavContent">Content 111 <div class="NavFrame"> <div class="NavHead">Head 111</div> <div class="NavContent">Content 1111</div> <div class="NavContent">Content 1112</div> </div> </div> <div class="NavContent">Content 112</div> </div> <div class="NavFrame"> <div class="NavHead">Head 12</div> <div class="NavContent">Content 121</div> <div class="NavContent">Content 122</div> </div> </div></div> Head 1 Content 11 Head 11 Content 111 Head 111 Content 1111 Content 1112 Content 112 Head 12 Content 121 Content 122

ちなみに指定しないとこうなる<div class="NavFrame"> <div class="NavHead">Head 1</div> <div class="NavContent">Content 11 <div class="NavFrame"> <div class="NavHead">Head 11</div> <div class="NavContent">Content 111 <div class="NavFrame"> <div class="NavHead">Head 111</div> <div class="NavContent">Content 1111</div> <div class="NavContent">Content 1112</div> </div> </div> <div class="NavContent">Content 112</div> </div> <div class="NavFrame"> <div class="NavHead">Head 12</div> <div class="NavContent">Content 121</div> <div class="NavContent">Content 122</div> </div> </div></div> Head 1 Content 11 Head 11 Content 111 Head 111 Content 1111 Content 1112 Content 112 Head 12 Content 121 Content 122

なんか枠が二重になってて気持ち悪いが、階層関係はわかりやすいかもしれない。

また、入れ子にすると文字がどんどん小さくなります。
アンサイクロペディア仕様

気難しい専門家はクラスが混在すると使えないと言っているが…。上記の例に示したとおり、アンサイクロペディア仕様なので使えてしまう。
ブラウザの対応

JavaScriptとCSSを実装したブラウザでは、折り畳み機能を使うことができます。

JavaScriptが未実装あるいは無効化されている環境では、すべて展開された状態で表示されるのであまり深く考えないでよい。が、ご利用は計画的に。

カテゴリ: アンサイクロペディア

更新日時:2008年2月5日(火)00:06
取得日時:2008/08/16 11:12