<?php
/*
Name: SB Menu - A PHP Class for Building Menus
- Simple Test Usage For Showing a Directory and its Subdirectories and their contents
File: class.sb_menu.test.directory.php
License: BSD 3-Clause License <https://opensource.org/licenses/BSD-3-Clause>
Description: An example usage of class to show a directory listing and its subdirectories and their contents
Info:
I left js and css in this file to keep it more contained. Pretty much duplicated from class.sb_menu.test.simple.php
Look in <body></body> section for the part that matters for this example.
Version: 1.0
PHP Version: 8+
REQUIRED PHP CLASSES: class.sb_menu.php
Author: https://www.phpclasses.org/browse/author/144301.html
*/
include_once("class.sb_menu_1.0.php");
// extend the main Tree class to add a custom render() method
class SimpleTree_Extended extends Tree {
public function render($addClass='') {
$pre = "\r\n\r\n<div class='sbmenu ".$addClass."'><div class='container'>\r\n\r\n";
$post = "\r\n</div></div><!-- sbmenu //-->\r\n";
$output = $this->renderNode($this->root, 0);
return $pre.$output.$post;
}
private function renderNode(TreeNode $node, $depth)
{
$output = '';
if($depth > 0) # skip first node as it is the main node. Just show sublevels
{
$id = $node->data['id'];
$label = $node->data['label'];
$has_children = true;
if(empty($node->children))
$has_children = false;
$root = '';
if($depth == 1)
$root = "root";
# cheap padding
$pad = "\t";
$pad_left = str_repeat($pad, $depth);
$html_pad = " ";
$html_pad_left = str_repeat($html_pad, $depth);
$output .= "$pad_left<div class='node $root' depth=".$depth.">\r\n";
$extra_html = '';
// if we have child nodes
if($has_children)
$extra_html .= "<div class='arrow'></div>\r\n";
$add_class = '';
if($has_children)
$add_class = 'has-submenu';
$output .= "$pad_left$pad_left<div class='label $add_class' d=$depth>$html_pad_left".$label."</div>$extra_html\r\n";
if($has_children)
foreach ($node->children as $child)
$output .= $this->renderNode($child, $depth+1);
$output .= "$pad_left</div><!-- depth=$depth //-->\r\n\r\n";
return $output;
}
else {
foreach ($node->children as $child)
$output .= $this->renderNode($child, $depth+1);
}
return $output;
}
} // end class MyTree extends Tree
?>
<!DOCTYPE html>
<html>
<head>
<title>SB Menu - A PHP Class for Building Menus - Simple Test Usage</title>
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- BEGIN JS //-->
<script>
// page uses jQuery
// docready
$(document).ready(function () {
// Toggle nodes when a label with 'has-submenu' class is clicked
$('.label.has-submenu')
.off('click')
.on('click', function () {
// // make slide effect
$(this).siblings('.node').slideToggle(60);
// $(this).parent().find('.arrow').first().toggleClass('active');
$(this).toggleClass('active');
});
});
</script>
<!-- END JS //-->
<!-- BEGIN CSS //-->
<style>
.sbmenu {
position:relative;
display:block;
/* make click through */
pointer-events:none;
/* make it look like a menu */
font-family:Arial, Helvetica, sans-serif;
text-align:center;
/* disable text selection */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
font-size:0.9em;
width:100%;
vertical-align:top;
}
.sbmenu .container {
display:block;
position:relative;
text-align:center;
vertical-align:top;
}
.sbmenu div {
position:relative;
vertical-align:top;
margin:0px;padding:0px;
min-width:10em;
}
.node {
display:none;
pointer-events:auto;
}
.root {
display:inline-block;
position:relative;
top:0px;
}
.unhide {
display:block;
}
.label {
position:relative;
display:block;
padding:0.6em;
padding-left:3em;
padding-right:3em;
cursor:pointer;
text-align:left;
}
.label[d="1"]{
font-size:1.2em;
text-align:center;
font-weight:bold;
border-bottom:1px solid #ccc;
padding-bottom:0.3em;
margin-bottom:0.1em;
padding-top:0.5em;
}
.label:hover {
background-color:orange;
color:white;
cursor: pointer;
}
/* add an arrow text decoration to has-submenu */
.label.has-submenu::after {
color:#ccc;
text-align:right;
/* right arrow */
content: " ?";
font-size:1em;
position:absolute;
right:0px;
} /* when clicked rotate */
.label.has-submenu.active::after {
color:orange;
content: " ?";
font-size:1em;
}
/* if mobile... */
@media (max-width: 780px) {
.sbmenu .container {
text-align:left;
width:100%;
}
.sbmenu .node {
text-align:left;
width:100%;
}
.sbmenu .label {
text-align:left;
width:100%;
font-size:1.2em;
}
}
</style>
<!-- END CSS //-->
</head>
<body>
<?php
//
// BEGIN DIRECTORY LISTING EXAMPLE
echo "<hr>";
echo "<pre>";
// SET THE DIRECTORY TO READ DIRS/SUBDIRS/FILES FROM
$dir = "./";
// a function to use our SimpleTree to build a menu from a directory structure
function bmenu($dir, $node = NULL) {
if($node == NULL)
$node = new TreeNode($dir);
$cdir = scandir($dir);
foreach ($cdir as $key => $value) {
if (!in_array($value, array(".", ".."))) {
if (is_dir($dir . DIRECTORY_SEPARATOR . $value)) {
$new_node = $node->addChild(new TreeNode($value));
bmenu($dir . DIRECTORY_SEPARATOR . $value, $new_node);
} else {
$node->addChild(new TreeNode($value));
}
}
}
}
// create a new menu // .. using the extended class to seperate the render() method
$menu = new SimpleTree_Extended(new TreeNode('Main Menu'));
// our main node title that is visible
$node = new TreeNode('ROMS');
// build the menu from the directory structure
bmenu($dir, $node);
// add the node to the menu
$menu->root->addChild($node);
echo "</pre> ";
echo $menu->render();
// END DIRECTORY LISTING EXAMPLE
//
?>
</body>
</html>
|
Download
