Dynamically build html menu (and sub-menus) using PHP

Question

I want to look for any html files in a specific folder, and build up my menu and sub-menus based on the results:

For example my project files may be : 'project1_qa_qa2.html',..., 'project2_dev_dev1.html', etc... And the explode() should return 'project1', 'qa', 'qa2' ; ... ; 'project2', 'dev', 'dev1' ; ...

I need to loop through each elements {project ( 1 or 2), department (qa or dev) , and id (dev1, qa2, ..)} to build my menu / sub-menus in a dynamic way.

I got a base source from : http://callmenick.com/_development/slide-down-menu/

I added my hardcoded sample code, to show what I'd wanted it to be like.

<?php
    $cdir = scandir('./projects');
    foreach ($cdir as $filename){
    if(preg_match('/(\w+).html/',$filename,$project_name)){
        $projects_details = explode('_',$project_name[1]);
    }
?>
<div class="container">
   <nav>
      <ul class="content clearfix">
         <li><a href="#">Welcome</a></li>
         <li class="dropdown">
            <a href="#">Projects</a>
            <ul class="sub-menu" style="display: none;">
               <li><a href="#">Project1</a></li>
               <li class="dropdown">
                  <a href="#">Project2</a>
                  <ul class="sub-menu" style="display: none;">
                     <li class="dropdown">
                        <a href="#">Quality Insurance</a>
                        <ul class="sub-menu" style="display: none;">
                           <li><a href="#">QA1</a></li>
                           <li><a href="#">QA2</a></li>
                        </ul>
                     </li>
                     <li class="dropdown">
                        <a href="#">Development</a>
                        <ul class="sub-menu" style="display: none;">
                           <li><a href="#">Dev1</a></li>
                           <li><a href="#">Dev2</a></li>
                        </ul>
                     </li>
                  </ul>
               </li>
            </ul>
      </ul>
   </nav>
</div>

Answer 1

This is just to show you which code I've used and point you in the right direction. For scanning the directory:

function getFromDir( $dir ) {
    $cdir = scandir( $dir );
    $result = array();

    foreach( $cdir as $key => $value ) {
        if( !in_array( $value, array('.', '..') ) ) {
            if( is_dir( $dir . DIRECTORY_SEPARATOR . $value ) ) {
                $result[$value] = getFromDir($dir . DIRECTORY_SEPARATOR . $value);
            } else {
                $result[] = $value;
            }
        }
    }

    return $result;
}

As shown in the comment for creating the html:

function outputMenu(array $array, $baseUrl = '/') {
    $html = '';
    foreach( $array as $key => $item ) {
        if( is_array( $item ) ) {
            $html .= '<li>'.$key.'<ul>';
            $html .= outputMenu($item, $baseUrl.$key.'/');
            $html .= '</ul></li>';
        } else {
            $html .= '<li><a href="'.$baseUrl.$item.'">'.ucfirst(substr($item, 0, -4)).'</a></li>';
        }
    }
    return $html;
}

echo outputMenu(getFromDir('./projects'));