サイドメニューを開閉化するカスタマイズ JavaScript

サイドバーに階層のあるメニューを配置した時に、メニューの項目が多いと縦長になってしまうことがあります。特にネットショップで商品カテゴリを並べた時とかにそうなりやすいです。

この記事では、階層ありメニューをTOP階層以外は非表示として、クリックでメニューの開閉をjavascriptで制御するカスタマイズをご紹介します。

この記事で分かること

サイドメニューを開閉化するカスタマイズ
1. HTMLソース
2. JavaScript
まとめ

サイドメニューを開閉化するカスタマイズ

HTMLの必要class

class定義
- 第1階層 ul ：M_layer1
- 第2階層 ul ：M_layer2
- 第3階層 ul ：M_layer3
リスト定義 li
- hrefが必要

HTMLソース

<div id="sideCategory">
    <h2 class="title">Category<span>カテゴリー</span></h2>
    <div class="inner">
    <div id="M_ctgList2">
    <ul class="M_layer1">
        <li><a href="">カテゴリーA</a>
            <ul class="M_layer2" >
                <li><a href="">サブカテゴリA</a>
                    <ul class="M_layer3">
                        <li><a href="/shopbrand/ct106/">項目A</a></li>
                        <li><a href="/shopbrand/ct106/">項目B</a></li>
                        <li><a href="/shopbrand/ct106/">項目C</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul class="M_layer1">
        <li><a href="">カテゴリーB</a>
            <ul class="M_layer2" >
                <li><a href="">サブカテゴリB</a>
                    <ul class="M_layer3">
                        <li><a href="/shopbrand/ct106/">項目A</a></li>
                        <li><a href="/shopbrand/ct106/">項目B</a></li>
                        <li><a href="/shopbrand/ct106/">項目C</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</div>
</div>
</div>

JavaScript

<script>
(function($) {
$(document).ready(function(){
	var sideCategory = $('#sideCategory').get(0);
//console.log(sideCategory);
	$(sideCategory).find('.M_layer3').hide();
	$(sideCategory).find('.M_layer2').hide();
	
	$(sideCategory).find('.M_layer1 > li > a').each(function(){
		$(this).attr('href', 'javascript:void(0)');
		$(this).click(function(){
			var li = $(this).closest('li').get(0);
			var menu = $(li).find('ul.M_layer2').get(0);
			if ($(menu).is(':visible')) {
				$(menu).slideUp(300);
			} else {
				$(menu).slideDown(300);
			}
		});
	});
	$(sideCategory).find('.M_layer2 > li > a').each(function(){
	 	var li = $(this).closest('li').get(0);
		var menu = $(li).find('ul.M_layer3').get(0);
	 	if(typeof menu === 'undefined'){
//子が無い場合は aを残す
	 	}else{
			 $(this).attr('href', 'javascript:void(0)');
	 	 }
		$(this).click(function(){
			li = $(this).closest('li').get(0);
			menu = $(li).find('ul.M_layer3').get(0);
			if ($(menu).is(':visible')) {
				$(menu).slideUp(300);
			} else {
				$(menu).slideDown(300);
			}
		});
	});
	
	var current = $(sideCategory).find('.M_current').get(0);
	$(current).closest('.M_layer3').show();
	$(current).closest('.M_layer2').show();
	
});
})(jQuery);