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

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

ただいまの
回答率

89.99%

ページ内リンクに遷移した際に、ハンバーガーメニューを閉じたい

受付中

回答 1

投稿

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

akipecology

score 4

ハンバーガーメニュー #ページ内リンクに遷移した際にドロワーメニューが消えるようにしたい

下記のjavascriptとCSSを使用して、ハンバーガを開くとブラウザ全体にドロワーメニューが広がるよう実装しました。
しかし、ページ内リンクで遷移した際にドロワーメニューが残ったままになってしまいます。

どなたかご教授いただけないでしょうか。
よろしくお願いいたします。

<header id="headerTop" class="site-header">
 <nav id="globalNav" class="navigation">
    <h1><a href="../index.html"><img src="../img/top/logo.png"  alt=""></a></h1>        
  <div id="nav_toggle">
    <div>
      <span></span>
      <span></span>
       <span></span>
    </div>
  </div>

  <div id="nav">
    <ul class="nav-contents">
     <li class="nav-item"><a href="../index.html">home</a></li>
     <li class="nav-item"><a href="../aboutus/index.html">about us</a></li>
     <li class="nav-item"><a class="nav_pro">product</a></li> 
     <li class="nav-item"><a href="../index.html#info">info</a></li>
     <li class="nav-item"><a href="../index.html#contact">contact</a></li>
       </ul>
   </div>
 </nav>
</header>
Nav{
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

Nav ul{
    display: block;
    }

Nav ul{
    padding: 0;
    }

#globalNav ul li a{
    padding: 0;
    width: 100%;
    }

#nav{
    display: none;
    position: absolute;
    top:0;
    width: 100%;
    height: 100vh;
    background: rgba(255,255,255,0.6);
    left: 0;
    }

header #nav ul{
        display: block;
        width: 100%;
        height: 350px;
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        margin: auto;
            }
header #nav ul li{
        text-align: center;
            }
header #nav ul li:last-child{
        border: none;
    }
header #nav ul li a{
        display: block; 
        color: #333;
    }

/*開閉ボタン*/
#nav_toggle{
        display: block;
        width: 40px;
        height: 40px;
        position: relative;
        top: 20px;
        right: 30px;
        z-index: 99999;
    }

#nav_toggle div {
        position: relative;
    }

#nav_toggle span{
        display: block;
        height: 3px;
        background: #fff;
        position:absolute;
        width: 100%;
        left: 0;
        -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:12px;
    }
#nav_toggle span:nth-child(3){
        top:24px;
    }

/*開閉ボタンopen時*/
.open #nav_toggle span:nth-child(1) {
            top: 12px;
           -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: 12px;
            -webkit-transform: rotate(-135deg);
            -moz-transform: rotate(-135deg);
            transform: rotate(-135deg);
        }    
$(function(){
            $('#nav_toggle').click(function(){
                        $("header").toggleClass('open');
                $("#nav").fadeToggle(500);
                    });            
        });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

これでどうでしょう。

$('#nav a').click( function(){
    $('#nav_toggle').trigger( 'click' );
} );

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/04/05 11:19

    @kei344
    ご返信誠にありがとうございます!
    申し訳ございません。貼り付けたHTMLのソースが、下層ページ(prouctページ)のものでした。大変失礼いたしました。

    topページのHTMLは下記のように記述しております。
    <header id="headerTop" class="site-header">

    <nav id="globalNav" class="navigation">
    <h1><a href="#mainVisual"><img src="img.png" alt=""></a></h1>

    <div id="nav_toggle">
    <div>
    <span></span>
    <span></span>
    <span></span>
    </div>
    </div>
    <div id="nav">
    <ul class="nav-contents">
    <li class="nav-item"><a href="#mainVisual" class="nav_home">home</a></li>
    <li class="nav-item"><a href="aboutus/index.html">about us</a></li>
    <li class="nav-item"><a href="products/index.html">product</a></li>
    <li class="nav-item"><a href="#info">info</a></li>
    <li class="nav-item"><a href="#contact">contact</a></li>
    </ul>
    </div>
    </nav>


    </header>

    キャンセル

  • 2019/04/05 11:24

    現在、ご提示いただいたjsを記述してあるのですが、
    SP版のハンバーガーメニューは、ほぼ正常に動きます。
    ですが、PC版のグローバルナビゲーションの動きがおかしくなってしまいました。
    topページで、グローバルナビゲーションのページ内リンク(”info”と”contact”)をクリックすると、
    他の項目("home","about","product"も全て消えてしまいます。
    どのように対応すれば良いでしょうか。ご多忙中大変恐縮ですがご教示いただけると幸いです。

    キャンセル

  • 2019/04/05 11:27

    ほかのJavaScriptがあるのでは。

    キャンセル

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

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