Rounded animation Hamburger menu not opening menu items

Question

Ì found a cool script to show a "rounded animated" hamburger menu, see https://jsfiddle.net/sigug/5ohmne6g/25/ I have a ul list of menu items, they currently don't show up because they are "display:none". When I remove that, they are just there (obviously). How do I show them now with the animated "circle" that popups up when clicking the menu? Since they are "outside" of the animation, is it only possible to fade them in "afterwards" or something?

HTML

<div class="menu"><button class="nav-tgl" type="button" aria-label="toggle menu"><span aria-hidden="true"></span></button>
    <nav class="nav">
        <ul>
            <li>element one</li>
            <li>element two</li>
            <li>element three</li>
            <li>element four</li>
        </ul>
    </nav>
</div>

CSS

.cd-nav-trigger {
  top: 18px;
  right: 5%;
  height: 44px;
  width: 44px;
  z-index: 5;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.cd-overlay-nav, .cd-overlay-content {
  /* containers of the 2 main rounded backgrounds - these containers are used to position the rounded bgs behind the menu icon */
  position: fixed;
  top: 18px;
  right: 5%;
  height: 4px;
  width: 4px;
  transform: translateX(-20px) translateY(20px);
}

.cd-overlay-nav span, .cd-overlay-content span {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  transform: scale(0);
}

.cd-nav-trigger .cd-icon {
  /* icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  display: inline-block;
  width: 18px;
  height: 3px;
  background-color: #ffffff;
  z-index: 10;
}

.cd-nav-trigger .cd-icon::before, .cd-nav-trigger .cd-icon:after {
  /* upper and lower lines of the menu icon */
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: inherit;
  transition: transform .3s;
}

.cd-nav-trigger .cd-icon::before {
  transform: translateY(-6px) rotate(0deg);
}

.cd-nav-trigger .cd-icon::after {
  transform: translateY(6px) rotate(0deg);
}

.cd-nav-trigger.close-nav .cd-icon {
  /* user clicks on the .cd-nav-trigger element - transform the icon */
  background-color: rgba(255, 255, 255, 0);
}

.cd-nav-trigger.close-nav .cd-icon::before, .cd-nav-trigger.close-nav .cd-icon::after {
  background-color: white;
}

.cd-nav-trigger.close-nav .cd-icon::before {
  transform: translateY(0) rotate(45deg);
}

.cd-nav-trigger.close-nav .cd-icon::after {
  transform: translateY(0) rotate(-45deg);
}

.cd-nav-trigger::before, .cd-nav-trigger::after {
  /* 2 rounded colored backgrounds for the menu icon */
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  transition-property: transform;
}
.cd-nav-trigger::before {
  background-color: #091d23;
  transform: scale(1);
  transition-duration: 0.3s;
  transition-delay: 0.4s;
}
.cd-nav-trigger::after {
  background-color: #ffb441;
  transform: scale(0);
  transition-duration: 0s;
  transition-delay: 0s;
}
.cd-nav-trigger.close-nav::before {
  /* user clicks on the .cd-nav-trigger element - 1st rounded background disappears */
  transform: scale(0);
}
.cd-nav-trigger.close-nav::after {
  /* user clicks on the .cd-nav-trigger element - 2nd rounded background appears */
  transform: scale(1);
  transition-duration: 0.3s;
  transition-delay: 0.4s;
}

jQuery

const menu = document.querySelector('.menu');
const btn = menu.querySelector('.nav-tgl');
btn.addEventListener('click', evt => {
  menu.classList.toggle('active');
})
``

Answer 1

Here is an all CSS solution. Instead of using an event, I used a checkbox with a label that acts as the button.

HTML

<div class="nav">
    <input type="checkbox" class="nav__checkbox" id="nav-toggle">
    <label for="nav-toggle" class="nav__button">
      <span class="nav__icon"></span>
    </label>

    <div class="nav__background"></div>

    <nav class="nav__menu">
        <ul class="nav__list">
            <li class="nav__item">Item1</li>
            <li class="nav__item">Item2</li>
            <li class="nav__item">Item3</li>
            <li class="nav__item">Item4</li>
        </ul>
    </nav>
</div>

CSS

.nav__checkbox{
  display: none;
}

.nav__button{
  background-color: #fff;
  position: fixed;
  height: 4.375rem;
  width: 4.375rem;
  border-radius: 50%;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 20;
  cursor: pointer;
}

.nav__background{
  background-image: linear-gradient(#000, #000);
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 50%;
  position: fixed;
  top: 2.8125rem;
  right: 2.8125rem;
  z-index: 10;
  transition: transform .6s ease;
}

.nav__menu{
  height: 100vh;
  position: fixed;
  color:#00f;
  top: 0;
  left: 0;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  width: 0;
  transition: all .6s ease;
}

.nav__checkbox:checked ~ .nav__menu{
  opacity: 1;
  visibility: visible;
  width: 100%;
}

.nav__checkbox:checked ~ .nav__background{
  transform: scale(20);
}

body{
  background-color: #eee;
}

Here is the link

https://jsfiddle.net/1wcpz3ua/8/