シンプルで使いやすいドロワーメニューを作ろう

ボタンをクリックするとドロワーメニューがスライドしてくる方法を紹介します。

TAKU
TAKU

スマホ対応サイトではよく見かけるコンテンツですね!プラグインも多く出回っていますが、自作できるとカスタマイズがきくようになります!

完成系

See the Pen
Drawer-menu
by TAKU HONGO (@taku_webdesign)
on CodePen.

※スマホの場合は、Resultをタップしてください。

ボタンをクリックしてみてください!メニューが右端からスッとスライドしてくるのがわかると思います。

作り方

大枠のクラス「drawer-menu」を作る

前回作ったボタン部分の「openbtn」クラスをさらに囲う、「drawer-menu」クラスを作ります。後でボタンの位置を任意の場所に固定するためです。

<div class="drawer-menu">
  <div class="openbtn">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

ulタグとliタグでメニューの中身を作る

メニューの中身を作ります。「drawer-menu」クラスの中に作るといいでしょう。ulとliにそれぞれクラス名も付けます。

<div class="drawer-menu">
  <div class="openbtn">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul class="nav-area">
    <li class="nav-area-item">Top</li>
    <li class="nav-area-item">About</li>
    <li class="nav-area-item">Works</li>
    <li class="nav-area-item">Contact</li>
  </ul>
</div>

メニューエリアと、メニュー文字をCSSで設定する

ボタンの位置をposition fixedで固定します。今回は右端にしましたが、お好みでtop、right値を変えてください。

.drawer-menu {
  position: fixed;
  top: 10px;
  right: 10px;
}

ul(メニューエリア)のcss設定をします。

.nav-area {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(100%);
  transition: .3s ease;
}

ポイントは、 position fixed、widthとheightを100%にして画面いっぱいに固定しているところと、 transform translateX(100%)で右端に隠しているところです。ちなみに、width値を50%にすると、画面半分がメニューエリアになります。

li(メニューの文字)の、下の余白を指定します。最後の「Contact」に余白はいらないので、疑似クラスlast-childで余白0にしています。

.nav-area-item {
  padding-bottom: 50px;
}

.nav-area-item:last-child {
  padding-bottom: 0;
}

メニューエリアのアニメーション設定をする

「openbtn」クラスに「active」が付与されると、右端に隠していた「nav-area」が表示されるようにします。

.openbtn.active~ul.nav-area {
  transform: translateX(0);
}

これで、ボタンをクリックするとこのようにメニューがスライドするようになります。いろいろカスタマイズして使ってみてください!

タイトルとURLをコピーしました