单击同一页面上的锚链接时关闭汉堡菜单（在移动视图中）

Question

我使用此 HTML、CSS 和 Javascript 汉堡包菜单代码：在移动视图中，当我单击其中一个时，它不会为我关闭菜单左侧有锚点的其他菜单。它适用于带有 index.html 的第一个。我能做什么？

window.onload = function () {
    window.addEventListener('scroll', function (e) {
        if (window.pageYOffset > 100) {
            document.querySelector("header").classList.add('is-scrolling');
        } else {
            document.querySelector("header").classList.remove('is-scrolling');
        }
    });

    const menu_btn = document.querySelector('.hamburger');
    const mobile_menu = document.querySelector('.mobile-nav');

    menu_btn.addEventListener('click', function () {
        menu_btn.classList.toggle('is-active');
        mobile_menu.classList.toggle('is-active');
    });
}

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Fira Sans', sans-serif}
.container{width:100%;max-width:1600px;margin:0 auto;padding-left:128px;padding-right:128px}@media (max-width: 1024px)
{.container{padding-left:64px;padding-right:64px}}@media (max-width: 767px)
{.container{padding-left:32px;padding-right:32px}}

.hamburger{position:relative;display:block;width:35px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none}
.hamburger .bar,.hamburger:after,.hamburger:before{content:'';display:block;width:100%;height:5px;background-color:#FFF;margin:6px 0px;-webkit-transition:0.4s;transition:0.4s}
.hamburger.is-active:before{-webkit-transform:rotate(-45deg) translate(-8px, 6px);transform:rotate(-45deg) translate(-8px, 6px)}
.hamburger.is-active:after{-webkit-transform:rotate(45deg) translate(-9px, -8px);transform:rotate(45deg) translate(-9px, -8px)}
.hamburger.is-active .bar{opacity:0}
.mobile-nav{position:fixed;top:0;left:100%;width:100%;min-height:100vh;display:block;z-index:98;background-color:#212121;padding-top:160px;-webkit-transition:0.4s;transition:0.4s}
.mobile-nav.is-active{left:0}
.mobile-nav a{display:block;width:100%;max-width:200px;margin:0 auto 16px;text-align:center;padding:12px 16px;background-color:black;color:#FFF;text-decoration:none}
.mobile-nav a:hover{background-color:#000000}@media (min-width: 768px){.mobile-nav{display:none}
.hamburger{display:none}}

section h2{text-align:center;margin-bottom:32px;text-transform:uppercase;color:#313131;font-size:36px}

.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;display:inline-block;color:#FFF;font-size:20px;background-color:#bc1823;padding:12px 16px;border-radius:8px;text-decoration:none;text-transform:uppercase;font-weight:700;cursor:pointer}@media (max-width: 767px)
{.button{font-size:18px}}img{max-width:100%}

header{color:#FFF;position:fixed;top:0;left:0;width:100%;z-index:99}
header .container{padding-top:32px;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
header .container h2{color:inherit;text-transform:uppercase;font-size:32px;font-weight:900}
header .container h2 span{font-weight:600}
header .container nav{display:-ms-grid;display:grid;grid-gap:16px;-ms-grid-columns:(auto);grid-template-columns:repeat(4, auto)}@media (max-width: 767px)
{header .container nav{display:none}}
header .container nav a{color:inherit;font-size:20px;text-decoration:none}
header.is-scrolling{background-color:#000000}
header.is-scrolling .container{padding-top:16px;padding-bottom:16px}

main section.banner{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/header.jpg");background-position:top right;background-size:cover}
main section.banner:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner .container{position:relative;z-index:1}
main section.banner .container h1{font-size:72px;margin-bottom:32px}
main section.banner .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner .container h1{font-size:32px}}
main section.banner .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner .container h3{font-size:20px}}

main section.banner-vorspeise{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-1.jpg");background-position:top right;background-size:cover}
main section.banner-vorspeise:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-vorspeise .container{position:relative;z-index:1}
main section.banner-vorspeise .container h1{font-size:72px;margin-bottom:32px}
main section.banner-vorspeise .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-vorspeise .container h1{font-size:32px}}
main section.banner-vorspeise .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-vorspeise .container h3{font-size:20px}}

main section.banner-hauptgang{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-2.jpg");background-position:top right;background-size:cover}
main section.banner-hauptgang:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-hauptgang .container{position:relative;z-index:1}
main section.banner-hauptgang .container h1{font-size:72px;margin-bottom:32px}
main section.banner-hauptgang .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-hauptgang .container h1{font-size:32px}}
main section.banner-hauptgang .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-hauptgang .container h3{font-size:20px}}

main section.banner-nachtisch{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-3.jpg");background-position:top right;background-size:cover}
main section.banner-nachtisch:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-nachtisch .container{position:relative;z-index:1}
main section.banner-nachtisch .container h1{font-size:72px;margin-bottom:32px}
main section.banner-nachtisch .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-nachtisch .container h1{font-size:32px}}
main section.banner-nachtisch .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-nachtisch .container h3{font-size:20px}}

main section.banner-marinaden{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-4.jpg");background-position:top right;background-size:cover}
main section.banner-marinaden:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-marinaden .container{position:relative;z-index:1}
main section.banner-marinaden .container h1{font-size:72px;margin-bottom:32px}
main section.banner-marinaden .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-marinaden .container h1{font-size:32px}}
main section.banner-marinaden .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-marinaden .container h3{font-size:20px}}

main section.banner-chocoloco{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/rezept-1.jpg");background-position:top right;background-size:cover}
main section.banner-chocoloco:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-chocoloco .container{position:relative;z-index:1}
main section.banner-chocoloco .container h1{font-size:72px;margin-bottom:32px}
main section.banner-chocoloco .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-chocoloco .container h1{font-size:32px}}
main section.banner-chocoloco .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-chocoloco .container h3{font-size:20px}}

main section.banner-teufelskralle{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/vorspeise-2.jpg");background-position:top right;background-size:cover}
main section.banner-teufelskralle:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-teufelskralle .container{position:relative;z-index:1}
main section.banner-teufelskralle .container h1{font-size:72px;margin-bottom:32px}
main section.banner-teufelskralle .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-teufelskralle .container h1{font-size:32px}}
main section.banner-teufelskralle .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-teufelskralle .container h3{font-size:20px}}

