スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/33-966e266b

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

サイドメニューのカテゴリ アニメーションでスムーズに開閉するカテゴリ

サイドメニューのカテゴリを改良して、親カテゴリをクリックするとスムーズな動きで子カテゴリが展開し、ツリー表示される仕様に変更♪
ただ親と子のカテゴリを折りたたみにするだけなら、そんなに悩まなかったと思うけど、今回はその折りたたみの動きや、微妙な表示の違いなど...悩みに悩んだ...  その結果、最終的に3タイプに絞って、全部実際に設置して見比べてみたw
毎回の事だけど、微妙なとこで変にこだわってしまうので...w



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


  1. 1.タイプ別それぞれの仕様と特徴
  2. 2.悩んだ結果...「カテゴリ C」を採用



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


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


「カテゴリ A」折りたたみ状態

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


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

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

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



「カテゴリ B」折りたたみ状態

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


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

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

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



「カテゴリ C」折りたたみ状態

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


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

下記ブログのページを参考にさせて頂きました。
親子カテゴリの折りたたみ
by:FC2ブログのテンプレート工房 様
「カテゴリ C」折りたたみ状態
【 仕様 / 特徴 】
何と言っても、作りがシンプルで分かり易いので導入も簡単
また、JavaScriptを外部ファイル化する事で、さらにスッキリ

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

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



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


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

「カテゴリ A」の開閉
 動作:アニメーション
「カテゴリ A」の開閉
「カテゴリ B」の開閉
 動作:デフォルト
「カテゴリ B」の開閉
「カテゴリ C」の開閉
 動作:アニメーション
「カテゴリ C」の開閉




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


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

ちなみに「カテゴリ 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>


うーむ...それにしても悩むわ...  ってまだ悩んでる...
ちょっとした違いだし、そもそも中身が無いじゃん!!って感じなんだけどね...( ̄∀ ̄;)
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-10-04 | JavaScript | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/33-966e266b

「サイドメニューのカテゴリを折りたたみにしてみた」へのトラックバック

- TrackBack -


「サイドメニューのカテゴリを折りたたみにしてみた」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。