【jQuery】クリック時に上からするっと降りてくるメニュー

2017-08-16

クリック時に上からするっと降りてくるグローバルメニュー

クリックした時グローバルナビゲーションのサブメニューをどうするか、制作をする上で意外に迷うところです。

下層でさらに選んでもらう形にするのか、単純に縦に降りてくるアコーディオン形式のメニューにするのか、などですね。

あまりに複雑になるとユーザーに負担をかけますし、かといってむやみにメニューは削れない。

そういった時の選択肢の一つとして参考にしていただけたらと思います。

HTML

<nav class="g_nav">
  <ul class="g_nav--menu">
    <li><a href="#">メニュー</a></li>
    <li><a href="#">メニュー2</a></li>
    <li class="g_nav--sub"> <a href="#">メニュー3</a>
      <ul class="g_nav--submenu">
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
    </li>
    <li class="g_nav--sub"> <a href="#">メニュー4</a>
      <ul class="g_nav--submenu">
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
        <li><a href="#">サブメニュー</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

body {
  margin: 0;
  padding: 0;
}

.g_nav {
  background: #078EF6;
  width: 100%;
  height: 50px;
  margin: 0 auto;
}

.g_nav--menu {
  margin: 0;
  list-style: none;
  color: #000;
  padding: 0;
}

.g_nav--menu::after {
  content: "";
  display: block;
  clear: both;
}

.g_nav--menu li {
  float: left;
  width: 25%;
}

.g_nav--menu li:last-child {
  margin-right: 0;
}

.g_nav--menu a {
  line-height: 50px;
  display: block;
  text-decoration: none;
  color: #fff;
  text-align: center;
}

.g_nav--submenu {
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  list-style: none;
}

.g_nav--submenu::after {
  content: "";
  display: block;
  clear: both;
}

.g_nav--submenu li {
  background: rgba(0, 0, 0, 0.7);
  margin: 0;
  padding: 0;
  width: 33.33%;
  float: left;
  text-align: center;
}

jQuery

$(function () {
  $('.g_nav--sub').on('click', function () {
    var click_index = $('.g_nav--sub').index(this);
    $('.g_nav--submenu').stop().slideUp();
    $('.g_nav--submenu:eq(' + click_index + ')').stop().slideToggle();
  });
  $('.g_nav').mouseleave(function () {
    $('.g_nav--submenu').stop().slideUp();
  });
});

ソースは上記の３点です。

ポイントとしては、index()メソッドを利用して何番目のセレクタなのかというのを取得するところ

そして、eq()メソッドを利用して指定するところでしょうか。

jQueryの3行目にvar click_index = $(‘.g_nav–sub’).index(this);と書いています。

ここですが、index()の引数としてthisを設定しています。

そもそも

$('.g_nav--sub').on('click',function(){

このようにイベントハンドラを設定しているのですが、

$(this).index(this);じゃダメなの？と思うかもしれません。

thisの中身はg_nav–subのオブジェクトを指します。

今回indexで取得したい検索したいものはエレメントであってオブジェクトでは無いというところに繋がります。

ですので、thisではなくg_nav–subを指定します。

そしてeq()メソッドでのセレクタの書き方

$('.g_nav--submenu:eq('+ click_index +')')

このように指定しています。

そのままeq(click_index)としてしまうと文字列として扱われますので、一度シングル（もしくはダブル）クォーテーションで区切り+で連結させます。

このようにすればセレクタの中にあるメソッドの引数に対して変数を使用することが出来ます。

サンプルを準備してます。

（メニューの３と４にサブナビゲーションがあるので、そちらをクリックしていただけると動きがわかるかと）

デモ

今回使用したメソッド（わからなかったら検索！）

index();
stop();
slideUp();
eq();
slideToggle();