ボタンをクリックするとドロワーメニューがスライドしてくる方法を紹介します。
スマホ対応サイトではよく見かけるコンテンツですね!プラグインも多く出回っていますが、自作できるとカスタマイズがきくようになります!
完成系
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);
}
これで、ボタンをクリックするとこのようにメニューがスライドするようになります。いろいろカスタマイズして使ってみてください!