Member Avatar for Rico_2

hii, i want to ask how to loop this array for menu like in images

    public $list = [
        [
            'id' => 'dashboard',
            'text' => 'Dashboard',
            'icon' => 'feather-home',
        ],
        [
            'id' => 'data_tables',
            'text' => 'DataTables',
            'icon' => 'feather-layers',
            'children' => [
                ['id' => 'basic', "text" => "Basic"],
                ['id' => 'striped', "text" => "Striped"],
                ['id' => 'custom', "text" => "Custom"],
                ['id' => 'misc', "text" => "Miscellaneous"]
            ]
        ],
        [
            'id' => 'item_list',
            'text' => 'Item List',
            'icon' => 'feather-list',
            'children' => [
                ['id' => 'it1a', "text" => "Item Level 1a"],
                ['id' => 'it1b', "text" => "Item Level 1b"],
                ['id' => 'it1c', "text" => "Item Level 1c",
                    'children' => [
                        ['id' => 'it2a', "text" => "Item Level 2a"],
                        ['id' => 'it2b', "text" => "Item Level 2b"],
                        ['id' => 'it2c', "text" => "Item Level 2c"],
                        ['id' => 'it2d', "text" => "Item Level 2d",
                            // need to delete
                            'children' => [
                                ['id' => 'it3a', "text" => "Item Level 3a"],
                                ['id' => 'it3b', "text" => "Item Level 3b"],
                                ['id' => 'it3c', "text" => "Item Level 3c"],
                                ['id' => 'it3d', "text" => "Item Level 3d",

                                    'children' => [
                                        ['id' => 'it4a', "text" => "Item Level 4a"],
                                        ['id' => 'it4b', "text" => "Item Level 4b"],
                                        ['id' => 'it4c', "text" => "Item Level 4c"],
                                        ['id' => 'it4d', "text" => "Item Level 4d",
                                            'children' => [
                                                ['id' => 'it5a', "text" => "Item Level 5a"],
                                                ['id' => 'it5b', "text" => "Item Level 5b"],
                                                ['id' => 'it5c', "text" => "Item Level 5c"],
                                                ['id' => 'it5d', "text" => "Item Level 5d",

                                                'children' => [
                                                    ['id' => 'it6a', "text" => "Item Level 6a"],
                                                    ['id' => 'it6b', "text" => "Item Level 6b"],
                                                    ['id' => 'it6c', "text" => "Item Level 6c"],
                                                    ['id' => 'it6d', "text" => "Item Level 6d"]
                                                ]


                                                ]
                                            ]

                                        ]
                                    ]


                                ]
                            ]

                        ]
                    ]
                ],
            ]
        ],
    ];

and this is the menu li html

<li class="menu">
<a href="#menuLevel1" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
  <div class="">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list"><line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line><line x1="3" y1="18" x2="3.01" y2="18"></line></svg>
    <span>Item Level</span>
  </div>
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
  </div>
</a>
<ul class="collapse submenu list-unstyled" id="menuLevel1" data-bs-parent="#accordionExample">
  <li>
    <a href="javascript:void(0);"> Item Level 1a </a>
  </li>
  <li>
    <a href="javascript:void(0);"> Item Level 1b </a>
  </li>

  <li>
    <a href="#level-three" data-bs-toggle="collapse" aria-expanded="false" class="dropdown-toggle collapsed"> Item Level 1c <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg> </a>
    <ul class="collapse list-unstyled sub-submenu" id="level-three" data-bs-parent="#pages"> 
      <li>
        <a href="javascript:void(0);"> Item Level 2a </a>
      </li>
      <li>
        <a href="javascript:void(0);"> Item Level 2b </a>
      </li>
      <li>
        <a href="javascript:void(0);"> Item Level 2c </a>
      </li>
    </ul>
  </li>
</ul>
</li>

Screenshot_26.png

  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by AndrisP

Recommended Answers

All 2 Replies

Member Avatar for AndrisP

Use recursive printing e.g.

<?php
function print_recursive($list){
    echo '<ul>';
    foreach($list as $item){
        echo '<li id="'.$item['id'].'">'.$item['text'];
        if( isset($item['children']) ){
            print_recursive($item['children']);
        }
        echo '</li>';
    }
    echo '</ul>';
}
print_recursive($list);
?>
Edited by AndrisP
Member Avatar for AndrisP

And do not redefine svg objects on each use it, reuse defined objects instead e.g.
css

#svg_sources {
    position: fixed;
    top: 0;
    left: 0;
}

html

<html xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg">
<head>
...
</head>
<body>
<div id="svg_sources">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="0" height="0">
    <defs>
        <g id="menu_lines">
            <line x1="3" y1="0" x2="3.01" y2="0" />
            <line x1="8" y1="0" x2="21" y2="0" />
        </g>
        <g id="menu_icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
            <use xlink:href="#menu_lines" transform="translate(0,6)" />
            <use xlink:href="#menu_lines" transform="translate(0,12)" />
            <use xlink:href="#menu_lines" transform="translate(0,18)" />
        </g>
        <polyline id="menu_bullet" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list" points="9 18 15 12 9 6" />
    </defs>
</svg>
</div>

php

function print_recursive($list){
    echo '<ul style="list-style-type:none">';
    foreach($list as $item){
        echo '<li id="'.$item['id'].'"><a href="javacript:void(0);"><svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#menu_bullet" /></svg>'.$item['text'];
        if( isset($item['children']) ){
            print_recursive($item['children']);
        }
        echo '</li>';
    }
    echo '</ul>';
}
echo '<svg width="24" height="24" viewBox="0 0 24 24"><use xlink:href="#menu_icon" /></svg>';
print_recursive($list);
Edited by AndrisP
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.