JavaScriptで作るマウスホバーで開閉するドロップダウンメニューの作り方

JavaScript

<script>” title=”<script>

<script>

今回はよくグローバルナビなどで使われているドロップダウンメニューをJavaScriptで実装していきます。


jQueryで実装した記事はたくさんありますが、JavaScriptを使って実装した記事は少なかったので、備忘録を兼ねて紹介します。

See the Pen BaWqNKR by Makiko Yamada (@makiko-yamada) on CodePen.

ドロップダウンメニューの作り方：HTML編

<body>
<nav>
    <ul class="gnav_wrap">
        <li class="main_menu">
            ホーム
            <ul class="sub_menu">
               <li><a href="#">ホーム1</a></li>
               <li><a href="#">ホーム2</a></li>
               <li><a href="#">ホーム3</a></li>
               <li><a href="#">ホーム4</a></li>
            </ul>
        </li>
        <li class="main_menu">
            サービス
            <ul class="sub_menu">
               <li><a href="#">サービス1</a</li>
               <li><a href="#">サービス2</a</li>
               <li><a href="#">サービス3</a</li>
               <li><a href="#">サービス4</a</li>
            </ul>
        </li>
        <li class="main_menu">
            コンセプト
            <ul class="sub_menu">
               <li><a href="#">コンセプト1</a></li>
               <li><a href="#">コンセプト2</a></li>
               <li><a href="#">コンセプト3</a></li>
               <li><a href="#">コンセプト4</a></li>
            </ul>
        </li>
    </ul>
</nav>
<script src="js/main.js"></script>
</body>

大カテゴリに”main_menu”というクラス、小カテゴリには”sub_menu”というクラスを付けます。

ドロップダウンメニューの作り方：CSS編

@charset "utf_8";

*{
    margin:0;
    padding:0;
}
a{
    color: #fff;
    text-decoration: none;
}
li{
    list-style: none;
}
.gnav_wrap{
    max-width:1000px;
    margin:0 auto;
    display: flex;
    justify-content: center;
}
.main_menu {
    background: #333;
    width: 33.333%;
    text-align: center;
    color: #fff;
    padding: 20px 0;
    cursor: pointer;
    position: relative;
}
.sub_menu{
    position: absolute;
    background: #aaa;
    width: 100%;
    transform: translateY(-500px);
	transition: .5s;
    z-index: -3;
}
.sub_menu>li{
    padding:20px 0;
}
.sub_menu>li:hover{
    background:red;
}
.open{
    transform: translateY(20px);
}

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

const main = document.querySelectorAll(".main_menu");
const item = Array.prototype.slice.call(main,0);

item.forEach(function (element) {
  element.addEventListener("mouseover",function(){
    element.querySelector(".sub_menu").classList.add("open");
  },false);
  element.addEventListener("mouseout",function(){
    element.querySelector(".sub_menu").classList.remove("open");
  },false);
});

次にJavaScriptの作成です。

1つ1つみていきたいと思います。

const main = document.querySelectorAll(".main_menu");

mainという定数を定義し、main_menuというクラスを持ってるHTML要素を全て取得します。

querySelectorAll
指定したセレクタに一致するすべてのHTML要素を取得するメソッド
const item = Array.prototype.slice.call(main,0);

itemという定数を定義し、mainに入っているデータを0番目から配列に変換します。

Array.prototype.slice.call(arguments);
argumentsを配列に変換する呪文
item.forEach(function (element) {}

item配列に入ってる各要素に対して次の関数を実行します。

element.addEventListener("mouseover",function(){
element.querySelector(".sub_menu").classList.add("open");

配列に入っているmain_menuがホバーしたらsub_menuクラスにopenクラスを追加します。

mouseover
カーソルがターゲット内ににホバーした時
querySelector
指定したセレクタに一致する最初のHTML要素を取得するメソッド
classList
特定の要素のクラス名を追加したり、削除したり、参照したりすることが出来るプロパティ
element.addEventListener("mouseout",function(){
element.querySelector(".sub_menu").classList.remove("open");

main_menuの上にあるカーソルが外れたら、openというクラスを削除します。

mouseout
カーソルがターゲットから外れた時

これでJavaScriptでドロップダウンメニューが実装できました。

jQueryの方がコードを短くかけるかと思いますが、ライブラリを読み込む必要があるため、このくらいのコード量の時は、JavaScriptで記述した方がブラウザ上での処理が速くなります。

また今回はJavaScriptの理解を深めるためにもあえてjQueryではなく、JavaScriptを使いました。

JavaScriptは色々な言語のベースとなっているので、しっかりと理解し、ワンランク上のエンジニアを目指しましょう！