サイドバーって何か情報を載せ始めるとごちゃごちゃしてきて分かりづらくなりますよね。
そこで折りたたんですっきり出来るようにしてみようと思います。
完成形のコード
HTML（サイドバー部分）
<div id="sidebar">
<div class="sidetext">
<h4>新着情報</h4>
<div class="sidetextlist">
<ul>
<li><a href="https://swell.dev-lib.work">あいうえお</a></li>
<li><a href="https://swell.dev-lib.work">かきくけこ</a></li>
<li><a href="https://swell.dev-lib.work">さしすせそ</a></li>
<li><a href="https://swell.dev-lib.work">たちつてと</a></li>
<li><a href="https://swell.dev-lib.work">なにぬねの</a></li>
</ul>
</div>
</div><!-- /.sidetext -->
<div class="sidetext">
<h4>ランキング</h4>
<div class="sidetextlist">
<ul>
<li><a href="https://swell.dev-lib.work">あいうえお</a></li>
<li><a href="https://swell.dev-lib.work">かきくけこ</a></li>
<li><a href="https://swell.dev-lib.work">さしすせそ</a></li>
<li><a href="https://swell.dev-lib.work">たちつてと</a></li>
<li><a href="https://swell.dev-lib.work">なにぬねの</a></li>
</ul>
</div>
</div><!-- /.sidetext -->
<div class="sidetext">
<h4>カテゴリー</h4>
<div class="sidetextlist">
<ul>
<li><a href="https://swell.dev-lib.work">あいうえお</a></li>
<li><a href="https://swell.dev-lib.work">かきくけこ</a></li>
<li><a href="https://swell.dev-lib.work">さしすせそ</a></li>
<li><a href="https://swell.dev-lib.work">たちつてと</a></li>
<li><a href="https://swell.dev-lib.work">なにぬねの</a></li>
</ul>
</div>
</div><!-- /.sidetext -->
</div><!-- /#sidebar -->
CSS
#sidebar h4 {
margin-top: 0;
margin-bottom: 10px;
background-color: #04089b;
color: #FFFFFF;
padding: 5px 15px;
cursor: pointer;
}
#sidebar .sidetextlist ul {
padding: 0;
margin-top: 0;
}
#sidebar .sidetextlist li {
list-style: none;
}
jQuery
<script type="text/javascript">
$(function(){
$('#sidebar h4').click(function() {
$("+.sidetextlist", this).slideToggle();
});
$('#sidebar').height($('#sidebar').height());
});
</script>
コードの解説
サイドバーにあるサブタイトル？はH4タグで書きました。
サイドバーにあるH4タグをクリックすると、そのすぐ下にある .sidetextlist のコンテンツが開閉するものです。
個人的なポイントは、以下のセレクタの指定の仕方です。
[aside type=”normal”]$(“+.sidetextlist”, this).slideToggle();[/aside]
第1引数のセレクタは、第2引数のセレクタの子要素や孫要素を指定することになります。
しかし、this (クリックしたH4タグ要素)と、.sidetextlist のブロック要素は親子ではなく横並びです。(兄弟って言うのかな？)
そこでセレクタに + をつけると「次の」という意味になります。
これでクリックした要素の次の要素に対しイベントを追加するということになります。
$(“+.sidetextlist”, “h4″).slideToggle();
のように書くと、どれかH4タグをクリックすると全ての.sidetextlist のブロック要素が開閉してしまいます。
jQueryの6行目
[aside type=”normal”]$(‘#sidebar’).height($(‘#sidebar’).height());[/aside]
このコードは、メインコンテンツよりサイドバーのほうが大きい場合に、開閉するたび画面サイズが動いてしまうため、画面を開いたタイミングでサイドバーの大きさを取得し、固定で高さを指定しています。
HTML、CSSはそれほど難しいことは書いてませんが、H4タグは通常クリックするものでは無いため、CSSの7行目にcursor: pointer; を入れてマウスカーソルが指マークになるようにしています。
まとめ
サイドバーのタイトルをクリックしたら、そのすぐ下の要素が開閉する仕組みを作りました。
これはサイドバーでしか使えないものではありません。
例えばスマホは全て縦並びになるので、重要では無い要素は最初は閉じておいて、クリックすると開くようにしてもよいかもしれません。
日本人は何かとコンパクトに折りたたまれたものが好きなので活用できると思います(笑)
コメント