ハンバーガーメニューが片ページ開かない

Question

２つのHTMLページのどちらにも共通のハンバーガーメニューを付けたいのですが
１つ目のindex.htmlは問題なく作動もするのですが2つ目のmenu.htmlページになると
表示には問題ないのですがハンバーガーが開きません。
全く同じHTMLをindex.htmlとmenu.htmlに記入しています。
cssは長かったので割愛していますが必要であれば載せます。
jsも色々いじってみたのですがうまくいかず。。。

どなたか原因わかる方いらっしゃいましたらアドバイスお願い致します。
よろしくお願いします。

（index.html）
<header id="top-head">
    <div class="inner">
      <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
      <div id="nav_toggle">
        <div>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <nav>
        <ul>
          <li class="menu"><a href="index.html">TOP</a></li>
          <li class="menu"><a href="index.html#news">NEWS</a></li>
          <li class="menu"><a href="index.html#about">ABOUT</a></li>
          <li class="menu"><a href="menu.html">MENU</a></li>
          <li class="menu"><a href="index.html#access">ACCESS</a></li>
          <li>
            <div class="sns1">
              <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
              <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
              <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </header>

(menu.html)
<header id="top-head">
    <div class="inner">
      <a href="index.html"><img src="images/logo.svg" class="logopic" alt="logo"></a>
      <div id="nav_toggle">
        <div>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
      <nav>
        <ul>
          <li class="menu"><a href="index.html">TOP</a></li>
          <li class="menu"><a href="index.html#news">NEWS</a></li>
          <li class="menu"><a href="index.html#about">ABOUT</a></li>
          <li class="menu"><a href="menu.html">MENU</a></li>
          <li class="menu"><a href="index.html#access">ACCESS</a></li>
          <li>
            <div class="sns1">
              <a href=""><img src="images/instagram.svg" class="instagram" alt="instagram"></a>
              <a href=""><img src="images/twitter.svg" class="twitter" alt="twitter"></a>
              <a href=""><img src="images/facebook.svg" class="facebook" alt="facebook"></a>
            </div>
          </li>
        </ul>
      </nav>
    </div>
  </header>

@media screen and (max-width: 770px) {
  #top-head {
    height: 50px;
  }
  .logopic {
    height: 80%;
    width: 80%;
  }

  /*hamburger menu style*/
  #nav_toggle {
    background: #fdfdfd00;
    display: block;
    width: 22px;
    height: 22px;
    position: relative;
    top: 0px;
    z-index: 1000;
  }
  #nav_toggle div {
    position: relative;
  }
  /*hamburger menu close style*/
  #nav_toggle span {
    display: block;
    height: 1px;
    background: #262626;
    position: absolute;
    width: 100%;
    left: 0;
    z-index: 900;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out;
  }
  #nav_toggle span:nth-child(1) {
    top: 0px;
  }
  #nav_toggle span:nth-child(2) {
    top: 10px;
  }
  #nav_toggle span:nth-child(3) {
    top: 20px;
  }
  /*hamburger menu open style*/
  .open #nav_toggle span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
  }
  .open #nav_toggle span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  .open #nav_toggle span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }
  /*nav style*/
  #top-head nav {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: #f8f8f8dd;
    z-index: 800;
  }
  #top-head nav ul {
    display: block;
    width: 100%;
  }
  #top-head nav ul li {
    text-align: center;
    border-bottom: 1px solid #dcdcdc;
  }
  #top-head nav ul li:last-child {
    border: none;
  }
  /*nav link style*/
  #top-head nav ul li a {
    display: block;
    color: #262626;
    padding: 28px; /*列の高さ*/
  }

  .sns1 {
    display: flex;
    justify-content: center;
  }
  .menu a::after {
    content: none;
  }
  .menu a:hover::after {
    content: none;
  }
}

  $('#nav_toggle').click(function(){
    $("#top-head").toggleClass('open');
    $("nav").slideToggle(500);
  });
  //menu link click
  $('nav a').click(function(){
    if(window.innerWidth <= 680){
      $("#top-head").toggleClass('open');
      $("nav").slideToggle(500);
    }
  });
});

Comments

[Lhankor_Mhy]

なんとなくですが、ご提示のコードに原因はないような気がしています。

[mikan23]

ご覧いただきありがとうございます。
そうですか、一応cssも載せます。
もし何かわかりましたらどうぞよろしくお願いします。

[Lhankor_Mhy]

同じコードからは同じ結果が生まれるので、2つのページの差異をご提示いただいた方がいいと思います。

[mikan23]

