<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

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

/* 問題2. ハンバーガーメニューボタン(.hamburger-menu)のCSSを書いてください */
.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;
}
/* 問題3. ハンバーガーメニューボタンにカーソルを合わせた時のCSSを書いてください */
.hamburger-menu:hover {
  opacity: 0.5;
}


/* 問題2. ハンバーガーメニューボタン(.hamburger-menu)のCSSを書いてください */
.hamburger-menu {
}
/* 問題3. ハンバーガーメニューボタンにカーソルを合わせた時のCSSを書いてください */


クリック部分の実装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()

clickイベント

element.classList.toggle()

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

transform

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

配列操作/forEach

element.classList.remove()

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

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


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

ハンバーガーメニューを作ろうの総復習クイズ

ハンバーガーメニューを作ろう