スポンサーサイト

一定期間更新がないため広告を表示しています

| スポンサードリンク | - | - | pookmark |
Entry: main  << >>
サイドメニューを折りたたむ
■ JavaScript
テンプレートのHTML<head> 〜 </head>の内に以下を挿入。
<script type="text/javascript">
<!--
function dd(id){
if(document.all)OBJ = document.all(id).style; else if(document.getElementById)OBJ = document.getElementById(id).style; if(OBJ) OBJ.display=='none'?OBJ.display='':OBJ.display='none';
}
//--></script>


■ JavaScript適用範囲の設定
サイドメニュー全体を<div id="fo0"> 〜 </div>で囲む。

例:「stella_basics
<!--/ Main /-->

<div id="fo0">
<!-- Side -->
<div id="side">
<div class="side_in">

<!-- BEGIN calendar -->
<h2>Calendar</h2>
<div class="calendar">{calendar}</div>
<!-- END calendar -->




<!-- BEGIN amazon -->
<h2>Recommend</h2>
<div class="side_body">{amazon_item}
</div>
<!-- END amazon -->
<br />
{ad}
</div>
</div>
</div>

</div>
</body>
</html>


■ メニュー開閉ボタンの設定
メニュー開閉ボタンとする要素にリンクを設定する。
<a href="javascript:void(0)" onclick="dd('fo01')"> 開閉ボタン </a>

例:Calendar of 「stella_basics

タイトル文字を開閉ボタンと設定する場合。
<h2><a href="javascript:void(0)" onclick="dd('fo01')">Calendar</a></h2>

ブロック要素を開閉ボタンとする場合。
<a href="javascript:void(0)" onclick="dd('fo01')"><h2>Calendar</h2></a>

新たに開閉ボタンを設置する場合。
Calendar ▽
<h2>Calendar <a href="javascript:void(0)" onclick="dd('fo01')"></a></h2>


■ 開閉されるメニューの設定
開閉されるメニューを下記タグで囲む。
<div style="display:none" id="fo01"> 〜 </div>

例:Calendar of 「stella_basics
<div style="display:none" id="fo01">
<div class="calendar">{calendar}</div>
</div>

※複数のメニューを折りたたむ場合
<a href="javascript:void(0)" onclick="dd('fo01')"> 開閉ボタン </a>
<div style="display:none" id="fo01"> 〜 </div>
fo01は開閉ボタンと開閉されるメニューを一致させるキーワードです。
複数のメニューを折りたたむ場合には、メニューごとに数字を昇順に変更するようにしましょう。(fo01,fo02,fo03・・・)

例:Calendar,Profile and Category of 「stella_basics
<!-- BEGIN calendar -->
<h2><a href="javascript:void(0)" onclick="dd('fo01')">Calendar</a></h2>
<div style="display:none" id="fo01">
<div class="calendar">{calendar}</div>
</div>
<!-- END calendar -->

<!-- BEGIN profile -->
<h2><a href="javascript:void(0)" onclick="dd('fo02')">Profile</a></h2>
<div style="display:none" id="fo02">
<div class="side_body">{user_list}</div>
</div>
<!-- END profile -->

<!-- BEGIN category -->
<h2><a href="javascript:void(0)" onclick="dd('fo03')">Category</a></h2>
<div style="display:none" id="fo03">
<div class="side_body">{category_list}</div>
</div>
<!-- END category -->


■ JavaScript無効時の設定
<noscript> 〜 </noscript>でメニュータグを囲む。
※HP閲覧者の中にはJavaScriptを無効に設定して閲覧している方もいます。
<noscript> 〜 </noscript>

例:Calendar of 「stella_basics
<noscript>
<div class="calendar">{calendar}</div>
</noscript>


■ デフォルト時の開閉設定
style="display:none"の有無。

閉じた状態で表示
<div style="display:none" id="fo01">
開いた状態で表示
<div id="fo01">


■ カスタマイズ例
・テンプレート 「stella_basics」
・カスタマイズ無し 「Calendar」
・デフォルトで開いた状態 「Profile,Category」
・デフォルトで閉じた状態 「Entry」
<div id="fo0">
<!-- Side -->
<div id="side">
<div class="side_in">

<!-- BEGIN calendar -->
<h2>Calendar</h2>
<div class="calendar">{calendar}</div>
<!-- END calendar -->

<!-- BEGIN profile -->
<h2><a href="javascript:void(0)" onclick="dd('fo01')">Profile</a></h2>
<div id="fo01">
<div class="side_body">{user_list}</div>
</div>
<noscript>
<div class="side_body">{user_list}</div>
</noscript>
<!-- END profile -->

<!-- BEGIN category -->
<h2><a href="javascript:void(0)" onclick="dd('fo02')">Category</a></h2>
<div id="fo02">
<div class="side_body">{category_list}</div>
</div>
<noscript>
<div class="side_body">{category_list}</div>
</noscript>
<!-- END category -->

<!-- BEGIN latest_entry -->
<h2><a href="javascript:void(0)" onclick="dd('fo03')">Entry</a></h2>
<div style="display:none" id="fo03">
<div class="side_body">{latest_entry_list}</div>
</div>
<noscript>
<div class="side_body">{latest_entry_list}</div>
</noscript>
<!-- END latest_entry -->




<!-- END amazon -->
<br />
{ad}
</div>
</div>
</div>

</div>
</body>
</html>
参考:http://bisco.blog2.fc2.com/



| pika | - | - | pookmark |
スポンサーサイト
| スポンサードリンク | - | - | pookmark |