CSS Сетка: сделать панель навигации разборной в мобильном телефоне - PullRequest
Новая
       28

CSS Сетка: сделать панель навигации разборной в мобильном телефоне

0 голосов
/ 30 апреля 2020

Стараюсь изо всех сил, чтобы узнать 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>

1 Ответ

0 голосов
/ 30 апреля 2020

Хотя я лично рекомендую использовать 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>

edit: Если вы хотите изменить внешний вид кнопок, вы можете обратиться к этому руководству https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

...