<?php
/*
Name: SB Menu - A PHP Class for Building Menus - Simple Test Usage
File: class.sb_menu.test.simple.php
License: BSD 3-Clause License <https://opensource.org/licenses/BSD-3-Clause>
Description: An example usage of class to create/modify/save/load/display a menu tree.
Info:
I left js and css in this file to keep it more contained
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
## BEGIN PHP SIDE EXAMPLE ##
// $menu = new Tree(new TreeNode('Main Menu')); // if you just want to use base class
$menu = new SimpleTree_Extended(new TreeNode('Main Menu')); // .. or the extended class to seperate the render() method
$last_menu = $menu->root->addChild(new TreeNode('Submenu 1'));
$last_menu = $menu->root->addChild(new TreeNode('Submenu 2'));
// another level
$next_level = $last_menu->addChild(new TreeNode('Item 2.1'));
// another level
$next_level = $next_level->addChild(new TreeNode('Item 2.1.1'));
$last_menu = $menu->root->addChild(new TreeNode('Submenu 3'));
// add to root menu choices
$submenu = $menu->root->addChild(new TreeNode('Submenu 4'));
// another level
$next_level = $submenu->addChild(new TreeNode('Item 4.1'));
// another level
$next_level = $next_level->addChild(new TreeNode('Item 4.1.1'));
// another level
$next_level = $next_level->addChild(new TreeNode('Item 4.1.1.1'));
// ... etc
$next_level = $submenu->addChild(new TreeNode('Item 4.2'));
$next_level->data['url'] = "https://www.google.com"; // handled in extended class
$next_level->data['target'] = "_blank"; // handled in extended class
$next_level = $submenu->addChild(new TreeNode('Item 4.3'));
// another level
$next_level = $next_level->addChild(new TreeNode('Item 4.3.1'));
// another level
$next_level = $next_level->addChild(new TreeNode('Item 4.3.1.1'));
# save
$menu->save('menu-simple.txt');
# load
$menu2 = $menu->load('menu-simple.txt');
## END PHP SIDE EXAMPLE ##
?>
<!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
# render the menu
echo $menu2->render();
?>
</body>
</html>
|
Download
