JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

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

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptの.style.heightで上から落ちてくるオーバーレイのメニュー

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

.style.height

JavaScriptの.style.heightで上から落ちてくるオーバーレイのメニュー

JavaScriptの.style.heightで上から落ちてくるオーバーレイのメニュー

ドロワメニューは、引き出しのようにサイト内のコンテンツを一覧にできる便利なUIです。

前回は左から出てくるUIでしたが、今回は上からオーバーレイが落ちてくるUIです。

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

是非、参考にしてもらえたら嬉しいです。

.style.height

JavaScriptの .style.height は、要素に代入することで、高さを設定することができるプロパティです。

.style.height の書き方は、以下の通りです。

element.style.height = "高さの数値";

要素の高さはCSSで指定することがほとんどですが、JavaScriptでもこのプロパティを使って要素の高さの設定が可能です。

ボタンクリックで上から落ちてくるメニューのサンプル

サンプルですが、ボタンクリックで落ちてくるように上から下へオーバーレイが表示されます。

表示されたオーバーレイには、閉じるの「✖️」と、リンクの「MENU」が表示されていますが、どれかをクリックするとオーバーレイが非表示になります。

実装の手順と方法

手順と方法

コードの詳細の前に、手順と方法について解説します。

HTMLを記述

はじめに、設置したい場所に以下のHTMLを記述します。

<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 -->

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body> で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

// オーバーレイ表示
document.getElementById('drawerOpen').addEventListener('click', () => {
  document.getElementById("drawerNavi").style.height = "100%";
});

// Xをクリックでオーバーレイ非表示
document.getElementById('drawerClose').addEventListener('click', () => {
  document.getElementById("drawerNavi").style.height = "0%";
});

//ドロワーのメニューをクリックしたらオーバーレイ非表示
const hrefLink = document.querySelectorAll('.overlay-content li');
for (i = 0; i < hrefLink.length; i++) {
hrefLink[i].addEventListener("click", () => {
document.getElementById("drawerNavi").style.height = "0%";
});
}
CSSを記述

最後に、CSSを記述します。コード量が比較的多めにありますが、コピペすればOKです。

.overlay {
  width: 100%;
  height: 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: 15%;
}
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;
  }
}
かかかず
かかかず

これで完了です。

ざっくりとしたコードの解説

コードはHTML・JavaScript・CSSの3つです。順に解説していきます。

HTML

HTMLは、「オーバーレイ」と「表示のトリガーになるボタン」の2種類です。

<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 -->

トリガーにする要素はボタンでなくてもOKですが、その場合は要素のidに「drawerOpen」を付けるようにしましょう。

JavaScript

JavaScriptは、「オーバーレイの表示」「オーバーレイの非表示」「メニューをクリックで非表示」の3種類です。

// オーバーレイ表示
document.getElementById('drawerOpen').addEventListener('click', () => {
  document.getElementById("drawerNavi").style.height = "100%";
});

// Xをクリックでオーバーレイ非表示
document.getElementById('drawerClose').addEventListener('click', () => {
  document.getElementById("drawerNavi").style.height = "0%";
});

//ドロワーのメニューをクリックしたらオーバーレイ非表示
const hrefLink = document.querySelectorAll('.overlay-content li');
for (i = 0; i < hrefLink.length; i++) {
hrefLink[i].addEventListener("click", () => {
document.getElementById("drawerNavi").style.height = "0%";
});
}

3つとも、クリックがトリガーになるコードで、メニュークリックでの非表示は for文 のループで記述しています。

かかかず
かかかず

JavaScriptが不明な方でも、雰囲気で処理内容が追えるような書き方だと思います。

CSS

CSSは、表示されるオーバーレイの記述がほとんどで、767pxのメディアクエリでフォントサイズと「✖️」のサイズが変わります。

.overlay {
  width: 100%;
  height: 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: 15%;
}
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;
  }
}

さいごに

先生

ヘッダー周りのメニューの表示は「ハンバーガー」や「ドロワー」など色々ありますが、CSSだけでなく、JavaScriptを加えて作ると動きが付き、リンククリック時の動きなどいろんなことができるので、非常に便利です。

参考にして見てください。