<nav>
  <input type="checkbox" role="button" aria-label="Display the menu" aria-expanded="false" aria-controls="menu">
  <ul id="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/shop">Shop</a></li>
    <li><a href="/contact">Contact</a></li>
</ul>
</nav>
nav {
  background: teal;
  display: flex;
}
ul {
  margin-left:auto;
  padding:0;
  display: flex;
  list-style:none;
}
ul li a {
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  font-weight: bold;
  font-family: sans-serif;
}
ul li a:hover {
  text-decoration: underline;
}
nav input {
  width: 40px;
  aspect-ratio: 1;
  display: none;
  overflow: hidden;
  margin:10px 20px 10px auto;
  box-sizing: border-box;
  
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
}
nav input:before,
nav input:after {
  content:"";
  grid-area:1/1;
  transition:.3s;
}
nav input:before {
  background:
    radial-gradient(closest-side at 12.5% 25%,#fff 96%,#0000) 0 0/80% 40%,
    linear-gradient(#fff 50%,#0000 0) top/80% 40% repeat-y;
}
nav input:after {
  padding: 10%;
  background: 
    radial-gradient(closest-side at 50% 12.5%,#fff 96%,#0000) top /20% 80% repeat-y,
    radial-gradient(closest-side at 12.5% 50%,#fff 96%,#0000) left/80% 20% repeat-x,
    conic-gradient(from 90deg at 33% 33%, #0000 90deg, #fff 0)
     100% 100%/60% 60% padding-box content-box;
  transform: translate(-100%) translateZ(0) rotate(45deg);
  opacity:0;
}
nav input:checked:before {
  transform: translate(100%);
  opacity:0;
}
nav input:checked:after {
  transform: translate(0) translateZ(0) rotate(45deg);
  opacity:1;
}


@media (max-width:600px) {
  ul {
    position: fixed;
    background: inherit;
    flex-direction: column;
    inset: 0 0 0;
    padding: 40px;
    margin: 0;
    align-items: center;
    justify-content: center;
    gap: 30px;
    transform: translate(-100%);
    opacity: 0;
    transition: .3s;
  }
  nav input {
    display: grid;
    z-index: 3;
  }
  nav input:checked + ul {
    transform: translate(0);
    opacity: 1;
  }
}

body {
  margin: 0;
}
document.querySelector('nav input').onclick = function() {
    if(this.checked)
      this.setAttribute("aria-expanded",true)
    else
      this.setAttribute("aria-expanded",false)
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.