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

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

ただいまの
回答率

89.63%

ハンバーガーメニューが、同一ページ内のリンクでmenuの <li><a href=""></a> に#をつけると閉じなくなってしまう。

解決済

回答 1

投稿

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

Naka-chan

score 1

前提・実現したいこと

ハンバーガーメニューが自動で閉じない、同一ページ内のリンクでmenuの <li><a href=""></a> に#をつけると閉じなくなってしまう。

発生している問題・エラーメッセージ

スマホ用の1ページのサイト用のハンバーガーメニューを作りたいのですが、
メニューをクリックした後、同一ページのためメニューが開きっぱなしになり、これをメニュークリックと同時に閉じるようにしたいのですが、苦戦しています。

様々に紹介されているcss、jQueryをいろいろ実装してみるのですが、
そのままコピペした時(<li><a href="">top</a></li>)はうまく動くのですが、実際にページ内のリンクを
<li><a href="#top">top</a></li>
のように具体的に#アンカー名 を入れるとその場所には飛ぶのですが、メニューが開いたままで閉じなくなってしまいます。

参考にしたサイト 

https://www.aiship.jp/knowhow/archives/31639
https://tech-dig.jp/hamburger-global-nav/

実際の制作サイト

http://isuzukoryu.net/

実際に制作しているサイト

<script>
$(function(){
    $(".btn-gnavi").on("click", function(){
        // ハンバーガーメニューの位置を設定するための変数
        var rightVal = 0;
        if($(this).hasClass("active")) {
            // 「open」クラスを持つ要素はメニューを開いた状態に設定
            rightVal = -300;
            // メニューを開いたら次回クリック時は閉じた状態になるよう設定
            $(this).removeClass("active");
        } else {
            // 「open」クラスを持たない要素はメニューを閉じた状態に設定 (rightVal は0の状態 )
            // メニューを開いたら次回クリック時は閉じた状態になるよう設定
            $(this).addClass("open");
        }

        $("#global-navi").stop().animate({
            right: rightVal
        }, 200);
    });
});
</script>
<div id="wrapper">

    <!--menu-->
<p class="btn-gnavi">
        <span></span>
        <span></span>
        <span></span>
</p> 

<nav id="global-navi">
<ul class="menu">     
  <li><a href="#top">top</a></li>
  <li><a href="#topics">お知らせ</a></li>
  <li><a href="#lesson">教室案内</a></li>
  <li><a href="#about">五十鈴古流のご紹介</a></li>
  <li><a href="#portfolio">作品</a></li>
  <li><a href="#book">写真集</a></li>
  <li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav> 
</div>
#global-navi {min-height:35px;/* */
    background-color:#DB8E71;/*rgba(0,0,0,0.3) */
    position: fixed;
    top: 0;
    right: 0px;
    width: 100%;
    z-index: 2;margin:auto;}
#wrapper nav ul li{
    display:inline-block;
    font-size: 16px;
    padding:10px;
}
#wrapper nav ul li a{color:#fff;text-decoration: none;}
#wrapper a:hover{color:#b22222;}
#wrapper nav ul{  font-size: 0;text-align: center; }


@media screen and (max-width: 980px) {
#wrapper nav {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100%;
    padding-top: 50px;
    background:#333;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 2
}
#wrapper nav ul li {
    display:block;
    padding: 20px 28px
}

#wrapper nav ul li a  {
    text-decoration: none;
    color: #ddd
}

#wrapper .btn-gnavi {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 3;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#wrapper .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 4px;
    background: #666;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}

#wrapper .btn-gnavi span:nth-child(1) {
    top: 0
}

#wrapper .btn-gnavi span:nth-child(2) {
    top: 10px
}

#wrapper .btn-gnavi span:nth-child(3) {
    top: 20px
}

#wrapper .btn-gnavi.open {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}
/*三本線の色 */ 
#wrapper .btn-gnavi.open span {
    background-color: #ddd 
}

#wrapper .btn-gnavi.open span {
    width: 24px;
}
#wrapper .contents section p {
    position: absolute;
    top: 50%;
    width: 30%;
    line-height: 1.4;
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 6px #666
}

#wrapper .contents section:nth-child(odd) p {
    left: 10%
}

#wrapper .contents section:nth-child(even) p {
    right: 10%
}
}

どうか お力をお貸しください(何度も見直していますが初心者ですので、なにかしら基本的なミスがあるかもしれません。)よろしくお願い致します。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

JavaScriptを以下のように修正したら動作すると思うのですが、どうでしょうか?
activeクラスとopenクラス両方使っているのが複雑に思えるので、activeクラスはCSSでも利用していなかったのて、openクラスだけで実装してみました。

$(function() {
  $(".btn-gnavi").on("click", function() {
    // ハンバーガーメニューの位置を設定するための変数
    var rightVal = 0;
    if ($(this).hasClass("open")) {
      // 「open」クラスを持つ要素はメニューを開いた状態に設定
      rightVal = -300;
      // メニューを開いたら次回クリック時は閉じた状態になるよう設定
      $(this).removeClass("open");
    } else {
      // 「open」クラスを持たない要素はメニューを閉じた状態に設定 (rightVal は0の状態 )
      // メニューを開いたら次回クリック時は閉じた状態になるよう設定
      $(this).addClass("open");
    }

    $("#global-navi")
      .stop()
      .animate(
        {
          right: rightVal
        },
        200
      );
  });
});


動くサンプルコードを書きましたので、よろしければ動作確認などしてみてください。
サンプルコード: CodePen

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/02/14 23:47

    ご丁寧にありがとうございます。やってみたのですが、やはりメニューが開いたままアンカーへ着地し、三本線をクリックしないとメニューが閉じません。
    CodePenで作っていただいたサイトも何度も確認しましたがやはりメニューが閉じません。ブラウザーもスマホのChrome、PCのChromeとFOXと試してみましたが結果は変わらずでした。なかなか難しいです。。。

    キャンセル

  • 2020/02/14 23:56

    コメントありがとうございます。
    なるほど、私が思い違いをしていたかもしれません。
    期待している動作は、三本線をクリックしたらメニューが開いて、メニューのリンクをクリックしたらメニューが閉じる、ということでしょうか?
    そうであれば、CodePenのサンプルコードを修正しましたので、ご確認いただけますか?

    キャンセル

  • 2020/02/15 00:07

    これです!まさにこれです!!(涙)ご回答ありがとうございます。もう十数時間もかかりっきりでしたが、これですっきりしました!本当にお礼申し上げます!

    キャンセル

  • 2020/02/15 00:15

    解決できてよかったです!
    サイト制作頑張ってください。
    質問が解決できたと思いますので、解決済みにしておいていただければとおもいます。

    キャンセル

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

  • ただいまの回答率 89.63%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • HTMLに関する質問
  • ハンバーガーメニューが、同一ページ内のリンクでmenuの <li><a href=""></a> に#をつけると閉じなくなってしまう。