メインメニューとそれぞれのメニューに対応したサブメニューがあって、メインメニューをクリックすると対応するサブメニューが表示されるナビゲーションを実装する方法をご紹介いたします。
実際の挙動については、以下デモページをご参照いただければと思います。
このように、サブメニューが切り替わるナビゲーションを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については、環境に合わせてご変更ください。
あとがき
先日、ナビゲーションが複雑な案件があり、上記方法を実装しました。ナビゲーションはシンプルに越したことはないですが、ページ数が多くて階層を深くするよりもサブメニューを切り替えた方が使いやすくなる場合に活用できます。