ハンバーガーメニューの開く部分がnav_taggleだと思うのですが
ここのリンク先がindex.htmlにしか効いていないのでしょうか？

一応css二つとも載せました。

[Lhankor_Mhy]

CSSではないものが載っているようです。

[Lhankor_Mhy]

問題の再現方法なのですが、

① index.htmlを開く
② #nav_toggleをクリックする→メニューが開く
③ メニューをクリックし、menu.htmlに移動する
④ #nav_toggleをクリックする→メニューが開かない

という感じですか？

---

そのとおりである場合、③で移動するのではなくてmenu.htmlを直接開くとどうなるでしょうか？

[mikan23]

大変失礼しました。
html２つとcssとjs記載しました。

＞① index.htmlを開く
② #nav_toggleをクリックする→メニューが開く
③ メニューをクリックし、menu.htmlに移動する
④ #nav_toggleをクリックする→メニューが開かない

おっしゃる通りです。
移動ルートもですが、menu.html直接開いても反応しない状態です。

[Lhankor_Mhy]

なるほど。
あと考えられそうな原因は、ご提示いただいていない部分のタグが#nav_toggleの上に乗っているのでクリックできない、とか……？

いずれにせよ、同じコードからは同じ結果しか生まれないので、少なくとも違いがある部分をご提示いただかないと解決しないと思います。

[mikan23]

そうですよね。

どのあたりが原因なのかが見当がつかないのですが
原因があるとすればHTMLかjsでしょうか？

[Lhankor_Mhy]

たとえば、

menu.html のフッターを削除して#nav_toggleがクリックできない問題が再現するか試す。
問題が再現するするなら、フッターは原因ではない。
問題が再現しなくなったなら、フッターに原因がある。

みたいな感じで、原因がある場所を絞り込んでいくといいと思いますよ。
（複数の要因が絡み合っていると単純にはいかないですが）

[mikan23]

headerでしょうか？
わかりました。もう少しいじってみます。

ご親切にどうもありがとうございました。

[Lhankor_Mhy]

いえ、おそらくheaderに原因はないのではないかな、と思っています。
フッターを挙げたのは例えばの話です。

[Lhankor_Mhy]

蛇足ですが、要素を削除することを試すには実際のコードをいじるのではなくて、デベロッパーツールで要素を選び、そこでデリートキーを押すのが楽です。

[mikan23]

>デベロッパーツールで要素を選び、そこでデリートキーを押すのが楽です。
ありがとうございます。試してみます。

Answer 1

私が記載されいてるコードをコピペして、Chromeで試してみたところ、12行目の閉じカッコの所にsyntax errorが出ていましたので、以下のように、

if(window.innerWidth <= 680){
      $("#top-head").toggleClass('open');
      $("nav").slideToggle(500);
    };

if文の閉じカッコの次にセミコロンを入れたら正常に作動しましたので、やってみてください。

Comments

[mikan23]

コメントありがとうございます。
ご丁寧にありがとうございます。
早速試してみたのですがこちらでは変わりませんでした。
ということは記載していないコードが邪魔している可能性があるということですよね？
もう少し他の部分みてみます。
ちなみにもしお分かりであればハンバーガーメニューの部分をクリックしたら
メニューが出てくるリンク先は下記のどの部分になるのでしょうか？
余計なことをお伺いして申し訳ないですが可能であればお願いします。
//hamburger menu click
$('#nav_toggle').click(function(){
$("#top-head").toggleClass('open');
$("nav").slideToggle(500);
});

[mari.rinn]

ブラウザのキャッシュが残っているからではないでしょうか？
キャッシュをクリアしてみてください。

＞メニューが出てくるリンク先は下記のどの部分になるのでしょうか？

ちょっとご質問の意味（メニューが出てくるリンク先とは？）がよくわからないので、コードの意味をとりあえず書いておきますね。

$('#nav_toggle').click(function()
もしid名nav_toggleの要素がクリックされたら
{

$("#top-head").toggleClass('open');
id名top-headという要素にopenという名前のクラスを付与し、これはきっかけの度に付与と剥奪が切り替わる

$("nav").slideToggle(500);
そして、navという要素が0.5秒かけて降りてくる。これはきっかけの度に降りる、上がるが切り替わる
});

です。ちなみにですが、質問文に記載されてるjQueryのコードの一番上に

$(function(){

というのが来ないといけないのですが、これが抜けてますが、これはここに転載される時にコピーし忘れたということですよね？

[mikan23]

ご丁寧にありがとうございます。
キャッシュをクリアにし他ところできました！
ありがとうございます。

＞$(function(){
こちらはこのサイトに貼り忘れです。失礼しました。