質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

javascriptでのハンバーガメニューが動作しない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 614

score 1

・前提、実現したいこと

javascriptでwebサイトのヘッダーを制作しています。
ヘッダーの左側に名前、右側にハンバーガーメニューを作成していて右側のハンバーガーメニューが動作しません。javascriptでの動きをとり入れたハンバーガーメニューを作成しているので上手くいけば、クリックすればメニューが現れるます!

・発生している問題
ハンバーガーメニューをクリックしても全く反応が無く、検証ツールを使ってクリックした瞬間を見てもjavascriptのコードすら反応が無く実装ができない状態です。

・問題が発生するまでの流れ

①ヘッダーを作る(実装できた)
②ページローダを作成
③コードを整える
③完成したので確認作業(クリックできなくなっていた)

【HTML】

<div id="global-container">
  <div id="container">
    <div class="mobile-menu__cover"></div>
    <div class="nav-trigger"></div>
    <header class="header">
      <div class="header__inner">
        <h1 class="header-h1">
          Ren Yamanaka
        </h1>
        <nav class="header__nav">
          <ul class="header__ul">
            <li class="header__li"><a href="#">Story</a></li>
            <li class="header__li"><a href="#">Skills</a></li>
            <li class="header__li"><a href="#">Works</a></li>
            <li class="header__li"><a href="#">Service</a></li><li class="header__li"><a href="#">Contact</a></li>
          </ul>
        </nav>
        <button class="mobile-menu__btn">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
      <nav class="mobile-menu">
        <ul class="mobile-menu__main">
          <li class="mobile-menu__item">
              <a class="mobile-menu__link" href="#m-story">
                  <span class="main-title">Story</span>
                  <span class="sub-title">山中蓮について</span>
              </a>
          </li>
          <li class="mobile-menu__item">
              <a class="mobile-menu__link" href="#m-skills">
                  <span class="main-title">Skills</span>
                  <span class="sub-title">スキルについて</span>
              </a>
          </li>
          <li class="mobile-menu__item">
            <a class="mobile-menu__link" href="#m-works">
                <span class="main-title">Works</span>
                <span class="sub-title">作品について</span>
            </a>
          </li>
          <li class="mobile-menu__item">
            <a class="mobile-menu__link" href="#m-service">
                <span class="main-title">Service</span>
                <span class="sub-title">サービスについて</span>
            </a>
          </li>
          <li class="mobile-menu__item">
            <a class="mobile-menu__link" href="#m-contact">
                <span class="main-title">Contact</span>
                <span class="sub-title">コンタクト方法</span>
            </a>
          </li>
        </ul>
      </nav>
    </header>
  </div>
</div>
<scrip src="mobile-menu.js"></scrip>

【javascript】

class MobileMenu {
    constructor() {
        this.DOM = {};
        this.DOM.btn = document.querySelector('.mobile-menu__btn');
        this.DOM.cover = document.querySelector('.mobile-menu__cover');
        this.DOM.container = document.querySelector('#global-container');
        this.eventType = this._getEventType();
        this._addEvent();
    }

    _getEventType() {
        return window.ontouchstart ? 'touchstart' : 'click';
    }

    _toggle() {
        this.DOM.container.classList.toggle('menu-open');
    }

    _addEvent() {
        this.DOM.btn.addEventListener(this.eventType, this._toggle.bind(this));
        this.DOM.cover.addEventListener(this.eventType, this._toggle.bind(this));
    }
}

new MobileMenu();

【CSS】

body{
  width: 100%;
  margin: 0;
}

#container{
  position: relative;
  background-color: #e0f2f7;
}




/* ヘッダー */


.header-h1{
  font-family: 'Dancing Script', cursive;
  font-weight: 600;
}


.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-color: transparent;
  display: flex;
  align-items: center;
  z-index: 100;
}

.header__inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-right: 160px;
  margin-left: 160px;
}


/* デスクトップ=nav スマホ=btn */
.header__nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
} 

