element.classList.toggle()

left

background

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

transform

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


const hamburgerMenu = document.querySelector('.hamburger-menu')

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

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

  // 問題2. クリックイベントを受け取ったときにボタンの表示と非表示を切り替える処理をJavaScriptで書いてください
  hamburgerMenu.classList.toggle('active')
})


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

#hamburger-navigation.active {
  opacity: 1;
  visibility: visible;
}

/* 問題1. ナビゲーションを表示するためのCSSを書いてください */
.hamburger-menu.active span:nth-child(1) {
  top: 40px;
  left: 15px;
  transform: rotate(-45deg);
  background: #fff;
}

.hamburger-menu.active span:nth-child(2),
.hamburger-menu.active span:nth-child(3) {
  top: 40px;
  transform: rotate(45deg);
  background: #fff;
}


const hamburgerMenu = document.querySelector('.hamburger-menu')

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

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

  // 問題2. クリックイベントを受け取ったときにボタンの表示と非表示を切り替える処理をJavaScriptで書いてください

})


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

#hamburger-navigation.active {
  opacity: 1;
  visibility: visible;
}

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


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

<div>

<span>

:hover

opacity

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

クリック部分の実装2

<nav>

<ul>

<li>

idセレクタ

color

position: fixed

text-align

visibility

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

list-style

font-weight

font-size

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

document.querySelector()

document.getElementById()

clickイベント

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

配列操作/forEach

element.classList.remove()

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

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


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

JavaScript DOM操作コース

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

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