JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<p>Click on the <span>white</span> links to view the menu change effect</p>
<div class="blurry-menu">

  <div class="level level-0">
    <ul>
      <li> Parent level </li>
      <li> Parent level </li>
      <li> Parent level </li>
      <li data-toggle=".level-1"> Parent level </li>
      <li> Parent level </li>
    </ul>
  </div>

  <div class=" level level-1">
    <ul>
      <li class="back" data-toggle="back"> Back </li>
      <li data-toggle=".level-2"> Sub Child </li>
      <li> Sub Child </li>
      <li> Sub Child </li>
      <li> Sub Child </li>
    </ul>
  </div>
  <div class=" level level-2">
    <ul>
      <li class="back" data-toggle="back"> Back </li>
      <li> SubSub Child </li>
      <li> SubSub Child </li>
      <li> SubSub Child </li>
      <li> SubSub Child </li>
    </ul>
  </div>

</div>

SCSS

body {

  background: #212121;
  height: 100vh;

}

* {
  transition: 0.25s ease-in-out;
  transform-origin: center center;
}

.blurry-menu {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 350px;
  display: block;

  .level {
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    position: absolute;
    width: 100%;

    &.blur {
      filter: blur(20px);
      transform: scale(0.9) translate(0, -50%);
      opacity: 0.5;
    }

    ul {
      list-style-type: none;
      margin: 0;
      padding: 0;

      li {
        padding: 15px 40px;
        line-height: 50px;
        font-size: 30px;
        font-weight: 700;
        font-family: "Trebuchet MS", sans-serif;
        color: #666;
        cursor: pointer;
        position: relative;

        &.active {
          color: #fff;
        }

        &:hover {
          color: #ffc300;
          text-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
        }
      }

      [data-toggle*="level"] {
        color: #fff;
      }

      [data-toggle="back"] {
        color: rgba(255, 100, 0, 0.2);

        &:hover {
          color: rgba(255, 100, 0, 0.5);
          transform: scale(1.05);
        }
      }

      [data-toggle*="level"]::after {
        content: "+";
      }
    }
  }

  .level:not(.level-0) {
    left: 350px;
    opacity: 0;

  }

  li.back::before {
    content: "-";
  }

  .level.active {
    left: 0;
    opacity: 1;
  }

  .level-1 {
    padding-left: 50px;
  }

  .level-2 {
    padding-left: 100px;
  }
}

p {
  font-family: "Trebuchet MS", sans-serif;
  color: #999;
  padding: 20px;

  span {
    padding: 5px;
    background: rgba(255, 255, 255, 0.1);
  }
}

JavaScript

jQuery(document).ready(function($) {


  var toggler = $('[data-toggle*="level"]'),
    untoggler = $('[data-toggle="back"]')

  toggler.on('click', function() {

    $(this).parents('.level').find('li').removeClass('active');
    $(this).parents('.level').addClass("blur");
    $(this).addClass('active');

    var tog = $(this).attr('data-toggle');
    $(tog).addClass('active');

  });

  untoggler.on('click', function() {

    var par = $(this).parents('.level');
    par.find('li').removeClass('active');
    par.removeClass("active");
    par.prev().removeClass("blur");
    par.prev().find('li').removeClass('active');
  });

});