HTML

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
 
  <section class="hero is-primary is-bold is-medium">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">Nested Dropdown List Transition</h1>
      <h2 class="subtitle">With Sublists</h2>
    </div>
  </div>
</section>
<section class="section">
  <aside class="menu">
    <p class="menu-label">
      Categories
    </p>
    <ul class="menu-list">
      <li>
        <a>Graphic Design</a>
        <p class="menu-label">Subjects</p>
        <ul>
          <li><a>Photoshop</a></li>
          <li><a>Illustrator</a></li>
          <li><a>InDesign</a></li>
        </ul>
      </li>
      <li>
        <a>Web Design</a>
        <p class="menu-label">Subjects</p>
        <ul>
          <li><a>HTML</a></li>
          <li><a>CSS</a></li>
          <li><a>JavaScript</a></li>
        </ul>
      </li>
      <li>
        <a>Web Development</a>
        <p class="menu-label">Subjects</p>
        <ul>
          <li><a>Node JS</a></li>
          <li><a>PHP</a></li>
          <li><a>MySQL</a></li>
        </ul>
      </li>
      <li>
        <a>Search Engine Optimization</a>
        <p class="menu-label">Subjects</p>
        <ul>
          <li><a>On Page</a></li>
          <li><a>Off Page</a></li>
          <li><a>Link Building</a></li>
          <li><a>Keywords Research</a></li>
          <li><a>Keyword Analytics</a></li>
          <li><a>Organic Traffic</a></li>
        </ul>
      </li>
      <li>
        <a>API</a>
        <p class="menu-label">Subjects</p>
        <ul>
          <li><a>JSON</a></li>
          <li><a>AJAX</a></li>
        </ul>
      </li>
    </ul>
  </aside>
</section>
 
<script src="function.js"></script>
 
</body>
</html>

CSS

.title,
.subtitle,
.menu {
  width: 350px;
  margin: 2rem auto;
}
.subtitle, .title {
  text-align: center;
}
.hero-body {
  background: linear-gradient(to right, #00d2ff, #3a7bd5);
}
.menu-label {
  color: #222;
}
.menu-list .menu-label {
  padding-left: 1em;
}
.menu-list > li, .menu-list > li a, .menu-list > li .menu-label, .menu-list > li ul {
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(1, 0, 1, 0);
  transition-property: margin, max-height, opacity, background-color, color;
}
.menu-list > li, .menu-list > li.is-active .menu-label, .menu-list > li.is-active ul {
  height: auto;
  max-height: 500px;
  opacity: 1;
}
.menu-list > li.is-invisible, .menu-list > li .menu-label, .menu-list > li ul {
  height: auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}
.menu-list > li:not(.is-active) .menu-label,
.menu-list > li:not(.is-active) ul {
  margin: 0;
}
.menu-list > li.is-hidden2, .menu-list > li.is-hidden2 a, .menu-list > li.is-hidden2 .menu-label, .menu-list > li.is-hidden2 ul {
  transition-timing-function: cubic-bezier(0, 1, 0, 1);
}
@media (max-width: 765px) {
  .subtitle, .title {
    margin: 0 auto;
    text-align: left;
  }
}

JS

const links = document.querySelectorAll(".menu-list > li > a");
for (const link of links) {
  link.addEventListener(
  "click",
  e => {
    const curr = e.srcElement;
    [...links].forEach(link => {
      if (link !== curr) {
        link.classList.remove("is-active");
        link.parentNode.classList[
        curr.classList.contains("is-active") ? "remove" : "add"](
        "is-invisible");
      }
    });
    curr.parentNode.classList.remove("is-invisible");
    curr.parentNode.classList.toggle("is-active");
    curr.classList.toggle("is-active");
  },
  false);
 
}

Lascia un commento