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

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

ただいまの
回答率

88.92%

ナビゲーションが消える

解決済

回答 1

投稿

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

kyonu

score 1

前提・実現したいこと

画面幅900px以下でハンバーガーメニューが表示されるように設定しています。

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

問題は2つで、1つはハンガーメニューのaボタンを押してから、901px以上に画面幅を広げるとnav-wrapperが消えてしまい、リロードしないと再表示されないことです。
2目は、901px以上の時にaボタンを押し、リロードせずにハンバーガメニューに切り替わると、ページ内リンクはできるのですがnav-wrapperが消えなくなってしまうことです。

この問題を解消したいです。何卒よろしくお願いいたします。

該当のソースコード

    <header>
        <div class="header-inner">
            <h1><a href="">title</a></h1>
            <div class="nav-wrapper">
                <nav class="header-nav">
                    <ul class="nav-ul">
                        <li class="header-list"><a href="#">About</a></li>
                        <li class="header-list"><a href="#work">Work</a></li>
                        <li class="header-list"><a href="">Contact</a></li>
                    </ul>
                </nav>
            </div>

            <div class="nav-btn">
                <span class="btn btn-top"></span>
                <span class="btn btn-mid"></span>
                <span class="btn btn-bottom"></span>
            </div>
        </div>
    </header>
body.noscroll{
  overflow: hidden;
}

header, footer{
    background-color: #1D3FA4;
    color: white;
}

header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
}

.header-list {
    font-size: 20px;
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 70px;
}
.nav-ul {
    width: 250px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-btn {
    display: none;
}

@media screen and (max-width:900px) {
    /* ハンバーガメニュー */
.nav-btn {
    display: block;
    width: 43px;
    height: 43px;
    position: fixed;
    z-index: 3;
    top: 31px;
    right: 22px;
    border: none;
    background-color: #1D3FA4;
    cursor: pointer;
}

.btn {
    width: 30px;
    height: 2px;
    display: block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);      
    background-color: #fff;  
    border-radius: 5px;  
}

.btn-top{   
  top: 13px;
}

.btn-mid{    
  top: 50%;
}

.btn-bottom{
  bottom: 10px;
}

.nav-btn.close .btn-top {
    transform: translate(-50%,10px) rotate(45deg);
    transition: transform .3s;
}

.nav-btn.close .btn-mid{      
  opacity: 0;       
  transition: opacity .3s;    
}   

.nav-btn.close .btn-bottom{      
transform: translate(-50%,-8px) rotate(-45deg);      
transition: transform .3s;    
}

.nav-wrapper {
    display: none;      
    width: 100vw;      
    height: 100vh;      
    position: fixed;      
    top: 0;      
    left: 0;       
    z-index: 2; 
}

.header-nav {
    width: 100%;        
  height: 100%;        
  background-color: #294BB0;        
  z-index: 2;
}

.header-nav, .nav-ul {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.header-nav, .header-list {
    margin-right: 0;        
}

.header-list {
    margin: 70px 0;
    font-size: 28px;
}
}
$('.nav-btn').on('click', function () {
    $('.nav-btn').toggleClass('close');
    $('.nav-wrapper').fadeToggle(300);
    $('body').toggleClass('noscroll');
});
if( $(window).width() <= 900){
$('.header-list > a').on('click', function() {
    $('.nav-wrapper').fadeOut(300);
    $('.nav-btn').removeClass('close');
    $('body').removeClass('noscroll');
}); 
};
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

Javascriptで対処してみました。

    $('.nav-btn').on('click', function () {
        $('.nav-btn').toggleClass('close');
        $('.nav-wrapper').fadeToggle(300);
        $('body').toggleClass('noscroll');
    });
    $('.header-list > a').on('click', function() {
        // ここのif文の位置が変わっています。
        if( $(window).width() <= 900){
            $('.nav-wrapper').fadeOut(300);
            $('.nav-btn').removeClass('close');
            $('body').removeClass('noscroll');
        };
    }); 
    $(window).resize(function() {
        if( $(window).width() <= 900){
            // リサイズされて900px以下なので、ハンバーガーメニュー範囲のサイズ変更
            // メニューを開いたままウィンドウを広げたとき、メニューがXのままになるのを防ぐ
            $('.nav-btn').removeClass('close'); 
            // ハンバーガーメニューを出すのでヘッダは隠す
            $('.nav-wrapper').hide();
        } else {
            // リサイズされて900pxを超えているで、通常ヘッダ
            $('.nav-wrapper').show();           
        }
    })

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/08 19:41

    初めまして!回答ありがとうございます!
    提案していただいたように修正したところ、解決しました!昨日から悩んでいたので、解決策が見つかり安心しました。
    ありがとうございますm(_ _)m

    キャンセル

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

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

関連した質問

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