クリックでサブメニューを切り替えるナビゲーションを実装する方法

クリックでサブメニューを切り替えるナビゲーションを実装する方法

クリックでサブメニューを切り替えるナビゲーションを実装する方法

メインメニューとそれぞれのメニューに対応したサブメニューがあって、メインメニューをクリックすると対応するサブメニューが表示されるナビゲーションを実装する方法をご紹介いたします。

実際の挙動については、以下デモページをご参照いただければと思います。

デモページを見る

このように、サブメニューが切り替わるナビゲーションをjQueryを使って作成します。

スポンサードリンク

クリックでサブメニューを切り替えるナビゲーションを実装する方法

ナビゲーションのHTML

ナビゲーションのHTMLは以下のようにします。


<ul class="main-nav">
 <li><a href="#sub1">メニュー1</a></li>
 <li><a href="#sub2">メニュー2</a></li>
 <li><a href="#sub3">メニュー3</a></li>
 <li><a href="#sub4">メニュー4</a></li>
 <li><a href="#sub5">メニュー5</a></li>
</ul>

<ul class="sub-nav" id="sub1">
 <li><a href="">サブメニュー1</a></li>
 <li><a href="">サブメニュー2</a></li>
 <li><a href="">サブメニュー3</a></li>
 <li><a href="">サブメニュー4</a></li>
 <li><a href="">サブメニュー5</a></li>
</ul>

<ul class="sub-nav" id="sub2">
 <li><a href="">サブメニュー1</a></li>
 <li><a href="">サブメニュー2</a></li>
 <li><a href="">サブメニュー3</a></li>
 <li><a href="">サブメニュー4</a></li>
 <li><a href="">サブメニュー5</a></li>
</ul>

<ul class="sub-nav" id="sub3">
 <li><a href="">サブメニュー1</a></li>
 <li><a href="">サブメニュー2</a></li>
 <li><a href="">サブメニュー3</a></li>
 <li><a href="">サブメニュー4</a></li>
 <li><a href="">サブメニュー5</a></li>
</ul>

<ul class="sub-nav" id="sub4">
 <li><a href="">サブメニュー1</a></li>
 <li><a href="">サブメニュー2</a></li>
 <li><a href="">サブメニュー3</a></li>
 <li><a href="">サブメニュー4</a></li>
 <li><a href="">サブメニュー5</a></li>
</ul>

<ul class="sub-nav" id="sub5">
 <li><a href="">サブメニュー1</a></li>
 <li><a href="">サブメニュー2</a></li>
 <li><a href="">サブメニュー3</a></li>
 <li><a href="">サブメニュー4</a></li>
 <li><a href="">サブメニュー5</a></li>
</ul>

.main-navがメインメニューで、リンク先の「#sub〇」がそれぞれのリンクに対応したサブメニューになります。サブメニューにはリンク先と同じIDを指定しておきましょう。

jQueryの記述

jQueryは以下のようにします。


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function(){
 $(".sub-nav").hide();
 $(".main-nav li a").on("click", function() {
 $(".sub-nav").hide();
 $($(this).attr("href")).fadeToggle();
 if( $("[href^='#']") ){
 $(".main-nav li").removeClass('current');
 $(this).parent().addClass('current');
 return false;
 }
 });
});
</script>

まず、サブメニューを非表示にしておいて、メインメニューのリンクをクリックしたタイミングで、サブメニューを表示するようにしています。他のメインメニューがクリックされたら、対応サブメニュー以外のサブメニューは非表示にします。

さらに、クリックされたメニューには「.current」を追加して、カレント表示をCSSで調整しています。

CSSの調整

ご参考までにデモページのCSSを載せておきます。


ul {
 list-style: none;
 display: flex;
 justify-content: center;
 margin: 0;
 padding: 0;
}

.main-nav {
 background: #bea5d3;
}

#sub1 {
 background: #83DDE3;
}

#sub2 {
 background: #F5A600;
}

#sub3 {
 background: #C4DF11;
}

#sub4 {
 background: #8ADAA6;
}

#sub5 {
 background: #6697D9;
}

li {
 width: 220px;
 text-align: center;
}

li a {
 display: block;
 padding: 15px;
 text-decoration: none;
 font-weight: bold;
 color: #fff;
}

.current a {
 color: #333;
 background: #fff;
}

CSSについては、環境に合わせてご変更ください。

あとがき

先日、ナビゲーションが複雑な案件があり、上記方法を実装しました。ナビゲーションはシンプルに越したことはないですが、ページ数が多くて階層を深くするよりもサブメニューを切り替えた方が使いやすくなる場合に活用できます。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です