比較的スマホ向けのUIですが、JavaScriptもコードも簡単な記述でできる左から小さめのドロワメニューです。
.addEventListenerのクリック
以下は要素のIDを指定して、クリックイベントを行う時の記述です。
document.getElementById('トリガーになる要素のID').addEventListener('click', () => {
// 処理内容を記述
});このように記述して、いろんな処理内容を中に記述していきます。
ドロワメニューのサンプル
早速ドロワーのサンプルです。ボタンクリックで左からドロワーメニューが開き、ドロワーメニューの「✖️」を選択するとドロワーがフェードアウトします。
全体を覆うオーバーレイじゃないドロワーなので、閉じるには「✖️」をクリックする必要があります。
かかかず
その為ユーザービリティではあまり良くないかもしれません。
サンプルのコード
サンプルのコードはHTML・JavaScript・CSSの3種類です。順に解説していきます。
HTML
HTMLは、大きく分けて「ドロワ」とトリガーになる「ボタン」の2種類です。「mySidepanel」のid名がつく div タグが親要素で、ドロワの中に表示するものはそこに記述していきます。
/* ドロワ */
<div id="mySidepanel" class="sidepanel">
<div id="drawerClose"><span class="lineClose"></span></div>
<nav>
<ul class="panelInner">
<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>
</nav>
</div>
/* ボタン */
<button id="drawerOpen">ドロワメニューを開く</button>サンプルでは、a タグを li のリストタグの中に記述しています。
JavaScript
JavaScriptは、.addEventListener() のクリックイベントで発動する「ボタンクリックでドロワーを開く」と、「✖️クリックでドロワーを閉じる」の2種類です。
document.getElementById('drawerOpen').addEventListener('click', () => {
document.getElementById("mySidepanel").style.width = "300px";
document.getElementById("mySidepanel").style.opacity = "1";
});
document.getElementById('drawerClose').addEventListener('click', () => {
document.getElementById("mySidepanel").style.width = "0";
document.getElementById("mySidepanel").style.opacity = "0";
});「ドロワーを開く」場合は、「mySidepanel」のid名がつく要素を width:300 と opacity:1 で表示させて、反対に「ドロワを閉じる」場合は、width:0 と opacity:0 で非表示にします。
かかかず
CSSのプロパティを操作する処理内容です。
CSS
CSSでは以下の通り簡単な記述です。「✖️」部分は span タグを使い表示させています。
/* drawer */
.sidepanel {
height: 100%;
width: 0;
position: fixed;
z-index: 100000;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 60px;
transition: 0.5s;
filter: drop-shadow(2px 0px 6px #777);
}
ul.panelInner {
padding: 0 25px;
border: none;
list-style: none;
margin: 0;
}
.panelInner li a {
text-decoration: none;
font-size: 1.6rem;
color: #999;
display: block;
}
.sidepanel a:hover {
color: #f1f1f1;
}
.sidepanel #drawerClose {
position: absolute;
top: 5px;
right: 5px;
display: block;
padding: 20px;
cursor: pointer;
}
.lineClose {
display: inline-block;
vertical-align: middle;
color: #aaa;
line-height: 1;
width: 2.5rem;
height: 0.2rem;
background: currentColor;
border-radius: 0.1rem;
position: relative;
transform: rotate(45deg);
transition: 0.2s;
}
.lineClose::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(90deg);
}
.sidepanel #drawerClose:hover > span {
color: #ddd;
}
