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>

ちなみに指定しないとこうなる

<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>

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

また、入れ子にすると文字がどんどん小さくなります。

[編集] ブラウザの対応

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

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