配列操作/forEach

clickイベント

element.classList.remove()

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

  hamburgerMenu.classList.toggle('active')
})
// 問題1. セクションをクリックした時にメニューを閉じる処理をJavaScriptで書いてください
const hamburgerMenuSections = document.querySelectorAll(
  '.hamburger-menu-section'
)

hamburgerMenuSections.forEach((hamburgerMenuSection) => {
  hamburgerMenuSection.addEventListener('click', function () {
    hamburgerMenu.classList.remove('active')
    navi.classList.remove('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;
}

.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')

  hamburgerMenu.classList.toggle('active')
})
// 問題1. セクションをクリックした時にメニューを閉じる処理をJavaScriptで書いてください
const hamburgerMenuSections = 


.hamburger-menu {
  display: block;
  width: 80px;
  height: 80px;
  background-color: #008dc9;
  margin: 10px 50px 0 0;
  position: relative;
  top: 0;
  right: 0;
  z-index: 30;
  cursor: pointer;
  transition: 0.4s;
  padding-top: 10px;
}
.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: 28px;
}

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

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

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

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


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

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

background

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

left

クリック部分の実装2

<nav>

<ul>

<li>

idセレクタ

color

position: fixed

text-align

visibility

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

list-style

font-weight

font-size

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

document.querySelector()

document.getElementById()

element.classList.toggle()

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

transform

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

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


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

JavaScript DOM操作コース

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

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