Take an array and build a menu UL list from it. The array should support top-level as well as child links. In fact, it should support an unlimited number of child links.
Array
$links = [
[
'name' => 'Introduction',
'url' => 'introduction',
],
[
'name' => 'Install',
'url' => 'install',
]
];
This contains 2 links, both would be top level.
BuildList Function
Creating a function to build the UL menu.
function buildList(array $array): string
{
$menu = "<ul>";
foreach($array as $item) {
$menu .= "<li><a href='{$item['url']}'>{$item['name']}</a></li>";
}
$menu .= "</ul>";
return $menu;
}
Pass in the array. Define a $menu string this will hold the ul items.
Loop over the array, for each item print out an LI link. Using the keys url and name.
Finally return the menu.
To print the menu:
Usage
echo buildList($links);
This would output:
Introduction
Install
Adding Child items
Let's add children to the array. Add a children array, this will contain its own array keys for each item:
$links = [
[
'name' => 'Introduction',
'url' => 'introduction',
'children' => [
[
'name' => 'Install',
'url' => 'introduction/install'
],
[
'name' => 'Application Register',
'url' => 'introduction/application-register',
],
],
]
];
Now update the function to handle children:
function buildList(array $array): string
{
$menu = "<ul>";
foreach($array as $item) {
$menu .= "<li><a href='{$item['url']}'>{$item['name']}</a></li>";
if (isset($item['children'])) {
$menu .= $this->buildList($item['children']);
}
}
$menu .= "</ul>";
return $menu;
}
Check if the array item contains a children key, if it does then pass the children segment to the same function, this is a recursive function so it can call this as many times as the children key exists.
This will now output:
- Introduction
Multiple Items
Now lets add more items to the array:
$links = [
[
'name' => 'Introduction',
'url' => 'introduction',
'children' => [
[
'name' => 'Install',
'url' => 'introduction/install'
],
[
'name' => 'Application Register',
'url' => 'introduction/application-register',
],
],
],
[
'name' => 'MsGraph',
'url' => 'msgraph',
'children' => [
[
'name' => 'Login with MsGraph',
'url' => 'msgraph/login'
],
[
'name' => 'Contacts',
'url' => 'msgraph/contacts',
'children' => [
[
'name' => 'Create',
'url' => 'msgraph/contacts/create'
],
[
'name' => 'Edit',
'url' => 'msgraph/contacts/edit',
],
],
],
],
]
];
We don't need to update the function since its recursive. Again calling
echo buildList($links);
Will output:
Introduction
MsGraph
I've removed all the links from the outputs above.
This now allows you to build a UL menu with unlimited items.
Top comments (0)