I successfully implemented a tree list of directory but I am encountering some issues.
Current Problems:
Sub-folders are not in the same column as sub-files.Lines of sub-folders appear at the last spot of the column.
How can these issues be resolved?
PHP:
function ListFolder($path) {
//using the opendir function
$dir_handle = @opendir($path) or die("Unable to open $path");
//Leave only the lastest folder name
$dirname = end(explode("/", $path));
echo '<ul>';
//display the target folder.
echo '<li><a href="'.$dirname.'" class="folder">'.$dirname.'</a>';
echo '<ul>';
while (false !== ($file = readdir($dir_handle))) {
if ($file != "." && $file != "..") {
if (is_dir($path . "/" . $file)) {
//Display a list of sub folders.
ListFolder($path . "/" . $file);
} else {
//Display a list of files.
echo '<li><a href="'.$file.'">'.$file.'</a></li>';
}
}
}
echo "</ul>";
echo "</li>";
echo "</ul>";
//closing the directory
closedir($dir_handle);
}
ListFolder("./files");
Highlighted lines:
CSS:
ul,
ul ul {
list-style:none;
margin:0;
padding:0;
}
ul ul {
margin-left:10px;
background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKAQMAAABPHKYJAAAAA1BMVEWIiIhYZW6zAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1ggGExMZBky19AAAAAtJREFUCNdjYMAEAAAUAAHlhrBKAAAAAElFTkSuQmCC') repeat-y 0 100%;
}
ul li {
margin:0;
padding:0 12px;
font-size:14px;
line-height:20px;
color:#369;
font-weight:bold;
}
ul ul li {
background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIJYVaFGwAAAARSURBVAjXY2hgQIf/GTDFGgDSkwqATqpCHAAAAABJRU5ErkJggg==') no-repeat 0 0;
}
ul ul li.last,
ul ul li:last-child {
background:white url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAUAQMAAACK1e4oAAAABlBMVEUAAwCIiIgd2JB2AAAAAXRSTlMAQObYZgAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YIBhQIIhs+gc8AAAAQSURBVAjXY2hgQIf/GbAAAKCTBYBUjWvCAAAAAElFTkSuQmCC') no-repeat 0 100%;
background-position:left top;
}
HTML:
<ul>
<li><a href="test" class="folder">test</a>
<ul>
<li><a href="aaa.txt">aaa.txt</a></li>
<li><a href="bbb.txt">bbb.txt</a></li>
<ul>
<li><a href="subfolder" class="folder">subfolder</a>
<ul>
<li><a href="1.txt">1.txt</a></li>
<li><a href="2.txt">2.txt</a></li>
</ul>
</li>
</ul>
<li><a href="test.txt">test.txt</a></li>
</ul>
</li>
</ul>