ドロップダウンメニューの作り方 #JavaScript

webサイトなどでよく見るドロップダウンメニューの作り方を自身の備忘のために記録します。
今回は、jQueryを用いて実装します。

まずはHTMLです。jQuery及びJavaScriptもここで読み込んでおきます。

index.html

<body>
 <div id="main">
      <ul class="menu">
        <li>Menu1</li>
        <li>
          Menu2
          <ul class="sub">
            <li><a href="#">Menu2-1</a></li>
            <li><a href="#">Menu2-2</a></li>
          </ul>
        </li>
        <li>
          Menu3
          <ul class="sub">
            <li><a href="#">Menu3-1</a></li>
            <li><a href="#">Menu3-2</a></li>
            <li><a href="#">Menu3-3</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"
    ></script>
    <script src="app.js"></script>

</body>

次にスタイルを整えます。

style.css

#main {
  margin: 100px auto;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: #fff;
}

ul.menu li {
  float: left;
  position: relative;
  margin: 0 0 0 1px;
  padding: 5px;
  width: 200px;
  background: #555555;
  display: block;
}

ul.sub {
  display: none;
  position: absolute;
  margin-left: -6px;
  padding: 0;
}

ul.sub li a {
  padding: 5px 10px;
  margin-left: -5px;
  margin-right: -5px;
  margin-bottom: -5px;
  display: block;
  color: #fff;
}

ul.sub li a:hover {
  background: #ff9900;
  text-decoration: none;
}

そしてこれに対して、JavaScriptを実装していきます。

app.js

$(function() {
  $("ul.menu li").hover(
    function() {
      $("ul.sub:not(:animated)", this).slideDown();
    },
    function() {
      $("ul.sub", this).slideUp();
    }
  );
});

これで完成です。

app.js

$(function(){
  //関数など
}};

このコードを書くことで、DOMの処理が終わってから中の関数などが読み込まれるようになります。
基本的に書くようにしましょう。

また、hoverの扱いに関しては、

app.js

$('button').hover(
    function() {

        //マウスカーソルが重なった時の処理

    },
    function() {

        //マウスカーソルが離れた時の処理

    }
);

のように記述します。

以上です。