opacity

visibility

document.querySelector()

document.getElementById()

clickイベント

element.classList.toggle()

<div class="hamburger-menu">
  <span></span>
  <span></span>
  <span></span>
</div>

<nav id="hamburger-navigation">
  <ul class="sections">
    <li class="hamburger-menu-section">
      <a href="#about">About</a>
    </li>
    <li class="hamburger-menu-section">
      <a href="#service">Service</a>
    </li>
    <li class="hamburger-menu-section">
      <a href="#works">Works</a>
    </li>
  </ul>
</nav>


// 問題2. ボタンのクリックイベントを受け取った時の処理をJavaScriptで書いてください
const hamburgerMenu = document.querySelector('.hamburger-menu')

const navi = document.getElementById('hamburger-navigation')

hamburgerMenu.addEventListener('click', function () {
  navi.classList.toggle('active')
})

// 問題3. クリックイベントを受けっとたきにメニューの表示と非表示を切り替えるJavaScriptを書いてください
// hamburgerMenuのクリックイベント内で書いてください


.hamburger-menu {
  display: block;
  width: 80px;
  height: 80px;
  background-color: #008dc9;
  margin: 10px 0 0 0;
  position: relative;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
  transition: 0.4s;
}
.hamburger-menu:hover {
  opacity: 0.5;
}

.hamburger-menu span {
  width: 50px;
  height: 3px;
  background: #fff;
  position: absolute;
  left: 15px;
  transition: 0.4s ease-in-out;
}

.hamburger-menu span:nth-child(1) {
  top: 20px;
}

.hamburger-menu span:nth-child(2) {
  top: 40px;
}

.hamburger-menu span:nth-child(3) {
  top: 60px;
}

#hamburger-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #008dc9;
  color: #fff;
  z-index: 20;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.sections {
  list-style: none;
  margin-top: 180px;
}
.hamburger-menu-section {
  margin-bottom: 40px;
}
a {
  color: #fff;
  font-weight: bold;
  font-size: 32px;
}

/* 問題1. ナビゲーションを表示するためのCSSを書いてください */
#hamburger-navigation.active {
  opacity: 1;
  visibility: visible;
}


// 問題2. ボタンのクリックイベントを受け取った時の処理をJavaScriptで書いてください
const hamburgerMenu = 

const navi = 


// 問題3. クリックイベントを受けっとたきにメニューの表示と非表示を切り替えるJavaScriptを書いてください
// hamburgerMenuのクリックイベント内で書いてください

.hamburger-menu {
  display: block;
  width: 80px;
  height: 80px;
  background-color: #008dc9;
  margin: 10px 0 0 0;
  position: relative;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
  transition: 0.4s;
}
.hamburger-menu:hover {
  opacity: 0.5;
}

.hamburger-menu span {
  width: 50px;
  height: 3px;
  background: #fff;
  position: absolute;
  left: 15px;
  transition: 0.4s ease-in-out;
}

.hamburger-menu span:nth-child(1) {
  top: 20px;
}

.hamburger-menu span:nth-child(2) {
  top: 40px;
}

.hamburger-menu span:nth-child(3) {
  top: 60px;
}

#hamburger-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #008dc9;
  color: #fff;
  z-index: 20;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.sections {
  list-style: none;
  margin-top: 180px;
}
.hamburger-menu-section {
  margin-bottom: 40px;
}
a {
  color: #fff;
  font-weight: bold;
  font-size: 32px;
}

/* 問題1. ナビゲーションを表示するためのCSSを書いてください */


メニューをクリックした時の処理の実装1

<div>

<span>

:hover

display: block

width

height

background-color

margin

margin: 10px 20px 30px 40px;

上記のような場合、余白は上が$(1)px、下が$(2)px、左が$(3)px、右が$(4)pxとなる。

right

z-index

cursor

transition

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

position

クリック部分の実装1

:nth-child()

background

.bg-test {
  background-image: url('./img/test.jpg');
  $(1): $(2);
}

left

クリック部分の実装2

<nav>

<ul>

<li>

idセレクタ

color

position: fixed

text-align

クリック後のナビゲーションの実装1

list-style

font-weight

font-size

クリック後のナビゲーションの実装2

transform

メニューをクリックした時の処理の実装2

配列操作/forEach

element.classList.remove()

セクションをクリックした時のイベント実装

ハンバーガーメニューの構築を学びます。
HTML、CSS、JavaScriptを使って、クリックで展開するナビゲーションとそのアニメーションの実装します。


webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

「ハンバーガーメニューを作ろう」レッスンの総復習クイズです。