LoginSignup
0
0

More than 3 years have passed since last update.

@sumiiii

[JS]Hamburger menuについて

Posted at

　はじめに

今後さらりと実装できるようになるように順序整理のために
記していきます。

　実装

実装していきます。
iconは↓こちらから取得します。

linkを貼ると、簡単にiconが取得できます。

スクリーンショット 2021-03-22 0.29.57.png

まずは形を作っていきます。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet">

  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <div class="logo">
      <h1>LOGO</h1>
    </div>

    <div class="sp-menu">
      <span class="material-icons" id="open">menu</span>
    </div>
  </header>

  <div class="overlay">
    <span class="material-icons" id="close">close</span>
    <nav>
      <ul>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </nav>
  </div>


  <main>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。
      こんにちは。こんにちは。こんにちは。こんにちは。
    </p>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。
      こんにちは。こんにちは。こんにちは。こんにちは。
    </p>
  </main>

  <script src="js/main.js"></script>
</body>
</html>
css/styles.css
body {
  margin: 0;
  font-family: Verdana, sans-serif;
}

header {
  display: flex;
  padding: 0 16px;
}

header h1 {
  margin: 0;
  font-size: 22px;
  line-height: 64px;
}

/* メニューの位置 */
.sp-menu {
  margin-left: auto;
}

/* menuのicon */
.sp-menu #open {
  font-size: 32px;
  line-height: 64px;
  cursor: pointer;
}

main {
  padding: 0 16px;
}

/* menuの中身の部分 */
.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255,255,255,0.95);
  text-align: center;
  padding: 64px;
}

/* menuの「x」の部分 */
.overlay #close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  cursor: pointer;
}

.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.overlay li {
  margin-top: 24px;
}

Menuたちは上に乗っているイメージ。

スクリーンショット 2021-03-21 19.53.01.png

menuの詳細を最初は「opacity」で隠してあげます。
「pointer-events」でmenuの詳細部分のポインターイベントを受け取らない設定にして、下の部分の「p」の部分に手を加えることができるようになります。

styles.css
.overlay {
  /* 前回記述したところに追加します */
  opacity: 0;
  pointer-events: none;
}

JSを実装していく

js/main.js
'use strict';

{
  const open = document.getElementById('open');
  const overlay = document.querySelector('.overlay');
  const close = document.getElementById('close');

/* 「open」の部分のiconをクリックしたらclassがつく */
  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });

/* 「close」の部分のiconをクリックしたらclassが外れる */
  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    open.classList.remove('hide');
  });
}

cssを追加

classをつけたり外したりする実装をJSで実装したので、
そのクラスをつけたらどのような動きにしたいのかをcssで追加の実装をしていきます。

css/styles.css
/* 追加のものだけ記述しています */

/* 「hide」クラスがつくとmenuのiconが隠れます */
.sp-menu #open.hide {
  display: none;
}

/* アニメーションの部分 */
.overlay {
  /* 他省略 */
  transition: opacity .6s;
}

/* 「show」がついたらする動き */
/* pointer-eventsをつけてあげる */
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay li {
  /* 他省略 */
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
}

/* li:「show」がついたらする動き */
.overlay.show li {
  opacity: 1;
  transform: none;
}

/* 時間差で表示させる */
.overlay.show li:nth-child(1) {
  transition-delay: .1s;
}

.overlay.show li:nth-child(2) {
  transition-delay: .2s;
}

.overlay.show li:nth-child(3) {
  transition-delay: .3s;
}

そうするとこのような動きになります！！

Image from Gyazo

headerに追加

最後に大きさを変えると見た目が変わるように実装していきます。

index.html
<header>
    <div class="logo">
      <h1>LOGO</h1>
    </div>

  <!-- headerにmenuボタンを追加 -->
    <div class="pc-menu">
      <nav>
        <ul>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
        </ul>
      </nav>
    </div>
css/styles.css

/* headerのmenuを隠しておく */
.pc-menu {
  display: none;
}

@media (min-width: 600px) {

/* 600pxからmenuを表示 */
  .pc-menu {
    display: block;
    margin-left: auto;
  }

  .pc-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .pc-menu a {
    display: block;
    width: 80px;
    line-height: 64px;
    text-align: center;
  }

  .pc-menu a:hover {
    background: #f2f2f2;
  }

  .sp-menu {
    display: none;
  }
}

このようにiconになったりmenuの文字が出てきたりと大きさで変わるように設定できました！！

Image from Gyazo

完成！！

完成したものをまとめるとこのような感じになります。

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header>
    <div class="logo">
      <h1>LOGO</h1>
    </div>

    <div class="pc-menu">
      <nav>
        <ul>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
          <li><a href="#">Menu</a></li>
        </ul>
      </nav>
    </div>

    <div class="sp-menu">
      <span class="material-icons" id="open">menu</span>
    </div>
  </header>

  <div class="overlay">
    <span class="material-icons" id="close">close</span>
    <nav>
      <ul>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
        <li><a href="#">Menu</a></li>
      </ul>
    </nav>
  </div>


  <main>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。
      こんにちは。こんにちは。こんにちは。こんにちは。
    </p>
    <p>こんにちは。こんにちは。こんにちは。こんにちは。
      こんにちは。こんにちは。こんにちは。こんにちは。
    </p>
  </main>

  <script src="js/main.js"></script>
</body>
</html>
css/styles.css
body {
  margin: 0;
  font-family: Verdana, sans-serif;
}

header {
  display: flex;
  padding: 0 16px;
}

header h1 {
  margin: 0;
  font-size: 22px;
  line-height: 64px;
}

.sp-menu {
  margin-left: auto;
}

.sp-menu #open {
  font-size: 32px;
  line-height: 64px;
  cursor: pointer;
}

.sp-menu #open.hide {
  display: none;
}

main {
  padding: 0 16px;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(255,255,255,0.95);
  text-align: center;
  padding: 64px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.overlay #close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  cursor: pointer;
}

.overlay ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.overlay li {
  margin-top: 24px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .3s, transform .3s;
}

.overlay.show li {
  opacity: 1;
  transform: none;
}

.overlay.show li:nth-child(1) {
  transition-delay: .1s;
}

.overlay.show li:nth-child(2) {
  transition-delay: .2s;
}

.overlay.show li:nth-child(3) {
  transition-delay: .3s;
}

.pc-menu {
  display: none;
}

@media (min-width: 600px) {
  .pc-menu {
    display: block;
    margin-left: auto;
  }

  .pc-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
  }

  .pc-menu a {
    display: block;
    width: 80px;
    line-height: 64px;
    text-align: center;
  }

  .pc-menu a:hover {
    background: #f2f2f2;
  }

  .sp-menu {
    display: none;
  }
}
js/main.js
'use strict';

{
  const open = document.getElementById('open');
  const overlay = document.querySelector('.overlay');
  const close = document.getElementById('close');

  open.addEventListener('click', () => {
    overlay.classList.add('show');
    open.classList.add('hide');
  });

  close.addEventListener('click', () => {
    overlay.classList.remove('show');
    open.classList.remove('hide');
  });
}

　最後に

アニメーションをもう少し触ってみて動きの幅を広げていきたいと思います！！

お疲れ様でした！！！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0