Home Web Design CSS CSS Nested List Drop Down With Sub List | Clickable List Options

CSS Nested List Drop Down With Sub List | Clickable List Options

September 3, 2019

15554

How we can create an HTML nested list with sublist interface using CSS? Solution: Check out this CSS Nested List Drop Down With Sub List, Clickable List Options.

Previously I have shared Dropdown Select Option List, But this is little different from that. Basically, this is a type of mobile’s options list, when we click on any option and other option will appear inside that which option we have selected. Nowadays these type lists use to create small web apps or cross platforms.

Today you will learn to create clickable list options with sub-lists. This is kind of category selection with HTML lists, there are some list and their sub-lists when you will click on any list item then its sub-list will visible. I think this program will very useful for your website or project. And this is a very easy concept based on a library, you will understand easily.

So, Today I am sharing CSS Nested List Drop Down With Sub List. This program is based on a CSS library because libraries make work more easy. Also, here JavaScript handling an important thing, which is show and hides sub lists. All the lists are based on simple HTML list tags. You can use this as a category filter or selector.

If you are thinking now how this clickable list options actually are, then see the preview given below.

Preview Of Clickable List Options With Sub Lists

See this video preview to getting an idea of how this option list looks like.

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Nested List Drop Down With Sub List Source Code

Before sharing source code, let’s talk about it. First I have created two sections, one for put heading or title and another for list and sub-lists. For creating this program I have used a CSS framework which is Bulma, it is based on flexbox. For creating a nested list I have used HTML <ul> and <li> tags.

Now using CSS I have given values of height, width, margin, padding, color, etc. There I have used a framework that’s why there are fewer CSS codes. And JavaScript handling a great feature which is show and hiding items. There is a toggle feature based on JavaScript, using that you can hide show items by single or multiple clicks.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS and third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>List Dropdown With Sublist | Webdevtrick.com</title>
  <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>

<!DOCTYPE html>

<head>

<title>List Dropdown With Sublist | Webdevtrick.com</title>

</head>

<body>

<h1 class="title">Nested Dropdown List Transition</h1>

<h2 class="subtitle">With Sublists</h2>

</div>

</section>

Categories

</p>

<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>JavaScript</a></li>

</ul>

</li>

<li>

<a>Web Development</a>

<p class="menu-label">Subjects</p>

<ul>

<li><a>MySQL</a></li>

</ul>

</li>

<li>

<a>Search Engine Optimization</a>

<p class="menu-label">Subjects</p>

<ul>

<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>

<p class="menu-label">Subjects</p>

<ul>

</ul>

</li>

</ul>

</aside>

</section>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
.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;
  }
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

.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;

}

function.js

The final step, Create a JavaScript file named ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
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);

}

// Code By Webdevtrick ( https://webdevtrick.com )

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

}

That’s It. Now you have successfully created CSS Nested List Drop Down With Sub List, Clickable List Options. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

VIkas Gupta September 10, 2019 At 5:42 am

Hi,

This effect is not working in IE. Can you resolve this issue and provide the code, which is supporting all browser.

Thanks,
Vikas Gupta

Reply
Katerina Mala March 9, 2022 At 2:22 pm

Hi, great job, working perfectly. I am trying to re-use the structure but wanted to ask where i need to change the CSS to have all the main options staying (graphic design, web design, web development, etc.) and not disappearing when you open one of them and the subsections are displayed. Could you please help?
Thanks, 🙂
Kate

Reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Clickable List Options With Sub Lists

CSS Nested List Drop Down With Sub List Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY