I am trying to create a menu calling specific array values using foreach loops with a fixed number of items (3) and each one going a tier deeper into an inner-associative array that has the information like the text to display, the background image, and the link. I have seen semi-similar questions asked around other forums but nothing that touches this particular span.
I have tried both echoing and printing the keys from the arrays but I keep getting an error that says "cannot redeclare createitem" (the function line) and that it is previously declared 8 lines later on the line with the last closing div tag. I am not really sure what is being redeclared in this case considering that is the only iteration of the function on there.
I understand there are a few more lines that need to be added to finish the loop but assuming the links and includes are pointing to the right files (and my programming syntax is most likely incorrect to handle this particular issue), can anyone tell me the proper way to go about what I am aiming for or maybe even suggest a better way of achieving this? Preferably without databases, but maybe including Javascript?
What I have tried:
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>'
};
};
?>
PAGE.CSS
.backgrounddiv
{
position: absolute;
width: 100px;
height: 100px;
background-image:<!--respective image for each item-->;
}
.textdiv
{
position: absolute;
width: 100px;
height: 100px;
}