JSFiddle - React, Tailwind, and code Playground

by ninty9notout

HTML

<ul class="menu menu--0">
  <li class="item">
    <a class="link">Link</a>
    <div class="inner">
      <ul class="menu menu--1">
        <li class="item"><a class="link">Sub 1</a></li>
        <li class="item">
          <a class="link">Sub 1</a>
          <div class="inner">
            <ul class="menu menu--2">
              <li class="item"><a class="link">Link</a></li>
              <li class="item"><a class="link">Link</a></li>
              <li class="item"><a class="link">Link</a></li>
              <li class="item">
                <a class="link">Link</a>
                <div class="inner">
                  <ul class="menu menu--3">
                    <li class="item"><a class="link">Link</a></li>
                    <li class="item">
                      <a class="link">Link</a>
                      <div class="inner">
                        <ul class="menu menu--4">
                          <li class="item"><a class="link">Link</a></li>
                          <li class="item"><a class="link">Link</a></li>
                          <li class="item"><a class="link">Link</a></li>
                          <li class="item"><a class="link">Link</a></li>
                          <li class="item"><a class="link">Link</a></li>
                        </ul>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
              <li class="item"><a class="link">Link</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </li>
  <li class="item"><a class="link">Link</a></li>
  <li class="item">
    <a class="link">Link</a>
    <div class="inner">
      <ul class="menu menu--1">
        <li class="item"><a class="link">Sub 2</a></li>
        <li class="item">
          <a class="link">Sub 2</a>
          <div class="inner">
            <ul class="menu menu--2">
              <li class="item"><a class="link">Link</a></li>
              <li class="item"><a...

CSS

.menu {
  list-style: none;
  max-width: 150px;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.menu--0 .inner {
  background: #f0f;
}

.menu--1 .inner {
  background: #f00;
}

.menu--2 .inner {
  background: #ff0;
}

.menu--3 .inner {
  background: #0f0;
}

.menu--4 .inner {
  background: #00f;
}

.inner {
  transform: translateX(-50px);
  opacity: 0;
  transition: transform 100ms ease, opacity 100ms ease;
  height: 100%;
  position: absolute;
  top: 0;
  left: 150px;
  width: 150px;
}

.inner--active {
  transform: translateX(0);
  opacity: 1;
}

JavaScript

document.querySelectorAll('.link').forEach(link => {
	link.addEventListener('click', event => {
		event.currentTarget.nextElementSibling.classList.add('inner--active');
	});
});