.style.height

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

2022年4月24日 7分

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

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

2022年3月5日JavaScriptの.style.widthで左からオーバーレイのドロワーメニュー

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

.style.height
ボタンクリックで上から落ちてくるメニューのサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.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;
  }
}