サイドドロワーメニューの作り方

目次-Index-

[close]

目次の一つ目
目次の二つ目

TEST:HEAD

目次の三つ目

ドロワーメニューとは

ドロワーメニューはWEBサイトに重ねる形で表示する、UI機能の一つです。主にサイトのデザインや利便性を向上させる目的で活用されています。ドロワーメニューは普段は非表示ですが、ユーザーが選択的に表示させられるのが特徴です。

一般的なのが、横線三本を並列させたアイコンを用意し、これを押すと、リンクメニューが表示されるというものです。このアイコンがハンバーガーに見えるので、ハンバーガーメニューとも呼ばれています。

表示方法はサイドから引っ張り出すようにスライドさせるものが多いでしょう。今回は、左からスライドインし、閉じるボタンを押すと引っ込むタイプにしました。

ドロワーメニューの活用シーン

画面の表示をすっきりさせたい
ユーザビリティーを向上させたい
多機能なサイトを作りたい

ナビゲーションをドロワーメニューにまとめることで、画面上のリンク表示を減らすのが、基本的な使い方と言えます。ナビゲーションが占有していた面積分を使ってイラストなどを表示できるのは強みです。

また、ナビゲーションメニューとは別に、ドロワーメニューを用意しておくこともあります。ユーザーは目に入った方を使って操作できるので、ユーザビリティの向上に役立ちます。

他には多機能なサイトの場合も、ドロワーメニューは親和性が高いのでおすすめです。よく使うメニューを常時表示し、各種設定などのメニューはドロワーメニューに格納することで、普段は非表示にしておきます。これで多機能なサイトでも、画面をしっかりと整理してデザイン性、ユーザービリティできるわけです。

ドロワーメニューの作り方

HTMLとCSSでメニュー画面を作り、スタイル設定でX座標をマイナス方向に指定しておきます。これで画面の表示範囲外に、ドロワーメニューが存在する形になります。

あとはJavascriptで表示用のクラスをオン・オフするだけです。表示用のクラスがオンの場合は、transform: translateXを使って表示範囲に移動させ、オフになると再び、表示範囲外に飛ばしてしまうわけです。

ソースコード

HTML

CSS

#LeftDraw{
display:flex;
width:100%;
height:100%;
position:fixed;
box-sizing:border-box;
Z-index:999;
pointer-events:fill;
}

.LdrawOn{
top:0;
background-color: #00000088!important;
display:block;
Overflow: hidden;
Z-index:999;
opacity:1;
left:0;
}

.LdrawOff{
background-color: #00000088!important;
top:0;
left:-100%;
Z-index:0;
transition:opacity 0.5s;
opacity:0;
width:0%;
}

#LdwMenu{
display: block;
background-color: #fff;
opacity: 0.8!important;
position:fixed;
top:0;
width:300px;
height:100%;
padding:50px 30px;
box-sizing:border-box;
Z-index:1000;
left:-300px;
}

@keyframes aniLFD {
0% {
transform: translateX(0px);
}
100% {
transform: trans
lateX(300px);
}
}

@keyframes aniLFD2 {
0% {
transform: translateX(300px);
}
100% {
transform: translateX(0px);
}
}

.LdwMenuON{
animation: aniLFD 0.5s;
animation-fill-mode:backwards;
transform: translateX(300px);
}

.LdwMenuOff{
animation: aniLFD2 0.5s;
transform: translateX(0px);
}

#LdwCls{
cursor: pointer;
z-index:999;
pointer-events:all;
}

#LdwCls span{
z-index:650;
position:fixed;
transition: all .4s;
left: 314px;
height: 3px;
border-radius: 2px;
background: #ffffff;
width: 18px;
}

#LdwCls span:nth-of-type(1) {
top:20px;
transform: translateY(0px) rotate(-45deg);
}

#LdwCls span:nth-of-type(2) {
top:20px;
transform: translateY(0px) rotate(45deg);
}

#LdwCls:hover span{
background: #af0000;
}

JavaScript

JavaScript

let LFD = document.getElementById("LeftDraw");
let LFDMENU = document.getElementById("LdwMenu");
let LdwCls = document.getElementById("LdwCls");

function LeftDrawer(){
console.log("LeftDrawer");
LFD = document.getElementById("LeftDraw");
LFD.classList.toggle("LdrawOn")
LFD.classList.toggle("LdrawOff")
LFDMENU.classList.toggle("LdwMenuON")
LFDMENU.classList.toggle("LdwMenuOff")

}

LdwCls.addEventListener("click", () => {
LeftDrawer();
});

まとめ

ドロワーメニューのご紹介でした。HTMLのソースコードをBODYタグの真下あたりに貼り付けてください。お役に立てれば幸いです。