THE HTML

  
    

        
          One
        
      
      

        
          Two
        
      
      

        
          Three
        
      
    

Yep, this should be pretty straightforward. We are just using an unordered list

THE CSS

/* [TURN LIST INTO MENU] */
#menutree {
  margin: 5px;
  padding: 0;
  max-width: 320px; /* Restrict width if you want */
}
#menutree li {
  list-style: none;
  padding: 20px 10px;
  background: #B2CCEA;
  border-bottom: 1px solid #86AAD4;
}
#menutree li:last-child {
  border: 0;
}
#menutree a {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #333;
}
/* [DOES NOT MATTER] */
html, body {
  font-family: arial, sans-serif;
}

There is nothing much to the CSS as well, we are merely changing the list to look more like a menu here with some cosmetics.

THE RESULT

THE HTML

  
    

        
          One
        
      
      
      

        
          Two
        
        

            
              One Inside
            
          
          

            
              Two Inside
            
          
          

            
              Three Inside
            
            

                
                  Four Inside
                
              
              

                
                  Five Inside
                
              
            
        
      

        
          Three
        
      
    

Not much changes here as well:

• We now put another unordered list inside the list to create the hierarchy.
• To create the collapsible magic, we will be using a pair of checkbox and label – The rest of the work will be done by CSS, which will be explained below.

THE CSS

/* [COLLAPSIBLE] */
#menutree label {
  position: relative;
  display: block;
  width: 100%;
  cursor: pointer;
}
#menutree input[type=checkbox] {
  display: none; /* Hide ugly checkbox */
}

/* Hide/collapse by default */
li.collapse ul {
  visibility: hidden;
  opacity: 0;
  max-height: 0; /* CSS bug. Cannot animate height... */
  transition: all 0.5s;
}
label::after {
  content: "\25b6";
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.5s;
}

/* Show when checked */
li.collapse input:checked ~ ul {
  visibility: visible;
  opacity: 1;
  max-height: 999px; /* Just give a big enough height for animation */
}
li.collapse input:checked ~ label::after {
  transform: rotate(90deg);
}

To complete the collapsible menu:

• We hide the checkbox with CSS, and it will still function normally if we click on the label.
• By default, we will collapse the internal sub-menu items with visibility: hidden, opacity: 0, and max-height: 0.
• Also by using label::after, we create an arrow to indicate that this is a collapsed sub-menu item. 
• When the user clicks on the sub-menu item, we use li.collapse input:checked ~ ul to open it, by reversing visibility: visible, opacity: 1, and max-height: 999px.
• Finally, we rotate the arrow transform: rotate(90deg) for cosmetics reason.

THE RESULT

READ AND LIST

 $v) {
  $basename = basename($k);
  if ($basename != "." && $basename != "..") {
    $path = str_replace($basepath, "", dirname($k));
    if ($path=="") {
      $target =& $objects;
    } else {
      $path = substr($path, 1);
      $path = explode(DIRECTORY_SEPARATOR, $path);
      $evil = "\$target =& \$objects";
      foreach ($path as $p) { $evil .= "['$p']"; }
      eval ( $evil . ";");
    }
    if (is_file($k)) {
      $target[] = $basename;
    } else {
      if (!is_array($target)) {
        $target[$basename] = [];
      }
    }
  }
}

/* [HTML] */ ?>


  
    
$v) {
          // FOLDER
          if (is_array($v)) {
            echo "
";
            echo "$k
";
            $i++;
            draw ($v);
            echo "
";
          }
          // FILE
          else {
            echo "
$v
";
          }
        }
      }
      draw($objects);
      ?>
    

Aye, this seems all complicated, but it is actually just some recursive magic at work here.

HAMBURGER MENU

Looking to build something a little more modern? Check out my other guide on how to create a responsive hamburger menu:

2 Steps Simple Responsive Pure CSS Hamburger Menu

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

The post 2 Steps Simple Pure CSS Collapsible Tree Menu appeared first on Code Boxx.