上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
 前回「親子カテゴリの仕組みを解読する」こちらで、親子カテゴリが表示される仕組みが理解できたと思います。

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




カテゴリ番号を利用する



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

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

<div id="category_<%category_no>">カテゴリ1</div>


 これを、「親子カテゴリプラグイン」に組み込めば、以下のような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の子カテゴリ1</a></li>
<li class="sub_list" &align><a href="">5の子カテゴリ2</a></li>
<li class="sub_list" &align><a href="">5の子カテゴリ3</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の子カテゴリ1</a></li>
<li class="sub_list" &align><a href="">10の子カテゴリ2</a></li>
<li class="sub_list" &align><a href="">10の子カテゴリ3</a></li>
<li class="sub_list" &align><a href="">10の子カテゴリ4</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の子カテゴリ1</a></li>
<li class="sub_list" &align><a href="">3の子カテゴリ2</a></li>
<li class="sub_list" &align><a href="">3の子カテゴリ3</a></li>
</ul>
</li>

</ul>




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

<ul class="main_menu">

<!--category-->

<!--category_sub_begin-->(子カテゴリの最初の行)
<button onclick="categoryclick(<%category_no>)">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;

(もし、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>





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

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

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





■整形済みのカテゴリ開閉メニュー作成を計画中です。
折りたたみカテゴリバー
このエントリーをはてなブックマークに追加
Sun.01.16.2011
Comment
Trackback
Comment Form
質問するときは?
  • 不具合が出ているページのURLを書き込む。
  • 使っているブラウザ(IE、Firefoxなど)を書き込む※IE6はサポート外です。
  • 次の人が確認できるように、使っているテンプレートの記事ページ、或いは各カスタマイズ記事ページにコメントを書きこむ。
コメント時の注意
やっぱり自分で解決したい時
特定の記事のみでレイアウトが崩れる場合
全ページでレイアウトが崩れる場合
メールフォーム
Bookmarks
Page Top
Copyright © SAKILab All Rights Reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。