.header__ul{
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
}

.header__li{
  padding: 0;
  margin-left: 20px;
  text-transform: uppercase;
}

.header__li a{
  color: black;
  text-decoration: none;
}




/* ヘッダーをクリックした時のコード */

.mobile-menu {
  position: fixed;
  right: 0;
  top: 60px;
  width: 300px;
}

.mobile-menu__btn {
  background-color: unset;
  border: none;
  outline: none !important;
  cursor: pointer;
}

.mobile-menu__btn > span {
  background-color: black;
  width: 35px;
  height: 2px;
  display: block;
  margin-bottom: 9px;
  -webkit-transition: -webkit-transform 0.7s;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, -webkit-transform 0.7s;
}

.mobile-menu__btn > span:last-child {
  margin-bottom: 0;
}

.mobile-menu__cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  cursor: pointer;
  z-index: 200;
}

.mobile-menu__main {
  padding: 0;
  -webkit-perspective: 2000px;
          perspective: 2000px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.mobile-menu__item {
  list-style: none;
  display: block;
  -webkit-transform: translate3d(0, 0, -1000px);
          transform: translate3d(0, 0, -1000px);
  padding: 0 40px;
  -webkit-transition: opacity 0.2s, -webkit-transform 0.3s;
  transition: opacity 0.2s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.2s;
  transition: transform 0.3s, opacity 0.2s, -webkit-transform 0.3s;
  opacity: 0;
}

.mobile-menu__link {
  display: block;
  margin-top: 30px;
  color: black;
  text-decoration: none;
}






/* クリックした時に左下にずれるようにするコード */

.menu-open #container {
  -webkit-transform: translate(-300px, 60px);
          transform: translate(-300px, 60px);
  -webkit-box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
          box-shadow: 0 8px 40px -10px rgba(0, 0, 0, 0.8);
}

.menu-open .mobile-menu__cover {
  opacity: 1;
  visibility: visible;
}

.menu-open .mobile-menu__item {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.menu-open .mobile-menu__item:nth-child(1) {
  -webkit-transition-delay: 0.07s;
          transition-delay: 0.07s;
}

.menu-open .mobile-menu__item:nth-child(2) {
  -webkit-transition-delay: 0.14s;
          transition-delay: 0.14s;
}

.menu-open .mobile-menu__item:nth-child(3) {
  -webkit-transition-delay: 0.21s;
          transition-delay: 0.21s;
}

.menu-open .mobile-menu__item:nth-child(4) {
  -webkit-transition-delay: 0.28s;
          transition-delay: 0.28s;
}

.menu-open .mobile-menu__item:nth-child(5) {
  -webkit-transition-delay: 0.35s;
          transition-delay: 0.35s;
}

.menu-open .mobile-menu__btn > span {
  background-color: black;
}

.menu-open .mobile-menu__btn > span:nth-child(1) {
  -webkit-transition-delay: 70ms;
          transition-delay: 70ms;
  -webkit-transform: translateY(11px) rotate(135deg);
          transform: translateY(11px) rotate(135deg);
}

.menu-open .mobile-menu__btn > span:nth-child(2) {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transform: translateX(-18px) scaleX(0);
          transform: translateX(-18px) scaleX(0);
}

.menu-open .mobile-menu__btn > span:nth-child(3) {
  -webkit-transition-delay: 140ms;
          transition-delay: 140ms;
  -webkit-transform: translateY(-11px) rotate(-135deg);
          transform: translateY(-11px) rotate(-135deg);
}

.main-title {
  font-weight: 600;
  font-size: 25px;
}

.sub-title {
  display: block;
  font-size: 14px;
  color: #535353;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

typoでしょう

<scrip src="mobile-menu.js"></scrip>
↓↓↓
<script src="mobile-menu.js"></script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/12/06 20:02

    ありがとうございます!!
    解決しました!!

    本当にありがとうございました!
    自分では全く気づけませんでした。泣

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る