Responsive Collapsible Tree Menu In HTML CSS (Free Download)

Welcome to a tutorial and example of how to create a responsive collapsible tree menu with pure HTML and CSS. There are a ton of tree menu plugins on the Internet, but some of them require third-party libraries. It really doesn’t make sense to add to the loading bloat, and so, here it is. Let us walk you through a simple tree menu in this guide – No hacks, no bloated 3rd party frameworks. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

TABLE OF CONTENTS

 

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

TREE MENU DEMO

 

 

 

THE HTML

<ul class="tree">
  <!-- (A) "NORMAL" ITEMS -->
  <li>Item A</li>
  <li>Item B</li>
 
  <!-- (B) SECTION -->
  <li class="section">
    <input type="checkbox" id="groupA">
    <label for="groupA">Group A</label>
    <ul>
      <li>Group A Item 1</li>
      <li>Group A Item 2</li>
    </ul>
  </li>
 
  <!-- (C) SECTION WITH SUB-SECTION -->
  <li class="section">
    <input type="checkbox" id="groupB">
    <label for="groupB">Group B</label>
    <ul>
      <li>Group B Item 1</li>
      <li>Group B Item 2</li>
      <!-- SUB-SECTION -->
      <li class="section">
        <input type="checkbox" id="groupC">
        <label for="groupC">Group C</label>
        <ul>
          <li>Group C Item 1</li>
          <li>Group C Item 2</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

This may look like a handful at first, but let’s walk through it:

1. We are just using an unordered list <ul class="tree"> to create the tree menu, and list items <li>Item A</li> as the menu items.
2. Adding group sections <li class="section"> to the tree menu requires a “small trick”.
   • First, add a pair of <input type="checkbox" id="GROUP"> and <label for="GROUP">GROUP NAME</label>. We will do some CSS magic with these to show/hide the group items.
   • Next, insert the group items “as usual” – <ul><li>SUB</li> <li>SUB</li></ul>.
3. To go deeper into the sub-sub-menu items, we literally just need to insert another <li class="section"> into the <li class="section">.

 

 

THE CSS

/* (A) LIST TO MENU */
.tree, .section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tree {
  background: #fbfbfb;
  border: 1px solid #d2d2d2;
}
.tree li {
  border-bottom: 1px solid #d2d2d2;
  padding: 15px 10px;
}
.tree li:last-child {
  border: 0;
}

/* (B) SUB-SECTIONS */
/* (B1) TOGGLE SHOW/HIDE */
.section ul { display: none; }
.section input:checked ~ ul { display: block; }

/* (B2) HIDE CHECKBOX */
.section input[type=checkbox] { display: none; }

/* (B3) ADD EXPAND/COLLAPSE ICON  */
.section { 
  position: relative; 
  padding-left: 35px !important;
}
.section label:after {
  content: "\0002B";
  position: absolute;
  top: 0; left: 0;
  padding: 10px;
  text-align: center;
  font-size: 30px;
  color: #f00;
  transition: all 0.5s;
}
.section input:checked ~ label:after { 
  color: #23c37a;
  transform: rotate(45deg);
}

/* (B4) SUB-SECTION ITEMS */
.section ul { margin-top: 10px; }
.section ul li { color: #d43d3d; }

Another seemingly confusing bunch, but the essentials here are:

1. To turn the unordered list into a menu, the only important part to take note is .tree { list-style: none; padding: 0; margin: 0; }. The rest is pretty much cosmetics.
2. Remember the checkbox and label?
   • (B1) We hide the sub-menu by default and only show them when the checkbox is checked.
   • (B2) Hide the native ugly checkbox, since clicking on the label will work just fine.
   • (B3) Pretty much cosmetics again, placing a custom expand/collapse button on the tree menu.

 

 

 

LINKS & REFERENCES

• CSS Animations – MDN
• Hamburger Menu – Code Boxx