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

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

クリックでサブメニューを切り替えるナビゲーションを実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

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

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

デモページを見る

このように、サブメニューが切り替わるナビゲーションを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 で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。