main section.banner-lachsröllchen{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/vorspeise-1.jpg");background-position:top right;background-size:cover}
main section.banner-lachsröllchen:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-lachsröllchen .container{position:relative;z-index:1}
main section.banner-lachsröllchen .container h1{font-size:72px;margin-bottom:32px}
main section.banner-lachsröllchen .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-lachsröllchen .container h1{font-size:32px}}
main section.banner-lachsröllchen .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-lachsröllchen .container h3{font-size:20px}}

main section.banner-himbeermousse{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/rezept-2.jpg");background-position:top right;background-size:cover}
main section.banner-himbeermousse:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-himbeermousse .container{position:relative;z-index:1}
main section.banner-himbeermousse .container h1{font-size:72px;margin-bottom:32px}
main section.banner-himbeermousse .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-himbeermousse .container h1{font-size:32px}}
main section.banner-himbeermousse .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-himbeermousse .container h3{font-size:20px}}

main section.banner-lavakuchen{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/header.jpg");background-position:top right;background-size:cover}
main section.banner-lavakuchen:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-lavakuchen .container{position:relative;z-index:1}
main section.banner-lavakuchen .container h1{font-size:72px;margin-bottom:32px}
main section.banner-lavakuchen .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-lavakuchen .container h1{font-size:32px}}
main section.banner-lavakuchen .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-lavakuchen .container h3{font-size:20px}}

main section.banner-himbeervanillemuffin{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/header.jpg");background-position:top right;background-size:cover}
main section.banner-himbeervanillemuffin:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-himbeervanillemuffin .container{position:relative;z-index:1}
main section.banner-himbeervanillemuffin .container h1{font-size:72px;margin-bottom:32px}
main section.banner-himbeervanillemuffin .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-himbeervanillemuffin .container h1{font-size:32px}}
main section.banner-himbeervanillemuffin .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-himbeervanillemuffin .container h3{font-size:20px}}

