PHP Classes

File: class.sb_menu.test.simple.php

Recommend this page to a friend!
  Classes of JImmy Bo   SB PHP Menu Builder   class.sb_menu.test.simple.php   Download  
File: class.sb_menu.test.simple.php
Role: Example script
Content type: text/plain
Description: Example Extended Class and Usage
Class: SB PHP Menu Builder
Create menus and store definitions in files
Author: By
Last change:
Date: 5 months ago
Size: 9,581 bytes
 

Contents

Class file image Download
<?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 = "&nbsp;&nbsp;&nbsp;";
               
$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>