ニートが学ぶプログラミング

ニートの日記。プログラムのことやら、くだらないこと、思ったことをまとめていきます。頑張って毎日更新するぞぉ_(:3」∠)_ 更新が連続して途切れたら察してください。

長すぎるカテゴリー欄をアニメーションですっきりさせてみた

こんにちは鬱太郎です。ブログを書いているとついつい色々なカテゴリーが増えてしまいますよね?私もそうなんです。カテゴリー数が増えてしまうと、サイドモジュールのカテゴリーが占める割合が大きくなってしまいます。他のモジュールが見えなくなってしまいます。

そんな悩みを解決してみたので記事にしたいと思います。

右のカテゴリー欄にマウスカーソルを合わせると…?

スマホの方はカテゴリー欄のタイトルをタップすると…?

アニメーションで開いたり閉じたりします!

何もしないとカテゴリー欄のサイズが小さくなります。カーソルを合わせると、カテゴリー欄がすべて表示されます。

使い方

下のコードをデザインカスタマイズサイドバーモジュール追加HTMLのコード欄に追加します。タイトルは不要です。一行目はjQueryの読み込みです。既にヘッダー等に同様の記述がある場合は必要ありません。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function(){
 var normalHeight = "300px";
 $(".hatena-module-category").height(normalHeight).css("overflow","hidden").hover(function(e){$(this).animate({height:$(this).get(0).scrollHeight},{duration:"slow"})},function(e){$(this).animate({height:normalHeight},{duration:"slow"})});
})
</script>

f:id:neet-utsu-taro:20171102122037p:plain

私は既にヘッダーにjQueryの読み込み記述があるため、上の画像では同様の記述がありません。注意してください。

var normalHeight = "300px";の数値はタイトルを含んだカテゴリモジュールを表示させる高さです。好きな値に変更してください。

はい。これだけで完成です!簡単ですね!

終わりに

何かと応用がききそうなのでぜひ試してください!何より楽しいです(*'ω'*)

スターやブックマーク、読者登録等いつもありがとうございます!大変励みになっています!

またね('ω')ノ