ハンバーガーメニューのリンクを押して、スクロールするがハンバーガーメニューを閉じることができないです。

◎解決したいこと

ハンバーガーメニューを押した際に出てくる「overlay」の中にある「HTML〜PHP」のliタグを押すと、スクロールして該当のセクションまで移動させることはできました。しかしリンクを押してもハンバーガーメニューが閉じません。

「HTML〜PHP」のliタグのリンクを押すと該当箇所までスクロールし、そしてハンバーガーメニューを同時に閉じるように実装したいです。

◎試したこと

こちらの記事を参考にして

$('#manu a[href]').on('click', function (event) {
        $('.sp-menu').trigger('click');
    });

と自分のコードに当てはめてみましたが、うまくハンバーガーメニューを閉じることができませんでした。

②
overlayクラスの中にある各aタグに

onclick="window.close(); return false;

を入れてみましたが、こちらもうまくいきませんでした。

◎HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/ham.css">
    <title>myham</title>
</head>
<body>
    <header>
        <div class="logo">
            <h1>LOGO</h1>
        </div>


        <div class="pc-menu">
            <nav>
                <ul id="menu">
                    <li>
                        <a href="#html">HTML</a>
                    </li>
                    <li>
                        <a href="#css">CSS</a>
                    </li>
                    <li>
                        <a href="#javaScript">JavaScript</a>
                    </li>
                    <li>
                        <a href="#php">PHP</a>
                    </li>
                </ul>
            </nav>
        </div>

    
        <div class="sp-menu">
            <span class="material-icons" id="open">menu</span>
        </div>
        
    </header>


    <div class="overlay">
        <span class="material-icons" id="close">close</span>
        <nav>
            <ul>
                <li>
                    <a href="#html">HTML</a>
                </li>
                <li>
                    <a href="#css">CSS</a>
                </li>
                <li>
                    <a href="#javaScript">JavaScript</a>
                </li>
                <li>
                    <a href="#php">PHP</a>
                </li>
            </ul>
        </nav>
    </div>



    
    <main>

        <section class="one" id="html">
            <h1>HTMLとは〜</h1>
        </section>

        <section class="two" id="css">
            <h1>CSSとは〜</h1>
        </section>

        <section class="tr" id="javaScript">
            <h1>JavaScriptとは〜</h1>
        </section>

        <section class="four" id="php">
            <h1>PHPとは〜</h1>
        </section>

    </main>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

◎CSSコード

/* ◎ここから */

header {
    display: flex;
    padding: 0 16px;
}

header h1 {
    font-size: 22px;
    font-weight: bold;
    line-height: 64px;
}

.sp-menu {
    margin-left: auto;
}

.sp-menu #open {
    font-size: 32px;
    line-height: 64px;
    cursor: pointer;
}

.sp-menu #open.hide {
    display: none;
}

main {
    padding: 0 16px;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);

    text-align: center;
    padding: 64px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s;
}

.overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.overlay #close {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 32px;
    cursor: pointer;
}

.overlay li {
    padding: 40px 0;
    border-bottom: 2px solid #1a1a1a;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s, transform .3s;
}

.overlay.show li {
    opacity: 1;
    transform: none;
}

.overlay li a {
    color: pink;
    font-size: 30px;
}

.overlay.show li:nth-child(1) {
    transition-delay: .2s;
}
.overlay.show li:nth-child(2) {
    transition-delay: .4s;
}
.overlay.show li:nth-child(3) {
    transition-delay: .6s;
}
.overlay.show li:nth-child(4) {
    transition-delay: .8s;
}











section {
    height: 800px;
    text-align: center;
    padding: 100px 0;
}
.two,
.four
{
    background-color: pink;
}




.pc-menu {
    display: none;
}






@media (min-width: 600px) {
    .pc-menu {
        display: block;
        margin-left: auto;
    }
    .pc-menu ul {
        display: flex;
    }
    .pc-menu a {
        display: block;
        width: 80px;
        line-height: 64px;
        text-align: center;
    color: black;
    }
    .sp-menu {
        display: none;
    }
}




@media (min-width: 600px) {

}

◎JavaScriptコード

"use strict";


{
    const open = document.getElementById('open');
    const overlay = document.querySelector('.overlay');
    const close = document.getElementById('close');


    open.addEventListener('click', () => {
        overlay.classList.add('show');
        open.classList.add('hide');
    });

    close.addEventListener('click', () => {
        overlay.classList.remove('show');
        open.classList.remove('hide');
    });


    $('#manu a[href]').on('click', function (event) {
        $('.sp-menu').trigger('click');
    });


}



// scroll
$(function () {
    $('a[href^="#"]').click(function () {
        var speed = 1000;
        var href = $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({ scrollTop: position }, speed, "swing");
        return false;
    });
});

◎その他
MacbookPro

行動規範の内容に同意します

回答1件

ベストアンサー

私も最初、引っかかりましが、pc用のメニューとsp用のメニューは別にあるので、セレクターが間違ってますね。

下記に修正すればメニューか閉じるようになります。

js
1  $('.overlay a[href]').on('click', function(event) {
2    $('#close').trigger('click');
3  });

投稿2020/09/27 05:15

hatena19

総合スコア33782

退会済みユーザー

2020/09/27 05:37

ありがとうございます！正確に動きました！すごく助かりました！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

ハンバーガーメニューのリンクを押して、スクロールするがハンバーガーメニューを閉じることができないです。

関連した質問