details navbar

Using a details tag to make a no javascript navbar

by Soviut

HTML

<header>
  <details>
    <summary>=
    </summary>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </nav>
  </details>
</header>

<main>
  <h1>Details Navbar Test</h1>
  <p>Using a details tag to make a no javascript navbar</p>
</main>

CSS

body {
  padding: 0;
  margin: 0;

  font-family: arial, helvetica, san-serif;
}

main {
  padding: 1em;
}

details {
  padding: 0;
  
  background: rebeccapurple;
}

details summary {
  padding: 10px;
  cursor: pointer;
  color: white;
}

details summary::-webkit-details-marker {
  display:none;
}

nav ul {
  list-style: none outside;
  margin: 0;
  padding: 0;
}

nav ul li a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
}

nav ul li a:hover, nav ul li a:focus {
  background: rgba(255, 255, 255, 0.2);
}