カテゴリを折りたたむ

FC2テンプレート作成編

　前回「親子カテゴリの仕組みを解読する」こちらで、親子カテゴリが表示される仕組みが理解できたと思います。

　これと、簡単な「Javaスクリプト」を利用することで、子カテゴリが折りたためる、折りたたみ式カテゴリを作成することが出来ます。

カテゴリ番号を利用する

　FC2用「変数」では、カテゴリに限らず、他の様々な機能でも「番号」を出力するタグがある（記事番号、コメント番号などなど）ため、これをJavaスクリプトで応用することが出来ます。

　スクリプトをある「特定の箇所」で動かすためには、「クリックされたカテゴリはどれか？」という判断が必要。
　変数を使えば、あらかじめ「IDのクラス名」に番号を振らせることが出来ます。

　これを、「親子カテゴリプラグイン」に組み込めば、以下のようなHTMLで出力されますから、これを「DOMの getElementById」で、各カテゴリIDのブロックを表示非表示に切り替えればいいわけです。

【例えば、あるブログではこんな感じでHTML出力される】

<ul class="main_menu">

<li class="main_list" &align>
<a href="">カテゴリ5</a>
<ul class="sub_menu" id="category_5">
<li class="sub_list" &align><a href="">5の子カテゴリ１</a></li>
<li class="sub_list" &align><a href="">5の子カテゴリ２</a></li>
<li class="sub_list" &align><a href="">5の子カテゴリ３</a></li>
</ul>
</li>

<li class="main_list" &align>
<a href="">カテゴリ10</a>
<ul class="sub_menu" id="category_10">
<li class="sub_list" &align><a href="">10の子カテゴリ１</a></li>
<li class="sub_list" &align><a href="">10の子カテゴリ２</a></li>
<li class="sub_list" &align><a href="">10の子カテゴリ３</a></li>
<li class="sub_list" &align><a href="">10の子カテゴリ４</a></li>
</ul>
</li>

<li class="main_list" &align>
<a href="">カテゴリ3</a>
<ul class="sub_menu" id="category_3">
<li class="sub_list" &align><a href="">3の子カテゴリ１</a></li>
<li class="sub_list" &align><a href="">3の子カテゴリ２</a></li>
<li class="sub_list" &align><a href="">3の子カテゴリ３</a></li>
</ul>
</li>

</ul>

　これに、「表示非表示ボタン」「スクリプト制御部分」を加えていくと…

<ul class="main_menu">



（子カテゴリの最初の行）
<button onclick="categoryclick(<%category_no>)">open/close</button>
<ul class="sub_menu" id="category_<%category_no>" style="display:none;">



<li class="main_list" &align>



<li class="main_list" &align>



<li class="sub_list" &align>



<li class="sub_list_end" &align>


<a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>


</li>



</li>



</li>
</ul>
</li>




</ul>
<div id="test"></div>

<script>
function categoryclick(CATEGORYNUMBER){
CATEGORYDISPLAY = document.getElementById("category_"+CATEGORYNUMBER).style.display;

（もし、display が「none」=「4文字」だったら）
if (CATEGORYDISPLAY.length==4) {
document.getElementById("category_"+CATEGORYNUMBER).style.display="block";

（もし、display が「block」≠「4文字」だったら）
} else {
document.getElementById("category_"+CATEGORYNUMBER).style.display="none";
}
}
</script>

少しだけ整形した開閉ボタン付きカテゴリ

カテゴリ開閉ボタン・プレビュー

※プレビュー画像

※フリーエリアにペーストすれば使えます。

<ul class="main_menu">

<!--category-->

  <!--category_sub_begin-->
<button onclick="categoryclick(<%category_no>)" style="font-size:8px;font-family:'arial black';display:block">open/close</button>
    <ul class="sub_menu" id="category_<%category_no>" style="display:none;">
  <!--/category_sub_begin-->

  <!--category_nosub-->
    <li class="main_list" &align>
  <!--/category_nosub-->

  <!--category_parent-->
    <li class="main_list" &align>
  <!--/category_parent-->

  <!--category_sub_hasnext-->
    <li class="sub_list" &align>
  <!--/category_sub_hasnext-->

  <!--category_sub_end-->
    <li class="sub_list_end" &align>
  <!--/category_sub_end-->

    <a href="<%category_link>" title="<%category_name>"><%category_name>(<%category_count>)</a>

  <!--category_nosub-->
    </li>
  <!--/category_nosub-->

  <!--category_sub_hasnext-->
    </li>
  <!--/category_sub_hasnext-->

  <!--category_sub_end-->
    </li>
    </ul>
    </li>
  <!--/category_sub_end-->

<!--/category-->

</ul>
<div id="test"></div>


<script>
function categoryclick(CATEGORYNUMBER){
CATEGORYDISPLAY=document.getElementById("category_"+CATEGORYNUMBER).style.display;
if (CATEGORYDISPLAY.length==4) {
document.getElementById("category_"+CATEGORYNUMBER).style.display="block";
} else {
document.getElementById("category_"+CATEGORYNUMBER).style.display="none";
}
}
</script>

■整形済みのカテゴリ開閉メニュー作成を計画中です。
折りたたみカテゴリバー

Sun.01.16.2011

Page Top

Comment

Trackback

Trackback URL

この記事にトラックバックする(FC2ブログユーザー)

Comment Form

質問するときは？

不具合が出ているページのURLを書き込む。
使っているブラウザ（IE、Firefoxなど）を書き込む※IE6はサポート外です。
次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。

やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム

« PREV Home NEXT »

Title
Font & Icon
Comment
Name
Mail
URL
Password