单击同一页面上的锚链接时关闭汉堡菜单（在移动视图中）
Close hamburger menu when click on anchor links on same page (in mobile view)
我使用此 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 指定另一个代码？如果需要，指定哪个代码？
您可以使用自定义 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>
我使用此 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 功能来关闭您的汉堡包菜单选项，如下所示：
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>