CSS网格：使导航栏在移动设备中可折叠

Question

尽我所能学习CSS网格...我已经制作了一个导航菜单，但无法折叠以显示移动视图（“汉堡”菜单样式）。我尝试使用一些视频和在线教程中的“复选框黑客”。我似乎也无法获得列表的所有链接（列表在我的移动视图中从“产品”开始，但应从“关于我们”开始）。

过去几天没有运气。

如果有人可以帮助我解决这个问题，我将非常感激。

这里是HTML和CSS：

html, body{
     margin: 0;
     padding: 0;
     font-family: Roboto, sans-serif;
     font-size: 100%;
}
 header{
    /* grid-column-start: 1;
     grid-column-end: 3;
     grid-row:1;
     */
     grid-area: header;
     background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
     display: grid;
     grid-template-columns: repeat (4, 1fr);
    /* 100px, 1fr 1fr 1fr;
    */
    /**** Change to 10% and 90% otherwise it takes up the full viewport ****/
     grid-template-rows: 100px auto;
     grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" ". hero-text hero-text . ";
}
 .logo{
     grid-area: logo;
     background-image:url(../img/logo-mobile.png);
     background-repeat: no-repeat;
     margin-left: 10px;
}
 .topbar-nav{
     grid-area: topbar-nav;
     color:white;
     background-color: lightblue;
     justify-self: end;
     align-self: center;
}
 .topbar-nav, ul, li{
     list-style-type: none;
     float: left;
     padding: 0px 5px 0px 5px;
}
 .hero-text{
     grid-area: hero-text;
     color:white;
     justify-self: center;
     align-self: center;
}
 .hero-text h1{
     font-size: 600%;
}
 .hero-text p{
     font-size: 200%;
     text-align: center;
}
 nav{
     grid-area: nav;
}
 .grid-about{
    /* grid-column-start: 1;
     grid-column-end: 4;
     grid-row:2;
    */
     grid-area: about;
}
 .grid-products{
    /* grid-column-start: 1;
     grid-column-end: 4;
     grid-row:3;
    */
     grid-area: products;
}
 .grid-services{
    /* grid-column-start: 1;
     grid-column-end: 4;
     grid-row:4;
     */
     grid-area: services;
}
 .grid-contact{
     grid-area: contact;
}
 .grid-location{
     grid-area: location;
}
 .grid-phone-social{
     grid-area: phone;
}
 footer{
    /* grid-column-start: 1;
     grid-column-end: 4;
     grid-row:6;
    */
     grid-area: footer;
}
/****Grid for mobile screens****/
 @media (max-width: 767px){
     .grid-container{
         display: grid;
         background-color: aqua;
         grid-auto-rows: 50vh;
         grid-gap: 10px;
         grid-template-areas: "header" 
        /* "nav"*/
         "about" "products" "services" "contact" "location" "phone" "footer";
    }
     header{
         background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral-mobile.jpg);
         background-repeat: no-repeat;
        /* Change to: grid-template-columns: 110px auto;
        */
         grid-template-columns: 110px auto;
         grid-template-rows: 50px auto;
         grid-template-areas: "logo topbar-nav" "hero-text hero-text";
    }
     .topbar-nav ul, li{
         display: grid;
         grid-template-rows: 10px;
         grid-gap: 5px;
         font-size:75%;
         float:left;
    }
     .hero-text h1{
         font-size: 300%;
         text-align: center;
    }
     .hero-text p{
         font-size: 150%;
         text-align: center;
    }
}
/****Grid for tablet screens****/
 @media (min-width: 768px){
     .grid-container{
         display: grid;
         grid-auto-rows: 100vh;
         grid-gap: 10px;
         background-color: red;
         grid-template-areas: "header" 
        /* "nav" */
         "about" "products" "services" "contact" "location" "phone" "footer";
    }
     header{
         grid-area: header;
         background-image:linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), url(../img/rockspiral.jpg);
         display: grid;
        /* changed: column size 260px 1fr 1fr 1fr*/
         grid-template-columns: 260px 1fr 1fr 1fr;
         grid-template-rows: 100px auto;
         grid-template-areas: "logo topbar-nav topbar-nav topbar-nav" "hero-text hero-text hero-text hero-text";
    }
     .logo{
         grid-area: logo;
         background-image:url(../img/logo.png);
         background-repeat: no-repeat;
         margin-left: 10px;
    }
}

<!DOCTYPE html>

<html lang=en>

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="css/layout.css">

    <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

    <title>CSS Grid Sandbox</title>

</head>

<body>

    <div class="grid-container">

        <header>

            <div class="logo"></div>

            <div class="topbar-nav">

                <ul>

                    <li>About</li>
                    <li>Products</li>
                    <li>Services</li>
                    <li>Contact</li>
                    <li>Location & Hours</li>
                    <li>Phone & Social Media</li>

                </ul>

            </div>

            <div class="hero-text">

                <h1>Big Rock Sale</h1>
                <p>All rocks 50% off. Offer ends soon!</p>

            </div>

        </header>

        <!--  <nav>Nav</nav>  -->

        <section class="grid-about">About Us</section>

        <section class="grid-products">Products</section>

        <section class="grid-services">Services</section>

        <section class="grid-contact">Contact</section>

        <section class="grid-location">Location & Hours</section>

        <section class="grid-phone-social">Phone & Social Media</section>

        <footer>Footer</footer>

    </div>

</body>

</html>

Answer 1

虽然我个人建议为此使用Javascript，但可以通过多种方法来获得纯CSS版本，其中一种方法是使用与:checked选择器配对的复选框。

.hamburger-menu-content {
  display: none;
}

#hamburger-menu-trigger:checked+.hamburger-menu-content {
  /* '+' means all elements that have the first element preceding it */
  display: block;
}

<input type="checkbox" id="hamburger-menu-trigger">
<div class="hamburger-menu-content">
  <p>Foo</p>
  <p>Foo</p>
  <p>Foo</p>
</div>

此方法的缺点是您需要再次单击输入以将其关闭。为了减轻这种情况，我们可以使用一对单选按钮。

.hamburger-menu-content {
  display: none;
}
#hamburger-menu-trigger:checked {
  display: none;
}
#hamburger-menu-trigger:checked+.hamburger-menu-content {
  /* '+' means all elements that have the first element preceding it */
  display: block;
}

<input type="radio" name="menuToggle" id="hamburger-menu-trigger">
<div class="hamburger-menu-content">
  <input type="radio" name="menuToggle">
  <p>Foo</p>
  <p>Foo</p>
  <p>Foo</p>
</div>

编辑：如果要更改按钮的外观，可以参考本指南https://www.w3schools.com/howto/howto_css_custom_checkbox.asp