main section.banner-cannellonidicarne{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/hauptgang-1.jpg");background-position:top right;background-size:cover}
main section.banner-cannellonidicarne:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-cannellonidicarne .container{position:relative;z-index:1}
main section.banner-cannellonidicarne .container h1{font-size:72px;margin-bottom:32px}
main section.banner-cannellonidicarne .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-cannellonidicarne .container h1{font-size:32px}}
main section.banner-cannellonidicarne .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-cannellonidicarne .container h3{font-size:20px}}

main .services{background-color:#EEE}
main .services .container{padding-top:64px;padding-bottom:64px}
main .services .container .services-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr);grid-template-columns:repeat(4, 1fr);grid-gap:16px}@media (max-width: 1024px)
{main .services .container .services-grid{-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px)
{main .services .container .services-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}
main .services .container .services-grid .service{background-color:#FFF;border-radius:16px;overflow:hidden;-webkit-box-shadow:0px 6px 12px rgba(0,0,0,0.1);box-shadow:0px 6px 12px rgba(0,0,0,0.1)}
main .services .container .services-grid .service .img-box{display:block;width:100%;border-bottom:5px solid #bc1823}
main .services .container .services-grid .service .img-box .img{display:block;width:100%;height:128px;-o-object-fit:cover;object-fit:cover}
main .services .container .services-grid .service .content{padding:16px}

main .rezepte{padding-top:64px;padding-bottom:64px}
main .rezepte .rezepte-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr);grid-template-columns:repeat(3, 1fr);grid-gap:16px;margin-bottom:32px}@media (max-width: 768px)
{main .rezepte .rezepte-grid{-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px)
{main .rezepte .rezepte-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}

main .rezepte .rezepte-grid .rezept1{background-image:url("../images/rezept-1.jpg");border-radius:16px;overflow:hidden;background-position: center;background-size:cover;}
main .rezepte .rezepte-grid .rezept1 .content{opacity:0;color:#FFF;padding:16px;background-color:rgba(0, 0, 0, 0.8);-webkit-transition:0.4s;transition:0.4s}
main .rezepte .rezepte-grid .rezept1 .content h3{font-size:32px;margin-bottom:16px}@media (max-width: 1024px)
{main .rezepte .rezepte-grid .rezept1 .content h3{font-size:28px}}
main .rezepte .rezepte-grid .rezept1 .content p{font-size:18px;margin-bottom:16px}@media (max-width: 1024px)
{main .rezepte .rezepte-grid .rezept1 .content p{font-size:16px}}
main .rezepte .rezepte-grid .rezept1:hover .content{opacity:1}

main .rezepte .rezepte-btn{text-align:center}

main .anleitung{padding-top:64px;padding-bottom:64px}
main .anleitung .anleitung-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr);grid-gap:16px;margin-bottom:32px}@media (max-width: 768px)
{main .anleitung .anleitung-grid{-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px)
{main .anleitung .anleitung-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}
main .anleitung .anleitung-grid .zutaten{border-radius:16px;position: center}
main .anleitung .anleitung-grid .zutaten .content{color:black;padding:16px}
main .anleitung .anleitung-grid .zutaten .content h3{font-size:20px;margin-bottom:16px}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content h3{font-size:16px}}
main .anleitung .anleitung-grid .zutaten .content p{font-size:16px;margin-bottom:16px}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content p{font-size:14px}}
main .anleitung .anleitung-grid .zutaten .content ul{font-size:16px;margin-bottom:16px; margin-left: 15px;}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content ul{font-size:14px}}
main .anleitung .anleitung-grid .zutaten .content ol{list-style-type:decimal;font-size:16px;margin-bottom:16px; margin-left: 15px;}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content ol{font-size:14px}}
main .anleitung p{font-size:16px;margin-bottom:16px}@media (max-width: 1024px)
{main .anleitung p{font-size:14px}}

