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);
}