List Menu
A super simple easily customizable nested menu written in javascript with a php/mysql api back end.
<?php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=utf-8");
require 'database.php';
$sql = "SELECT * FROM `menu`";
$result = $db->query($sql);
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
$itemsByReference = array();
foreach($data as $key => &$item) {
$itemsByReference[$item['id']] = &$item;
$itemsByReference[$item['id']]['children'] = array();
$itemsByReference[$item['id']]['data'] = new StdClass();
}
foreach($data as $key => &$item) {
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']])) {
$itemsByReference [$item['parent_id']]['children'][] = &$item;
}
}
foreach($data as $key => &$item) {
if($item['parent_id'] && isset($itemsByReference[$item['parent_id']])) {
unset($data[$key]);
}
}
http_response_code(200);
echo json_encode($data);
?>
<script type="text/javascript">
function onload(){
const api_json = 'http://api.webserver.example/page/menu.php';
fetch(api_json, {
method: 'POST',
headers: {
Accept: 'Access-Control-Allow-Origin: *',
'Content-Type': 'application/json',
},
})
.then((response) => response.json())
.then((data) => {
var menu = data;
menu = '<ul>';
for (let i = 0; i < Object.keys(item).length; i++) {
menu += "<li>";
menu += "<a href='" + Object.values(item)[i]['url'] + "'>" + Object.values(item)[i]['name'] + "</a>";
if(Object.values(item)[i]['children'].length > 0) {
mainMenu += "<ul>";
for(var n = 0; n < Object.values(item)[i]['children'].length; n++) {
menu += "<li>";
menu += "<a href='" + Object.values(item)[i]['children'][n]['url'] + "'>";
menu += Object.values(item)[i]['children'][n]['title'] + "</a>";
menu += "</li>";
}
menu += "</ul>";
}
menu += "</li>";
}
menu += "</ul>";
document.getElementById("menu").innerHTML = menu;
});
}
</script>
<style>
.clear{
clear:both;
}
.menu{
background:#eee;
}
.menu ul{
display:block;
margin:0px;
padding:0px;
list-style:none;
}
.menu ul li{
float:left;
position:relative;
}
.menu ul li a{
display:block;
line-height:40px;
padding:0px 10px;
color:#444;
text-decoration:none;
}
.menu ul li:hover a{
background:#ddd;
}
.menu ul li ul{
position:absolute;
left:0px;
top:40px;
background:#ddd;
visibility:hidden;
opacity:0;
filter:alpha(opacity=0);
-moz-transition:all 0.1s ease-in;
-webkit-transition:all 0.1s ease-in;
transition:all 0.1s ease-in;
}
.menu ul li:hover ul{
visibility:visible;
opacity:1;
filter:alpha(opacity=100);
}
.menu ul li ul li{
float:none;
border-top:solid 1px #bbb;
}
.menu ul li ul li:first-child{
border-top:none;
}
.menu ul li ul li a{
white-space:nowrap;
line-height:normal;
padding:10px;
}
.menu ul li ul li a:hover{
text-decoration:underline;
}
</style>