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

サイドメニューを開閉化するカスタマイズ 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で、今さら感はありますが、今でも現役なので覚えておいて損はないでしょう。

この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/
こんな記事も読まれています

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました