ヘッダーなどのメニューによく使われるドロワー。このUIも数行のJavaScriptのコードで実装できます。
この記事では、ボタンクリックで画面を覆い隠す形のドロワーの作り方について解説します。
.style.width
JavaScriptの .style.width は、要素の「幅（width）」を取得・操作します。
element.style.width = '250px'; 「幅（width）」の指定は、px や ％ など、CSSで使っている単位で指定することが可能です。
ボタンクリックで開くドロワーのサンプル
ボタンクリックで、左側から画面を覆い尽くす「オーバーレイ」のドロワーメニューが開きます。
開いたドロワメニューは、右上の「X」ボタンで閉じることができます。
サンプルのコード
サンプルのコードは、HTML・JavaScript・CSSの3種です。順に解説していきます。
HTML
HTMLは主に2種類で、「drawerNavi」のid名がついた要素がドロワーで開くメニュー。そして、「drawerOpen」のid名がついた button タグがドロワーを開くトリガーになっています。
<div id="drawerNavi" class="overlay">
<div id="drawerClose"><span class="lineClose"></span></div>
<ul class="overlay-content">
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>
</div>
<!-- drawer -->
<button id="drawerOpen">ドロワーを開く</button>
<!-- drawer -->「drawerNavi」のid名がついた要素の中にある「drawerClose」のid名の要素が、メニューを閉じるトリガーになり、その中の要素が閉じるボタンのUIになります。
サンプルの閉じるボタンは、CSSで「X」を作っています。
JavaScript
JavaScriptのコードは簡単な2種類で、ドロワーを開く・閉じるの2つの動作を .addEventListener のクリックで作ります。
document.getElementById('drawerOpen').addEventListener('click', () => {
document.getElementById("drawerNavi").style.width = "100%";
});
document.getElementById('drawerClose').addEventListener('click', () => {
document.getElementById("drawerNavi").style.width = "0%";
});ドロワーを開いた際には、width プロパティを「100％」にして、閉じた際には「0％」にしてオーバーレイさせます。
CSS
CSSは、「オーバーレイ」の要素と、「中のメニュー」「閉じるボタン」の3種でです。
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 99;
left: 0;
top: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
#drawerNavi ul.overlay-content {
padding: 0;
list-style: none;
border: none;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
transform: translateY(-50%);
}
ul.overlay-content li {
padding: 0;
}
.overlay-content li a {
padding: 8px;
text-decoration: none;
font-size: 1.9rem;
color: #707070;
display: block;
transition: 0.3s;
}
.overlay-content li a:hover, .overlay-content li a:focus {
color: #f1f1f1;
}
/* close */
#drawerClose {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
}
#drawerClose:hover {
opacity: 0.8;
}
.lineClose {
display: inline-block;
vertical-align: middle;
color: #FFF;
line-height: 1;
width: 2.5rem;
height: 0.2rem;
background: currentColor;
border-radius: 0.1rem;
position: relative;
transform: rotate(45deg);
}
.lineClose::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: inherit;
border-radius: inherit;
transform: rotate(90deg);
}
@media screen and (max-width: 767px) {
.overlay-content li a {
font-size: 1.7rem;
}
#drawerClose {
font-size: 40px;
top: 15px;
right: 35px;
}
}767pxのブレイクポイントで、スマホの場合中のメニューのフォントサイズなどが切り替わります。
