INTEREST

---

サイドメニュー カテゴリの折りたたみ

1. 1.タイプ別それぞれの仕様と特徴
   • 1-1.「カテゴリ A」 “統一性”
   • 1-2.「カテゴリ B」 “カスタマイズ性”
   • 1-3.「カテゴリ C」 “シンプルな作り”
   • 1-4.タイプ別 開閉時の動き
2. 2.悩んだ結果...「カテゴリ C」を採用

---

1.タイプ別それぞれの仕様と特徴

まずは、悩みに悩んで実際に設置し、見比べた３タイプそれぞれの仕様と特徴を簡単にまとめてみた。
※それぞれ「カテゴリ A」「カテゴリ B」「カテゴリ C」としています。
※各タイプとも「」や「」のアイコンは、アイコン型Webフォント「Font Awesome 」を利用
「Font Awesome」のページは英語なので使い方が分からない場合は、下記のブログが参考になります。
「これは便利！アイコン型WebフォントのCDN「Font Awesome」 / Webpark 」様

1-1.「カテゴリ A」 “統一性”

「カテゴリ別全記事一覧」と同じ仕様で、カテゴリ名だけを表示し、文字サイズなどをサイドメニューに合わせたタイプ。

下記ブログのページを参考にさせて頂きました。
「カテゴリ別全記事一覧も jQueryで折りたたむ 」
by：hatena chips 様

【 仕様 / 特徴 】
各カテゴリ名の右側に、開閉するボタンが付いており、折りたたんでる状態の時は「+」で、展開すると「-」になる。
また、Cookie（クッキー）を利用し開閉状態を保存する事も出来る上、その保存期間などの設定も可能。
開閉時の動作はアニメーションで速度の調整も可能。
このブログの「カテゴリ別全記事一覧」の表示は結構気に入ってるので、それと統一性が出てイイ感じかな？と思う
※一部表示や仕様は、このブログに合わせて変更してます。

また、このブログのサイドメニュー毎の折りたたみ（開閉）も“hatena chips”様のブログを参考にさせて頂きました。
「サイドメニュー折りたたみをjQueryで 」

---

1-2.「カテゴリ B」 “カスタマイズ性”

FC2ブログ「共有プラグイン」の「Lc.ツリーカテゴリー」を利用し、このブログ用に変更したタイプです。

詳しくは下記ページを参照
「プラグイン Lc.ツリーカテゴリー / Lc-Factory 」様

【 仕様 / 特徴 】
親子カテゴリに対応してるのはもちろんの事、その他とにかく機能が多く、カスタマイズもかなり出来るプラグイン。
単純に親子カテゴリを折りたたむだけなら、HTMLなどの変更や修正は無く、初心者でも扱いやすい。
また、上記のように説明ページも用意されてるので、カスタマイズする際に色々参考にしながら出来るので便利
開閉時の動作は、デフォルトだとアニメーションでは無いので、速度を調整したい場合はソースの書き換えが必要です。
ただ、追加したプラグインの中にHTML・CSS・JavaScriptのソースが全部入ってるので、ソースの書き換えは知識が無いと難しいです。（アイコンの変更や、記事数の表示など主な設定箇所は分かり易くソース内に記載されてます）

---

1-3.「カテゴリ C」 “シンプルな作り”

短いソースコードでシンプルに作られた物に、jQueryを追加してアニメーションで開閉するようにしたタイプ。

下記ブログのページを参考にさせて頂きました。
「親子カテゴリの折りたたみ 」
by：FC2ブログのテンプレート工房 様

【 仕様 / 特徴 】
何と言っても、作りがシンプルで分かり易いので導入も簡単
また、JavaScriptを外部ファイル化する事で、さらにスッキリ

※今回の３タイプの中では、一番初心者さんにも扱い易い作りだと思います。（とにかく簡単に設置したいならイチオシ）

しかし、このタイプは上記２つのタイプとは異なり、1階層目の「親カテゴリ」が、「子カテゴリ」を開閉する為のスイッチに使われてるので、「親カテゴリ」のカテゴリページに移動が出来ません。（まぁ私のブログの場合は、全て「子カテゴリ」に記事を分類してるので、「親カテゴリ」のカテゴリページに移動出来なくても良いかな？とも思ったり... ）
開閉時の動作は、デフォルトだとアニメーションでは無いので “jQuery” でアニメーションで動くように改良しました。

---

1-4.タイプ別 開閉時の動き

表示や開閉時の動きは「こんな感じだったなー」と後々、確認出来るように動画にしてみました。　
※各サムネイルをクリックすると7秒の動画が再生されます。（音は出ません）

---

2.悩んだ結果...「カテゴリ C」を採用

上記３タイプを比べた結果、最終的に「カテゴリ C」のタイプを使う事にしました （とりあえず...）
一番大きな理由は、とにかくシンプルだった事... ｗ　３つのタイプを色々カスタマイズして比べてみましたが、結果的に「カテゴリ C」で表現出来る範囲で十分だったので、それを考えると他のタイプは使わない機能だったり、ソースが複雑だったりしたので、単純に分かり易いのを選んだって感じです...
とは言っても、まだ悩んでる部分もあるし今後のカスタマイズ次第でまた違うタイプにしちゃうかもｗ

ちなみに「カテゴリ C」をアニメーション動作にする為にJavaScriptを下記のように書き換えました。

<script type="text/javascript">
<!--
function showCategory(idno){
cn = ('CategoryNum' + (idno));
if( document.getElementById(cn).style.display == "none" ) {
document.getElementById(cn).style.display = "block";
}
else {
document.getElementById(cn).style.display = "none";
}
}
//-->
</script>

<script type="text/javascript">
<!--
function showCategory(idno){
cn = ('CategoryNum' + (idno));
if( document.getElementById(cn).style.display == "none" ) {
jQuery(document.getElementById(cn)).slideDown(500,function(){
document.getElementById(cn).style.display = "block";
});
}
else {
jQuery(document.getElementById(cn)).slideUp(500,function(){
document.getElementById(cn).style.display = "none";
});
}
}
//-->
</script>

うーむ...それにしても悩むわ...　　ってまだ悩んでる...
ちょっとした違いだし、そもそも中身が無いじゃん!!って感じなんだけどね...(￣∀￣；)