JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.style.widthで左からオーバーレイのドロワーメニュー

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

.style.width

JavaScriptの.style.widthで左からオーバーレイのドロワーメニュー

JavaScriptの.style.widthで左からオーバーレイのドロワーメニュー

ヘッダーなどのメニューによく使われるドロワー。この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のブレイクポイントで、スマホの場合中のメニューのフォントサイズなどが切り替わります。