【jQuery】ドロップダウンメニューの作り方

サンプルサイト

https://ki-hi-ro.com/sample/dropdown-menu/

※ PCで閲覧することを想定しています。

メニューにマウスを当てると、さらにその下に複数のメニューが現れるという仕組みについて解説します。

メニューにマウスを当てる前

f:id:khirok:20200501104608p:plain

当てた時

f:id:khirok:20200501104508p:plain

HTML

<li class="dropdown-trigger">
      会社概要
      <ul class="dropdown">
        <li>沿革</li>
        <li>数字で見る〇〇社</li>
        <li>従業員紹介</li>
      </ul>
</li>

dropdownはもともと非表示にしてある

.dropdown {
    display: none;
}

3つのリストが含まれるdropdownは、最初は隠しておきます。

それと同時にopenを用意します。

.open {
    display: block;
  }

ホバー時のイベントをjQueryで書く

$('.dropdown-trigger').hover(
    function() {
      $(this).children('.dropdown').addClass('open');
    },
    function() {
      $(this).children('.dropdown').removeClass('open');
    }
  );

マウスを当てている時は、openが付与されるので、3つのリストが出現します。そうでない時は、openが外れるので3つのリストが消えます。

位置関係を決める

最初からあるメニューと、マウスを当てた時に出現する3つのリストの位置関係は、以下のように決めました。

.dropdown-trigger {
   position: relative;
  .dropdown {
    position: absolute;
    top: 25px;
    left: 0;
  }
}

以上となります。

最後に、サンプルサイトのソースコードを載せておきます。

SCSSは、Visual Studio codeの拡張機能、Watch Sassを使用して、CSSにコンパイルしました。

冒頭にあるサンプルサイトのソースコード

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>dropdown-menu</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="reset.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="query.js"></script>
  <link rel="shortcut icon" href="favicon.ico">
</head>
<body>
  <ul class="header-list">
    <li>Company</li>
    <li class="dropdown-trigger">
      会社概要
      <ul class="dropdown">
        <li>沿革</li>
        <li>数字で見る〇〇社</li>
        <li>従業員紹介</li>
      </ul>
    </li>
    <li class="dropdown-trigger">
      採用情報
      <ul class="dropdown">
        <li>新卒採用</li>
        <li>中途採用</li>
        <li>業務委託</li>
      </ul>
    </li>
    <li class="dropdown-trigger">
      マイページ
      <ul class="dropdown">
        <li>ログイン</li>
        <li>新規登録</li>
      </ul>
    </li>
  </ul>
</body>
</html>

SCSS

@import "_mixin.scss";
.header-list {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 120px;
}
li {
  list-style: none;
  &:nth-child(1) {
    margin-right: auto;
  }
  &:nth-child(2) {
    @include dropdown-menu;
  }
  &:nth-child(3) {
    @include dropdown-menu;
    padding: 0 120px;
    .dropdown {
      left: 120px;
      li {
        min-width: 0;
      }
    }
  }
  &:nth-child(4) {
    @include dropdown-menu;
    .dropdown {
      li {
        min-width: 100px;
      }
    }
  }
  &:nth-last-child(-n + 3) {
    cursor: pointer;
  }
}

関数を定義したSCSS (_mixin.scss)

@mixin dropdown-menu {
  position: relative;
  .dropdown {
    display: none;
    position: absolute;
    top: 25px;
    left: 0;
    padding: 0;
    padding-top: 20px;
    li {
      background-color: rgba(0,0,0,.2);
      color: #fff;
      margin: 0;
      padding: 15px;
      min-width: 170px;
    }
  }
  .open {
    display: block;
  }
}

jQuery

$(function(){
  $('.dropdown-trigger').hover(
    function() {
      $(this).children('.dropdown').addClass('open');
    },
    function() {
      $(this).children('.dropdown').removeClass('open');
    }
  );
});