main .about{background-color:#000000}
main .about .container{padding-top:64px;padding-bottom:64px;}
main .about .container p{color:#FFF}
main .about .container h2{color:#FFF}
main .about .container .img_about {display: flex;justify-content: center;}
main .about .container .img_about img{display:flex;width: 25%;position: center}

/*# sourceMappingURL=main.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DertropfendeKessel</title>

    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700&display=swap" rel="stylesheet"/> 

    
    <link rel="stylesheet" href="./assets/css/main.css" />
</head>
<body>
    <header>
        <div class="container">
            <h2><span>Der tropfende</span> Kessel</h2>
            <img src="./assets/images/icon_dfk_tw.png" alt="icon" class="img" width="72px" height="72px" />
            <nav>
                <a href="index.html">Home</a>
                <a href="#Küche">Küche</a>
                <a href="#Rezepte">Rezepte</a>
                <a href="#me">Über mich</a>
            </nav>
            <button class="hamburger">
                <div class="bar"></div>
            </button>
        </div>
    </header>
    <nav class="mobile-nav">
        <a href="index.html">Home</a>
        <a href="#Küche">Küche</a>
        <a href="#Rezepte">Rezepte</a>
        <a href="#me">Über mich</a>
    </nav>
    <main>
        <section class="banner">
            <div class="container">
                
                <h3>Discover the world of cuisine</h3>

                <a href="#Küche" class="button">Find out more</a>
                <a name="Küche"></a>
            </div>
        </section>

        <section id="services" class="services">
            <div class="container">
                <h2>Küche</h2>
                <br><br>
                <div class="services-grid">

                    <div class="service">
                        <figure class="img-box">
                            <a href="vorspeise.html">
                            <img src="./assets/images/service-1.jpg" alt="Website Service" class="img" />
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Vorspeise</h3>
                        </div>
                    </div>

                    <div class="service">
                        <figure class="img-box">
                            <a href="hauptgang.html">
                            <img src="./assets/images/service-2.jpg" alt="App Service" class="img"/>
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Hauptgang</h3>
                        </div>
                    </div>
                    
                    <div class="service">
                        <figure class="img-box">
                            <a href="nachtisch.html">
                            <img src="./assets/images/service-3.jpg" alt="Games Service" class="img"/>
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Nachtisch</h3>
                        </div>
                    </div>

                    <div class="service">
                        <figure class="img-box">
                            <a href="marinaden.html">
                            <img src="./assets/images/service-4.jpg" alt="Mentoring Service" class="img"/>
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Marinaden</h3>
                            <a name="Rezepte"></a>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        
        <section class="rezepte" id="rezepte">
            <div class="container">
                <h2>Rezepte</h2>
                <div class="rezepte-grid">
                    <div class="rezept1">
                        <div class="content">
                            <h3>Choco loco</h3>
                            <a href="chocoloco.html" class="button">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="rezepte-btn">
                    <a href="#Küche" class="button">View more</a>
                    <a name="me"></a>
                </div>
            </div>
        </section>
        <br>
        <section class="about" id="about">
            <div class="container">
                <h2>Über mich</h2>
                <br>
                <div class="img_about">
                    <img src="./assets/images/logo_about_dtk.jpg" alt="logo_about_dtk" class="img" />
                </div>
            </div>
        </section>
    </main>
    <script src="./assets/js/main.js"></script>
</body>
</html>

我是否必须为 Javascript 指定另一个代码？如果需要，指定哪个代码？

Answer 1

您可以使用自定义 javascript 功能来关闭您的汉堡包菜单选项，如下所示：

const mobile_menu_anchors = document.querySelectorAll('nav.mobile-nav > a');

mobile_menu_anchors.forEach(anchor => {
    anchor.addEventListener('click', event => {
        menu_btn.classList.remove('is-active');
        mobile_menu.classList.remove('is-active');
    });
});

Don't forget to marked as answer if this is what you are looking for! Thanks.

window.onload = function () {
    window.addEventListener('scroll', function (e) {
        if (window.pageYOffset > 100) 
            document.querySelector("header").classList.add('is-scrolling');
         else 
            document.querySelector("header").classList.remove('is-scrolling');
    });

    const menu_btn = document.querySelector('.hamburger');
    const mobile_menu = document.querySelector('.mobile-nav');

    menu_btn.addEventListener('click', function () {
        menu_btn.classList.toggle('is-active');
        mobile_menu.classList.toggle('is-active');
    });
    
    const mobile_menu_anchors = document.querySelectorAll('nav.mobile-nav > a');
    
    mobile_menu_anchors.forEach(anchor => {
    anchor.addEventListener('click', event => {
        menu_btn.classList.remove('is-active');
        mobile_menu.classList.remove('is-active');
    });
}); 
}

*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:'Fira Sans', sans-serif}
.container{width:100%;max-width:1600px;margin:0 auto;padding-left:128px;padding-right:128px}@media (max-width: 1024px)
{.container{padding-left:64px;padding-right:64px}}@media (max-width: 767px)
{.container{padding-left:32px;padding-right:32px}}

.hamburger{position:relative;display:block;width:35px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;outline:none;border:none}
.hamburger .bar,.hamburger:after,.hamburger:before{content:'';display:block;width:100%;height:5px;background-color:#FFF;margin:6px 0px;-webkit-transition:0.4s;transition:0.4s}
.hamburger.is-active:before{-webkit-transform:rotate(-45deg) translate(-8px, 6px);transform:rotate(-45deg) translate(-8px, 6px)}
.hamburger.is-active:after{-webkit-transform:rotate(45deg) translate(-9px, -8px);transform:rotate(45deg) translate(-9px, -8px)}
.hamburger.is-active .bar{opacity:0}
.mobile-nav{position:fixed;top:0;left:100%;width:100%;min-height:100vh;display:block;z-index:98;background-color:#212121;padding-top:160px;-webkit-transition:0.4s;transition:0.4s}
.mobile-nav.is-active{left:0}
.mobile-nav a{display:block;width:100%;max-width:200px;margin:0 auto 16px;text-align:center;padding:12px 16px;background-color:black;color:#FFF;text-decoration:none}
.mobile-nav a:hover{background-color:#000000}@media (min-width: 768px){.mobile-nav{display:none}
.hamburger{display:none}}

section h2{text-align:center;margin-bottom:32px;text-transform:uppercase;color:#313131;font-size:36px}

.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;outline:none;background:none;display:inline-block;color:#FFF;font-size:20px;background-color:#bc1823;padding:12px 16px;border-radius:8px;text-decoration:none;text-transform:uppercase;font-weight:700;cursor:pointer}@media (max-width: 767px)
{.button{font-size:18px}}img{max-width:100%}

header{color:#FFF;position:fixed;top:0;left:0;width:100%;z-index:99}
header .container{padding-top:32px;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
header .container h2{color:inherit;text-transform:uppercase;font-size:32px;font-weight:900}
header .container h2 span{font-weight:600}
header .container nav{display:-ms-grid;display:grid;grid-gap:16px;-ms-grid-columns:(auto);grid-template-columns:repeat(4, auto)}@media (max-width: 767px)
{header .container nav{display:none}}
header .container nav a{color:inherit;font-size:20px;text-decoration:none}
header.is-scrolling{background-color:#000000}
header.is-scrolling .container{padding-top:16px;padding-bottom:16px}

main section.banner{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/header.jpg");background-position:top right;background-size:cover}
main section.banner:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner .container{position:relative;z-index:1}
main section.banner .container h1{font-size:72px;margin-bottom:32px}
main section.banner .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner .container h1{font-size:32px}}
main section.banner .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner .container h3{font-size:20px}}

main section.banner-vorspeise{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-1.jpg");background-position:top right;background-size:cover}
main section.banner-vorspeise:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-vorspeise .container{position:relative;z-index:1}
main section.banner-vorspeise .container h1{font-size:72px;margin-bottom:32px}
main section.banner-vorspeise .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-vorspeise .container h1{font-size:32px}}
main section.banner-vorspeise .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-vorspeise .container h3{font-size:20px}}

main section.banner-hauptgang{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-2.jpg");background-position:top right;background-size:cover}
main section.banner-hauptgang:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-hauptgang .container{position:relative;z-index:1}
main section.banner-hauptgang .container h1{font-size:72px;margin-bottom:32px}
main section.banner-hauptgang .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-hauptgang .container h1{font-size:32px}}
main section.banner-hauptgang .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-hauptgang .container h3{font-size:20px}}

main section.banner-nachtisch{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-3.jpg");background-position:top right;background-size:cover}
main section.banner-nachtisch:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-nachtisch .container{position:relative;z-index:1}
main section.banner-nachtisch .container h1{font-size:72px;margin-bottom:32px}
main section.banner-nachtisch .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-nachtisch .container h1{font-size:32px}}
main section.banner-nachtisch .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-nachtisch .container h3{font-size:20px}}

main section.banner-marinaden{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/service-4.jpg");background-position:top right;background-size:cover}
main section.banner-marinaden:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-marinaden .container{position:relative;z-index:1}
main section.banner-marinaden .container h1{font-size:72px;margin-bottom:32px}
main section.banner-marinaden .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-marinaden .container h1{font-size:32px}}
main section.banner-marinaden .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-marinaden .container h3{font-size:20px}}

main section.banner-chocoloco{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/rezept-1.jpg");background-position:top right;background-size:cover}
main section.banner-chocoloco:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-chocoloco .container{position:relative;z-index:1}
main section.banner-chocoloco .container h1{font-size:72px;margin-bottom:32px}
main section.banner-chocoloco .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-chocoloco .container h1{font-size:32px}}
main section.banner-chocoloco .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-chocoloco .container h3{font-size:20px}}

main section.banner-teufelskralle{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/vorspeise-2.jpg");background-position:top right;background-size:cover}
main section.banner-teufelskralle:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-teufelskralle .container{position:relative;z-index:1}
main section.banner-teufelskralle .container h1{font-size:72px;margin-bottom:32px}
main section.banner-teufelskralle .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-teufelskralle .container h1{font-size:32px}}
main section.banner-teufelskralle .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-teufelskralle .container h3{font-size:20px}}

main section.banner-lachsröllchen{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/vorspeise-1.jpg");background-position:top right;background-size:cover}
main section.banner-lachsröllchen:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-lachsröllchen .container{position:relative;z-index:1}
main section.banner-lachsröllchen .container h1{font-size:72px;margin-bottom:32px}
main section.banner-lachsröllchen .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-lachsröllchen .container h1{font-size:32px}}
main section.banner-lachsröllchen .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-lachsröllchen .container h3{font-size:20px}}

main section.banner-himbeermousse{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/rezept-2.jpg");background-position:top right;background-size:cover}
main section.banner-himbeermousse:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-himbeermousse .container{position:relative;z-index:1}
main section.banner-himbeermousse .container h1{font-size:72px;margin-bottom:32px}
main section.banner-himbeermousse .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-himbeermousse .container h1{font-size:32px}}
main section.banner-himbeermousse .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-himbeermousse .container h3{font-size:20px}}

main section.banner-lavakuchen{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/header.jpg");background-position:top right;background-size:cover}
main section.banner-lavakuchen:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-lavakuchen .container{position:relative;z-index:1}
main section.banner-lavakuchen .container h1{font-size:72px;margin-bottom:32px}
main section.banner-lavakuchen .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-lavakuchen .container h1{font-size:32px}}
main section.banner-lavakuchen .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-lavakuchen .container h3{font-size:20px}}

main section.banner-himbeervanillemuffin{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/header.jpg");background-position:top right;background-size:cover}
main section.banner-himbeervanillemuffin:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-himbeervanillemuffin .container{position:relative;z-index:1}
main section.banner-himbeervanillemuffin .container h1{font-size:72px;margin-bottom:32px}
main section.banner-himbeervanillemuffin .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-himbeervanillemuffin .container h1{font-size:32px}}
main section.banner-himbeervanillemuffin .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-himbeervanillemuffin .container h3{font-size:20px}}

main section.banner-cannellonidicarne{color:#FFF;position:relative;min-height:100vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-image:url("../images/hauptgang-1.jpg");background-position:top right;background-size:cover}
main section.banner-cannellonidicarne:after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;background-color:#000000;opacity:0.7}
main section.banner-cannellonidicarne .container{position:relative;z-index:1}
main section.banner-cannellonidicarne .container h1{font-size:72px;margin-bottom:32px}
main section.banner-cannellonidicarne .container h1 span{color:#bc1823}@media (max-width: 767px)
{main section.banner-cannellonidicarne .container h1{font-size:32px}}
main section.banner-cannellonidicarne .container h3{font-size:36px;font-weight:400;margin-bottom:32px}@media (max-width: 767px)
{main section.banner-cannellonidicarne .container h3{font-size:20px}}

main .services{background-color:#EEE}
main .services .container{padding-top:64px;padding-bottom:64px}
main .services .container .services-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr);grid-template-columns:repeat(4, 1fr);grid-gap:16px}@media (max-width: 1024px)
{main .services .container .services-grid{-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px)
{main .services .container .services-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}
main .services .container .services-grid .service{background-color:#FFF;border-radius:16px;overflow:hidden;-webkit-box-shadow:0px 6px 12px rgba(0,0,0,0.1);box-shadow:0px 6px 12px rgba(0,0,0,0.1)}
main .services .container .services-grid .service .img-box{display:block;width:100%;border-bottom:5px solid #bc1823}
main .services .container .services-grid .service .img-box .img{display:block;width:100%;height:128px;-o-object-fit:cover;object-fit:cover}
main .services .container .services-grid .service .content{padding:16px}

main .rezepte{padding-top:64px;padding-bottom:64px}
main .rezepte .rezepte-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr);grid-template-columns:repeat(3, 1fr);grid-gap:16px;margin-bottom:32px}@media (max-width: 768px)
{main .rezepte .rezepte-grid{-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px)
{main .rezepte .rezepte-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}

main .rezepte .rezepte-grid .rezept1{background-image:url("../images/rezept-1.jpg");border-radius:16px;overflow:hidden;background-position: center;background-size:cover;}
main .rezepte .rezepte-grid .rezept1 .content{opacity:0;color:#FFF;padding:16px;background-color:rgba(0, 0, 0, 0.8);-webkit-transition:0.4s;transition:0.4s}
main .rezepte .rezepte-grid .rezept1 .content h3{font-size:32px;margin-bottom:16px}@media (max-width: 1024px)
{main .rezepte .rezepte-grid .rezept1 .content h3{font-size:28px}}
main .rezepte .rezepte-grid .rezept1 .content p{font-size:18px;margin-bottom:16px}@media (max-width: 1024px)
{main .rezepte .rezepte-grid .rezept1 .content p{font-size:16px}}
main .rezepte .rezepte-grid .rezept1:hover .content{opacity:1}

main .rezepte .rezepte-btn{text-align:center}

main .anleitung{padding-top:64px;padding-bottom:64px}
main .anleitung .anleitung-grid{display:-ms-grid;display:grid;-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr);grid-gap:16px;margin-bottom:32px}@media (max-width: 768px)
{main .anleitung .anleitung-grid{-ms-grid-columns:(1fr);grid-template-columns:repeat(2, 1fr)}}@media (max-width: 767px)
{main .anleitung .anleitung-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}}
main .anleitung .anleitung-grid .zutaten{border-radius:16px;position: center}
main .anleitung .anleitung-grid .zutaten .content{color:black;padding:16px}
main .anleitung .anleitung-grid .zutaten .content h3{font-size:20px;margin-bottom:16px}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content h3{font-size:16px}}
main .anleitung .anleitung-grid .zutaten .content p{font-size:16px;margin-bottom:16px}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content p{font-size:14px}}
main .anleitung .anleitung-grid .zutaten .content ul{font-size:16px;margin-bottom:16px; margin-left: 15px;}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content ul{font-size:14px}}
main .anleitung .anleitung-grid .zutaten .content ol{list-style-type:decimal;font-size:16px;margin-bottom:16px; margin-left: 15px;}@media (max-width: 1024px)
{main .anleitung .anleitung-grid .zutaten .content ol{font-size:14px}}
main .anleitung p{font-size:16px;margin-bottom:16px}@media (max-width: 1024px)
{main .anleitung p{font-size:14px}}

main .about{background-color:#000000}
main .about .container{padding-top:64px;padding-bottom:64px;}
main .about .container p{color:#FFF}
main .about .container h2{color:#FFF}
main .about .container .img_about {display: flex;justify-content: center;}
main .about .container .img_about img{display:flex;width: 25%;position: center}

/*# sourceMappingURL=main.css.map */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DertropfendeKessel</title>

    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700&display=swap" rel="stylesheet"/> 

    
    <link rel="stylesheet" href="main.css" />
</head>
<body>
    <header>
        <div class="container">
            <h2><span>Der tropfende</span> Kessel</h2>
            <img src="./assets/images/icon_dfk_tw.png" alt="icon" class="img" width="72px" height="72px" />
            <nav>
                <a href="index.html">Home</a>
                <a href="#Küche">Küche</a>
                <a href="#Rezepte">Rezepte</a>
                <a href="#me">Über mich</a>
            </nav>
            <button class="hamburger">
                <div class="bar"></div>
            </button>
        </div>
    </header>
    <nav class="mobile-nav">
        <a href="index.html">Home</a>
        <a href="#Küche">Küche</a>
        <a href="#Rezepte">Rezepte</a>
        <a href="#me">Über mich</a>
    </nav>
    <main>
        <section class="banner">
            <div class="container">
                
                <h3>Discover the world of cuisine</h3>

                <a href="#Küche" class="button">Find out more</a>
                <a name="Küche"></a>
            </div>
        </section>

        <section id="services" class="services">
            <div class="container">
                <h2>Küche</h2>
                <br><br>
                <div class="services-grid">

                    <div class="service">
                        <figure class="img-box">
                            <a href="vorspeise.html">
                            <img src="./assets/images/service-1.jpg" alt="Website Service" class="img" />
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Vorspeise</h3>
                        </div>
                    </div>

                    <div class="service">
                        <figure class="img-box">
                            <a href="hauptgang.html">
                            <img src="./assets/images/service-2.jpg" alt="App Service" class="img"/>
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Hauptgang</h3>
                        </div>
                    </div>
                    
                    <div class="service">
                        <figure class="img-box">
                            <a href="nachtisch.html">
                            <img src="./assets/images/service-3.jpg" alt="Games Service" class="img"/>
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Nachtisch</h3>
                        </div>
                    </div>

                    <div class="service">
                        <figure class="img-box">
                            <a href="marinaden.html">
                            <img src="./assets/images/service-4.jpg" alt="Mentoring Service" class="img"/>
                            </a>
                        </figure>
                        <div class="content">
                            <h3>Marinaden</h3>
                            <a name="Rezepte"></a>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        
        <section class="rezepte" id="rezepte">
            <div class="container">
                <h2>Rezepte</h2>
                <div class="rezepte-grid">
                    <div class="rezept1">
                        <div class="content">
                            <h3>Choco loco</h3>
                            <a href="chocoloco.html" class="button">Learn more</a>
                        </div>
                    </div>
                </div>
                <div class="rezepte-btn">
                    <a href="#Küche" class="button">View more</a>
                    <a name="me"></a>
                </div>
            </div>
        </section>
        <br>
        <section class="about" id="about">
            <div class="container">
                <h2>Über mich</h2>
                <br>
                <div class="img_about">
                    <img src="./assets/images/logo_about_dtk.jpg" alt="logo_about_dtk" class="img" />
                </div>
            </div>
        </section>
    </main>
    <script src="main.js"></script>
</body>
</html>

单击同一页面上的锚链接时关闭汉堡菜单（在移动视图中）

Close hamburger menu when click on anchor links on same page (in mobile view)

javascript

css

response

anchor

hamburger-menu