ドロワーメニューの実装

ドロワーメニューの実装(実装課題)

---

• 「Menu」をクリックすると

• 新発売・おすすめ・期間限定のドロワーメニューを表示

• 開閉時間の指定は不要

• 「Menu」は、リンクとしての役割は不要

ドロワーメニューの実装（HTML）

---

<li class="header-nav-item" id="js-drawer">
     <a href="#" class="header-nav-link">Menu</a>
</li>

元々のheader-nav-item(Menu)

<ul class="drawer" id="js-menu-drawer">
     <li><a href="#" class="drawer-menu">新発売</a></li>
     <li><a href="#" class="drawer-menu">おすすめ</a></li>
     <li><a href="#" class="drawer-menu">期間限定</a></li>
</ul>

ドロワーメニューで表示させるテキスト

<li class="header-nav-item" id="js-drawer">
     <a href="#" class="header-nav-link">Menu</a>
　　　<ul class="drawer" id="js-menu-drawer">
        <li><a href="#" class="drawer-menu">新発売</a></li>
        <li><a href="#" class="drawer-menu">おすすめ</a></li>
        <li><a href="#" class="drawer-menu">期間限定</a></li>
     </ul>
</li>

元々のheader-nav-item(Menu)の下の階層にリストでドロワーメニューで表示させるテキストを追記。

ドロワーメニューの実装（CSS）

---

#js-drawer {
    position: relative; /* ドロワーメニューの位置を基準に子要素を配置 */
  }

.drawer {
    display: none; 　　　　　　　　　　　 　　　/* 初期状態は非表示 */
    width: 90px; 　　　　　　　　　　　　　 　　/* メニューの幅 */
    height: auto; 　　　　　　　　　　　　　 　 /* 高さは内容に合わせる */
    position: absolute;                    /* 親要素(#js-drawer)を基準に配置 */
    top: 38px;                             /* 親要素から下に38px話す */
    left: -24px;                           /* 親要素から左に24pxずらす */
    padding: 10px;                         /* 内側の余白 */
    background-color: rgba(0, 0, 0, 0.25); /* ドロワーメニューの背景色 */
    color: #fff;                           /* テキストの色 */
    font-size: 12px;                       /* テキストのサイズ */
    line-height: 3;                        /* 行の高さ */
    text-decoration: underline;            /* テキストに下線を引く */
    text-underline-offset: 4px;            /* 下線とテキストの距離 */
  }

.drawerはドロワーメニュー内に当てるCSS

ドロワーメニューの実装（jQuery）

---

$(function () {
  $("#js-drawer").on("click", function (e) {
    e.preventDefault(); //aタグのデフォルトのリンク動作を無効化する
    $("#js-menu-drawer").slideToggle(); //メニューを表示/非表示に切り替える
  });
});

aタグのデフォルトのリンク動作でページトップに移動してしまうため
無効化させるためのe.preventDefault();

まとめ

---

ドロワーメニューの実装ではposition: relative;とposition: absolute;が厄介でした。
親要素と子要素からの相対位置を決めるために必要なのがわかり辛かった。

一先ず、今はドロワーメニューの実装には相対位置が必要で
position: relative;とposition: absolute;を使うという理解でいこう