Simple Responsive & Collapsible Tree Menu In Pure HTML CSS

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

Download & Notes CSS Tree Menu Useful Bits & Links
The End

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

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.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer 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.

 

CSS TREE MENU

All right, let us now walk through the responsive tree menu itself.

 

TREE MENU DEMO

  • First A
  • First B
    • Group A Item 1
    • Group A Item 2
    • Group B Item 1
    • Group B Item 2
      • Group C Item 1
      • Group C Item 2

 

 

THE HTML

tree.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:

  • A – 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.
  • B – 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>.
  • C – 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

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

/* DOES NOT MATTER */
.tree {
  font-family: arial, sans-serif;
  font-size: 18px;
}

Another seemingly confusing bunch, but the essentials here are:

  • A – 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.
  • B – 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.

 

 

USEFUL BITS & LINKS

That’s all for the code, and here are a few small extras that may be useful to you.

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

2 thoughts on “Simple Responsive & Collapsible Tree Menu In Pure HTML CSS”

Leave a Comment

Your email address will not be published. Required fields are marked *