メインメニューとそれぞれのメニューに対応したサブメニューがあって、メインメニューをクリックすると対応するサブメニューが表示されるナビゲーションを実装する方法をご紹介いたします。
実際の挙動については、以下デモページをご参照いただければと思います。
このように、サブメニューが切り替わるナビゲーションをjQueryを使って作成します。
クリックでサブメニューを切り替えるナビゲーションを実装する方法
ナビゲーションのHTML
ナビゲーションのHTMLは以下のようにします。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <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は以下のようにします。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 | <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を載せておきます。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | 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については、環境に合わせてご変更ください。
あとがき
先日、ナビゲーションが複雑な案件があり、上記方法を実装しました。ナビゲーションはシンプルに越したことはないですが、ページ数が多くて階層を深くするよりもサブメニューを切り替えた方が使いやすくなる場合に活用できます。