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

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

ただいまの
回答率

87.36%

ページ内リンクで、sectionに遷移すると、ハンバーガーメニューを閉じるように実装したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 991
退会済みユーザー

退会済みユーザー

前提・実現したいこと

どうしても自己解決が難しかったため、アドバイス頂けますと幸いです。
html.cssでハンバーガーメニューを作っています。

  • シングルページで、「各#sectionにページ内リンクすると、ハンバーガーメニュー(ドロワー)が閉じる」という動作を実現したいです。
    (×から通常の三に戻す)

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

ページ内リンクした時に、メニューを閉じさせたかったため
jQueryで下記を記述したところ、

ページ内リンク後に、ハンバーガーメニューを収束することはできたのですが、
ハンバーガーメニューが「×」になったままで、ハンバーガーメニューをクリックしても配下のメニューが開かないという状態になってしまいました。
(三 ⇄ × 切り替えのcssだけ動作しています。)

該当のソースコード

$('#global-nav ul li a').click(function() {

    /* メニューを収束 */
    $('#global-nav').slideUp(function() {
    });

試したこと

メニューを収束しただけではダメといいますが、絶対何かが足りず、nav-toggleに対してもremoveClassする必要があるのではないか等、
考えたのですが、具体的な解決策を見出せず、ハマってしまいました。

お手数ですが、ご教示頂けますと幸いです。
よろしくお願いいたします。

補足情報

<header id="top-head">
  <div class="inner">
    <div id="mobile-head">
      <h1 class="logo"><img src="images/sample_logo.png" width="142" height="80" alt="logo"></h1>
<div id="nav-toggle">
          <div>
              <span></span>
              <span></span>
              <span></span>
          </div>
      </div>
    </div><!---mobile-head end -->
    <nav id="global-nav" role="navigation">
      <div id="gnav-container">
        <ul id="gnav-ul" class="clearfix">
          <li><a href="#section1">section1</a></li>
          <li><a href="#section2">#section2</a></li>
          <li><a href="#section3">#section3</a></li>
          <li><a href="#section4">#section4</a></li>
        </ul>
      </div>
#global-nav {
      position: absolute;
      top: -500px;
      background: #eeee;
      width: 100%;
      text-align: center;
      padding: 5px 0;
      -webkit-transition: .5s ease-in-out;
      -moz-transition: .5s ease-in-out;
      transition: .5s ease-in-out;
  }
  #global-nav ul {
      list-style: none;
      position: static;
      right: 0;
      bottom: 0;
      font-size: 14px;
  }
  #global-nav ul li {
      float: none;
      position: static;
      padding: 18px 0;
      color: #fff;
  }
  #top-head #global-nav ul li a,
  #top-head.fixed #global-nav ul li a {
      width: 100%;
      display: block;
      color: #333333;
      padding: 18px 0;
  }
  #nav-toggle {
      display: block;
      right: 25px;
      top: 20px;
  }
  /* #nav-toggle 表示切り替え */
  .open #nav-toggle span:nth-child(1) {
      top: 11px;
      -webkit-transform: rotate(315deg);
      -moz-transform: rotate(315deg);
      transform: rotate(315deg);
  }
  .open #nav-toggle span:nth-child(2) {
      width: 0;
      left: 50%;
  }
  .open #nav-toggle span:nth-child(3) {
      top: 11px;
      -webkit-transform: rotate(-315deg);
      -moz-transform: rotate(-315deg);
      transform: rotate(-315deg);
  }
  /* #global-nav メニューをスライド */
  .open #global-nav {
      /* #global-nav top + #mobile-head height */
      -moz-transform: translateY(556px);
      -webkit-transform: translateY(556px);
      transform: translateY(556px);
  }

※ ハンバーガーメニューのスクリプト(追記)

$(function() {
        var $header = $('#top-head');
        // Nav Fixed
        $(window).scroll(function() {
            if ($(window).scrollTop() > 250) {
                $header.addClass('fixed');
            } else {
                $header.removeClass('fixed');
            }
        });
        // Nav Toggle Button
        $('#nav-toggle').click(function(){
            $header.toggleClass('open');
        });
    });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2020/02/26 11:25

    (質問文は編集できます)「ハンバーガーメニュー」のスクリプトも質問文に提示してください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2020/02/26 11:28

    抜けており、失礼いたしました。
    下記になります。よろしくお願い申し上げます。


    ```script
    $(function() {
    var $header = $('#top-head');
    // Nav Fixed
    $(window).scroll(function() {
    if ($(window).scrollTop() > 250) {
    $header.addClass('fixed');
    } else {
    $header.removeClass('fixed');
    }
    });
    // Nav Toggle Button
    $('#nav-toggle').click(function(){
    $header.toggleClass('open');
    });
    });
    ```

    キャンセル

  • azuapricot

    2020/02/26 11:34

    id = top-head が見当たりませんが記載コード足りてますか?

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2020/02/26 11:45

    大変失礼いたしました、質問文のhtmlを修正いたしました。

    キャンセル

回答 1

checkベストアンサー

0

$('#global-nav ul li a').click(function() {
    $('#nav-toggle').trigger('click');
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/02/26 11:57

    kei344さま

    迅速なご回答いただきましてありがとうございます。

    頂いた記述を追加いたしましたところ、ページ内リンク後に、ハンバーガーメニューがしっかりと元の「三」に戻るという動作が確認できましたが、もう一度、ハンバーガーメニューをクリックすると、配下のメニューが表示されないという状態になってしまいました。

    大変お手数をおかけいたしますが、こちらご教示頂けますと幸いでございます。
    どうぞよろしくお願いいたします。

    キャンセル

  • 2020/02/26 12:01

    それであればメニューの開閉を繰り返すだけで表示できなくなっているはずです。提示されているコードがいずれも不完全なので、問題が再現できません。

    キャンセル

  • 2020/02/26 12:35

    kei344さま

    ご教示ありがとうごさいます。

    先ほど、頂いたソースコードを記述の上、
    自分自身で悩んで書いていた、Jqeryを削除しましたところ、
    想定通りに動作させることができました!

    clickをトリガーに、#nav-toggleを動かしているのに、
    #global-navを収束させる記述を書いていてしまったため、
    メニューの開閉を繰り返すようなおかしな動作をしていたのではないかと思いました。

    kei344さまをベストアンサーとさせていただきたいと思います。

    この度はありがとうございました。
    またご機会ありましたら、お力をお貸し頂けますと幸いでございます。




    ```
    $('#global-nav ul li a').click(function() {

    /* メニューを収束 */
    $('#global-nav').slideUp(function() {
    });
    ```

    キャンセル

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

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

関連した質問

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