nobkd · March 26, 2024 21:24
diff --git a/minimal-header-nav-menu.html b/minimal-header-nav-menu.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <style>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .home {grid-area: home;}
    .menu-btn {grid-area: btn; display: none;}
    nav {grid-area: nav;}

    @media (width <= 640px) {
      display: grid;
      grid-template-areas: "home btn" "nav nav";

      nav {display: none;}
      .open-btn {display: inherit;}

      &:target {
        .open-btn {display: none;}
        .close-btn {display: inherit;}
        nav {display: inherit;}
      }
    }
  }

  /* know where your target is */
  :target {background-color: yellow; color: red;}
  </style>
 </head>
 <body>
  <header id="menu">
    <a href="#top" class="home">Home</a>
    <a href="#menu" class="menu-btn open-btn">Open</a>
    <a href="#!" class="menu-btn close-btn">Close</a>
    <nav>
      <a href="#a">A</a>
      <a href="#b">B</a>
      <a href="#c">C</a>
    </nav>
  </header>
  <main>
    <h1 id="top">Minimal Header Navigation Menu</h1>
    <h2 id="a">Section A</h2>
    <h2 id="b">Section B</h2>
    <h2 id="c">Section C</h2>
  </main>
 </body>
 </html>