Make a dropdown tree menu similar to Windows Explorer

I would like to know if there is a way to make a dropdown menu that resembles a tree, similar to Windows Explorer using HTML/CSS and Bootstrap.

Example:

enter image description here

I would really appreciate any help.

1 answer

  • answered 2018-07-11 06:43 Ketan

    Check This ! i hope it will work for you

    [data-ui-css-component="treeview"] {
      margin: 20px;
      font-family: Verdana;
      font-size: 14px;
      color: #9C27B0;
    }
    [data-ui-css-component="treeview"] [type=checkbox] {
      display: none;
    }
    [data-ui-css-component="treeview"] ul {
      padding: 0 0 0 40px;
      display: none;
      list-style: none;
    }
    [data-ui-css-component="treeview"] ul:first-child {
      padding-left: 0;
    }
    [data-ui-css-component="treeview"] li {
      padding: 0;
    }
    [data-ui-css-component="treeview"] li span {
      margin: 2px 0;
      display: list-item;
      list-style: square;
    }
    [data-ui-css-component="treeview"] label {
      display: inline-block;
      transition: 0.2s;
      padding-right: 10px;
      margin: 5px 0;
      height: 20px;
      line-height: 20px;
      cursor: pointer;
    }
    [data-ui-css-component="treeview"] label::before {
      display: inline-block;
      margin-right: 5px;
      width: 20px;
      height: 20px;
      text-align: center;
      background: #9C27B0;
      color: #FFF;
    }
    [data-ui-css-component="treeview"] ul:first-child, [data-ui-css-component="treeview"] [type=checkbox]:checked ~ ul {
      display: block;
    }
    [data-ui-css-component="treeview"] [type=checkbox]:checked ~ label::before {
      content: "-";
    }
    [data-ui-css-component="treeview"] [type=checkbox]:not(:checked) ~ label::before {
      content: "+";
    }
    <div data-ui-css-component="treeview">
      <ul>
        <li>
          <input type="checkbox" id="item1"/>
          <label for="item1">Item 1</label>
          <ul>
            <li>
              <input type="checkbox" id="item1.1"/>
              <label for="item1.1">Item 1.1</label>
              <ul>
                <li><span>Item 1.1.1</span></li>
                <li><span>Item 1.1.2</span></li>
              </ul>
            </li>
            <li>
              <input type="checkbox" id="item1.2"/>
              <label for="item1.2">Item 1.2</label>
              <ul>
                <li><span>Item 1.2.1</span></li>
                <li><span>Item 1.2.2</span></li>
              </ul>
            </li>
          </ul>
        </li>
        <li>
          <input type="checkbox" id="item2"/>
          <label for="item2">Item 2</label>
          <ul>
            <li><span>Item 2.1</span></li>
            <li><span>Item 2.2</span></li>
            <li><span>Item 2.3</span></li>
            <li><span>Item 2.4</span></li>
          </ul>
        </li>
      </ul>
    </div>