Uncyclopedia:NavFrameの使い方
ナビゲーションに移動
検索に移動
このページでは、NavFrameつまりダイナミック・ナビゲーション・ボックス（Dynamic Navigation Boxes: 動的案内記事欄）について説明しています。
ダイナミック・ナビゲーション・ボックスは、折り畳みできるナビゲーションボックスをJavaScriptとスタイルシートで動作しています。
使用方法[編集]
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が未実装あるいは無効化されている環境では、すべて展開された状態で表示されるのであまり深く考える必要はありません。が、ご利用は計画的に。