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

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

ただいまの
回答率

87.49%

ハンバーガーメニューが反応しない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 5,379

score 1

前提・実現したいこと

初心者です。
スマホ表示の際にハンバーガーメニューを表示させるようにしたのですが、ハンバーガーメニューのアイコンをクリックしても反応しません。どこを修正したら良いのか分からないため、どなたかご教授頂けると助かります。

※下記のサイトを参考にして制作しました。

スマホ表示 実装サンプル 右上にボタンがあるタイプ :https://125naroom.com/web/2958
PC表示:https://kutarosan.com/header-flex/#codepen

該当のソースコード

<header class="header">
  <div class="header-inner" div id="navArea">
    <div class="flexbox">
      <nav class="nav-global">
      <div class="inner">
        <ul class="flexbox">
          <li><a href="#MESSAGE">MESSAGE</a></li>
          <li><a href="#WORKS">WORKS</a></li>
          <li><a href="#PROFILE">PROFILE</a></li>
          <li><a href="#SKILL">SKILL</a></li>
          <li><a href="#CAREER">CAREER</a></li>
          <li><a href="#CONTACT">CONTACT</a></li>
        </ul>
      </div><!--inner-->
      </nav>
      <div class="toggle_btn">
       <span></span>
       <span></span>
       <span></span>
        </div>
      <div id="mask"></div>
    </div> <!--flexbox-->
  </div> <!--header-inner--> 
</header>
/*PC表示 ナビゲーション*/
header {
  align-items: center;
  background: #ffffff;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
  display: flex;
  padding: 2.8rem 0;
}

header .header-inner{
  margin: auto;
  max-width: 100%;
  width: 1920px;
}

header .flexbox {
  align-items: center;
  display: flex;
  justify-content: center;
}
.nav-global ul {
  list-style :none;
}
.nav-global li {
  margin: 0 15px;
}
.nav-global li:last-child {
  margin-right: 0;
}
.nav-global a {
  color: #C8002E;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
/*スマホ560px未満 ハンバーガーメニュー*/
@media (max-width: 559px){

.nav-global {
    display: none;
}
/*============
nav
=============*/
.nav-global {
  display: block;
  position: fixed;
  top: 0;
  left: -300px;
  bottom: 0;
  width: 300px;
  background: #ffffff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transition: all .5s;
  z-index: 3;
  opacity: 0;
}
.open .nav-global {
  left: 0;
  opacity: 1;
}
.nav-global .inner {
  padding: 25px;
}
.nav-global .inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-global .inner ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #333;
}
.nav-global .inner ul li a {
  display: block;
  color: #333;
  font-size: 14px;
  padding: 1em;
  text-decoration: none;
  transition-duration: 0.2s;
}
.nav-global .inner ul li a:hover {
  background: #e4e4e4;
}
@media screen and (max-width: 767px) {
  nav {
    left: -220px;
    width: 220px;
  }
}
/*============
.toggle_btn
=============*/
.toggle_btn {
  display: block;
  position: fixed;
  right: 30px;
  width: 30px;
  height: 30px;
  transition: all .5s;
  cursor: pointer;
  z-index: 3;
}
.toggle_btn span {
  display: block;
  position: absolute;
  left: 0;
  width: 30px;
  height: 2px;
  background-color: #000000;
  border-radius: 4px;
  transition: all .5s;
}
.toggle_btn span:nth-child(1) {
  top: 4px;
}
.toggle_btn span:nth-child(2) {
  top: 14px;
}
.toggle_btn span:nth-child(3) {
  bottom: 4px;
}
.open .toggle_btn span {
  background-color: #fff;
}
.open .toggle_btn span:nth-child(1) {
  -webkit-transform: translateY(10px) rotate(-315deg);
  transform: translateY(10px) rotate(-315deg);
}
.open .toggle_btn span:nth-child(2) {
  opacity: 0;
}
.open .toggle_btn span:nth-child(3) {
  -webkit-transform: translateY(-10px) rotate(315deg);
  transform: translateY(-10px) rotate(315deg);
}
/*============
#mask
=============*/
#mask {
  display: none;
  transition: all .5s;
}
.open #mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .8;
  z-index: 2;
  cursor: pointer;
}
}
(function($) {
  var $nav   = $('#navArea');
  var $btn   = $('.toggle_btn');
  var $mask  = $('#mask');
  var open   = 'open'; // class
  // menu open close
  $btn.on( 'click', function() {
    if ( ! $nav.hasClass( open ) ) {
      $nav.addClass( open );
    } else {
      $nav.removeClass( open );
    }
  });
  // mask close
  $mask.on('click', function() {
    $nav.removeClass( open );
  });
} )(jQuery);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

jquery読み込んでないのかと思います。
ayaaaaaさんの書いてるjqueryコード(<script></script>)より前に、以下記載すると動くと思います。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/05/11 22:06

    回答ありがとうございます。jqueryコードを入れたのですが、変化無しでした。
    他に考えられる原因はありますか?お手数をおかけしますがよろしくお願いいたします。

    ◎HTML
    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <title>タイトルタイトル</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!--jqueryCDN-->
    <script type="text/javascript" src="lib/hamburger.js"></script><!--hamburger.js読み込み-->
    </head>
    <body>
    <header class="header">
    <div class="header-inner" div id="navArea">
    <div class="flexbox">
    <nav class="nav-global">
    <div class="inner">
    <ul class="flexbox">
    <li><a href="#MESSAGE">MESSAGE</a></li>
    <li><a href="#WORKS">WORKS</a></li>
    <li><a href="#PROFILE">PROFILE</a></li>
    <li><a href="#SKILL">SKILL</a></li>
    <li><a href="#CAREER">CAREER</a></li>
    <li><a href="#CONTACT">CONTACT</a></li>
    </ul>
    </div><!--inner-->
    </nav>
    <div class="toggle_btn">
    <span></span>
    <span></span>
    <span></span>
    </div>
    <div id="mask"></div>
    </div> <!--flexbox-->
    </div> <!--header-inner-->
    </header>
    <section class="MESSAGE" id="MESSAGE"> </section>
    <section class="WORKS" id="WORKS"> </section>
    <section class="PROFILE" id="PROFILE"> </section>
    <section class="SKILL" id="SKILL"> </section>
    <section class="CAREER" id="CAREER"> </section>
    <section class="CONTACT" id="CONTACT"> </section>
    <footer class="footer"> </footer>
    </body>
    </html>

    キャンセル

  • 2020/05/11 22:19

    javascriptの実行のタイミングですね。
    現状</head>の直前にlib/hamburger.jsを読み込んでいますが、これだと、<body>以下が読み込まれる前にjsを実行してしまうのでうまくいかないです。



    解決策は2通りあります。
    ①以下1行の読み込みを、</body>直前に移動する。(htmlが諸々読まれた実行)
    <script type="text/javascript" src="lib/hamburger.js"></script><!--hamburger.js読み込み-->


    ②javascript内で明示的に「htmlが読み込まれたら実行」を記述する。
    lib/hamburger.js内のスクリプトをまるっと以下の中に入れてください。

    $(document).ready(function(){
    //ここにhamburger.jsのスクリプト全てコピペ移動
    });

    キャンセル

  • 2020/05/12 16:25

    ①の方法を試したら上手くいきました。
    ご協力いただきありがとうございました!

    キャンセル

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

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

関連した質問

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