お問い合わせはコチラから

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

サイト運営

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

この記事では、階層ありメニューをTOP階層以外は非表示として、クリックでメニューの開閉を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);

まとめ

昔の無料ブログとかでよく使われていたUIで、今さら感はありますが、今でも現役なので覚えておいて損はないでしょう。

タイトルとURLをコピーしました