JSFiddle - React, Tailwind, and code Playground

by exercices

HTML

<div id="menu" height="100%" max-height="device-height">
  <nav class="menu">
    <header><span>×</span></header>
    <ol>
      <li class="menu-item"><a href="index.html">
          <n>Accueil</n>
        </a></li>

      <li class="menu-item">
        <a class="plain" href="spectacles.html">
          <n>Spectacles</n>
        </a>
        <ol class="sub-menu">
          <li class="menu-item"><a href="sucresale.html">
              <nn1>- Sucré Salé</nn1>
            </a></li>
          <li class="menu-item"><a href="aletbofie.html">
              <nn2>- Al & Bofie</nn2>
            </a></li>

        </ol>
      </li>
      <li class="menu-item">
        <a href="tournee.html">
          <n>Tournée</n>
        </a>

      </li>
      <li class="menu-item"><a href="lacie.html">
          <n>La Compagnie</n>
        </a></li>
      <li class="menu-item"><a href="contacts.html">
          <n>Contacts</n>
        </a></li>
    </ol>
    <footer><button aria-label="Toggle Menu"><img src="images/burger.png"></button></footer>
  </nav>
</div>

CSS

* {
  box-sizing: border-box;
}

body {
  background: black;
  margin: 0;
}

#menu {
  position: fixed;
  right: 0;
  border-top: 20px;
  line-height: 0.7;
}


nav {
  --duration: 0.5s;
  --easing: ease-in-out;
  position: relative;
  width: 240px;
  margin: 20px;
}

nav ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  margin: -10px 0 0 0;
}

nav a {
  display: block;
  text-decoration: none;
  background: #fff;
  opacity: 1;
  transform-origin: top right;
  transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
  transition-delay: var(--delay-out);
  border-radius: 0 0 10px 10px;
  padding: 1em 1.52em;
}

nav a:hover {
  background: #ffcc66;
}

nav .sub-menu a {
  font-size: 1em;
  color: #666666;
  border-left: 2em solid #fff;
  padding: 0.75em;
  background: #fff;
  opacity: 1;
}

nav .sub-menu a:hover {
  background: linear-gradient(to right, #ddd 2px, #ffcc00 2px);
}

nav header {
  font-weight: 600;
  display: block;
  height: 40px;
  background: #fff;
  opacity: 1;
  transform-origin: top right;
  transition: transform var(--duration) var(--easing), color var(--duration) var(--easing);
  transition-delay: var(--delay-out);
  border-radius: 10px 10px 0px 0px;
  padding: 1.5em 1em;
}

nav header span {
  border: none;
  background: transparent;
  font-size: 2.5em;
  padding: 0;
  border-right: 0;
  cursor: pointer;
  line-height: 0.2;
  float: right;
}

nav footer button {
  position: fixed;
  top: 20px;
  right: 13px;
  z-index: 100;
  border: none;

  cursor: pointer;
  outline: none;
  background: none;
  opacity: 0;
}

nav.closed a,
nav.closed header {
  transform: translateY(calc(var(--top) * -1)) scaleY(0.1) scaleX(0.2);
  transition-delay: var(--delay-in);
  color: transparent;
}

nav.closed footer button {
  transition-delay: 0s;
  opacity: 1;
}

N {
  font-family: 'Indie Flower', cursive;
  font-size: 30px;
  color: black;
  font-style: bold;
  text-align: center;
  text-shadow: 2px 2px 5px...

JavaScript

var $els = $('.menu a, .menu header');
var count = $els.length;
var grouplength = Math.ceil(count/3);
var groupNumber = 0;
var i = 1;
$('.menu').css('--count',count+'');
$els.each(function(j){
    if ( i > grouplength ) {
        groupNumber++;
        i=1;
    }
    $(this).attr('data-group',groupNumber);
    i++;
});

$('.menu footer button').on('click',function(e){
    e.preventDefault();
    $els.each(function(j){
        $(this).css('--top',$(this)[0].getBoundingClientRect().top + ($(this).attr('data-group') * -15) -20);
        $(this).css('--delay-in',j*.1+'s');
        $(this).css('--delay-out',(count-j)*.1+'s');
    });
    $('.menu').toggleClass('closed');
    e.stopPropagation();
});


// run animation once at beginning for demo
setTimeout(function(){
    $('.menu footer button').click();
    setTimeout(function(){
       
    }, (count * 100) + 500 );
}, 2500);