Многомерный ассоциативный массив вложенное меню div
Я пытаюсь создать меню, вызывающее определенные значения массива, используя циклы foreach с фиксированным количеством элементов (3), и каждый из них идет на уровень глубже во внутренний ассоциативный массив, содержащий такую информацию, как текст для отображения, фоновое изображение и ссылка. Я видел полу-подобные вопросы, задаваемые на других форумах,но ничего, что касалось бы этого конкретного промежутка.
Я пробовал как эхо, так и печать ключей из массивов, но я постоянно получаю ошибку, которая говорит "не может повторно объявить createitem" (функциональная строка) и что она ранее была объявлена 8 строками позже в строке с последним закрывающим тегом div. Я не совсем уверен, что в данном случае объявляется заново, учитывая, что это единственная итерация функции там.
Я понимаю, что есть еще несколько строк, которые нужно добавить, чтобы закончить цикл, но предполагая, что ссылки и включения указывают на правильные файлы (и мой синтаксис программирования, скорее всего, неверен для решения этой конкретной проблемы), может ли кто-нибудь сказать мне правильный путь к тому, к чему я стремлюсь, или, может быть, даже предложить лучший способ достижения этой цели? Желательно без баз данных, но, может быть, включая Javascript?
Что я уже пробовал:
ARRAY.PHP
<?php
$myarray = array(
'item1'=>array(
'text'=>'Item 1',
'image'=>'image1.png',
'link'=>'site.com/link1.php'
),
'item2'=>array(
'text'=>'Item 2',
'image'=>'image2.png',
'link'=>'site.com/link2.php'
),
'item3'=>array(
'text'=>'Item 3',
'image'=>'image3.png',
'link'=>'site.com/link3.php'
)
);
?>
PAGE.PHP
<head>
<link rel="stylesheet" type="text/css" href="page.css" media="screen">
</head>
<?php
include 'array.php';
foreach ($myarray as $menuitem)
{
function createitem()
{
echo '<div class="backgrounddiv"><div= class="textdiv" onclick="location.href='<!--respective link for each item-->';" style="cursor: pointer;"><!--respective text for each item--></div></div>'
};
};
?>
СТРАНИЦА. CSS
.backgrounddiv
{
position: absolute;
width: 100px;
height: 100px;
background-image:<!--respective image for each item-->;
}
.textdiv
{
position: absolute;
width: 100px;
height: 100px;
}