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>