SUPER-TREE-MENU

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Menu</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        body {
            background: #79a0cb;
            font-family: Arial, sans-serif;
            color: #fff;
        }

        .menu {
            width: 300px;
            margin: auto;
        }

        .tree {
            list-style: none;
            padding-left: 20px;
            position: relative;
            color: #fff;
        }

        .tree:before {
            content: '';
            width: 1px;
            background: #fff;
            top: 0;
            bottom: 7px;
            left: 0;
            position: absolute;
        }

        .tree li {
            position: relative;
            margin-top: 10px;
        }

        .tree li:hover, .tree li:focus {
            color: #edebb6;
            cursor: pointer;
        }

        .tree li:before {
            content: '';
            width: 20px;
            height: 1px;
            background: #fff;
            top: 12px;
            left: -20px;
            position: absolute;
        }

        .tree .tree {
            display: none;
        }

        .fa-folder-open-o {
            color: #ff0;
        }

        .fa-folder-o {
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="menu">
        <h2>Folder Tree</h2>
    </div>
    <script>
       

        function createMenu(data) {
            const ul = document.createElement('ul');
            ul.className = 'tree';
            
            data.forEach(item => {
                const li = document.createElement('li');
                const span = document.createElement('span');
                span.className = item.submenu ? 'branch' : 'Leaf';
                span.innerHTML = `<i class="fa...

JavaScript

const menuData = [
            { id: 'item1', title: 'Project-1', submenu: [
                { id: 'subitem1', title: 'Sub-Project', submenu: [
                    { id: 'subsubitem1', title: 'File-1' },
                    { id: 'subsubitem2', title: 'File-2' },
                    { id: 'subsubitem3', title: 'File-3' },
                    { id: 'subsubitem4', title: 'File-4' },
                    { id: 'subsubitem5', title: 'File-5' },
                ] },
                { id: 'subitem2', title: 'Sub-Project2', submenu: [
                    { id: 'subsubitem6', title: 'File-1' },
                    { id: 'subsubitem7', title: 'File-2' },
                    { id: 'subsubitem8', title: 'File-3' },
                    { id: 'subsubitem9', title: 'File-4' },
                    { id: 'subsubitem10', title: 'File-5' },
                ] },
                { id: 'subitem3', title: 'File-1' },
                { id: 'subitem4', title: 'File-2' },
                { id: 'subitem5', title: 'File-3' },
                { id: 'subitem6', title: 'File-4' },
                { id: 'subitem7', title: 'File-5' },
            ] },
            { id: 'item2', title: 'Project-2', submenu: [
                { id: 'subitem8', title: 'Project', submenu: [
                    { id: 'subsubitem11', title: 'File-1' },
                    { id: 'subsubitem12', title: 'File-2' },
                    { id: 'subsubitem13', title: 'File-3' },
                ] },
                { id: 'subitem9', title: 'Project', submenu: [
                    { id: 'subsubitem14', title: 'File-1' },
                    { id: 'subsubitem15', title: 'File-2' },
                ] },
                { id: 'subitem10', title: 'Project', submenu: [
                    { id: 'subsubitem16', title: 'File-1' },
                ] },
            ] },
            { id: 'item3', title: 'Project-3', submenu: [
                { id: 'subitem11', title: 'File-1' },
                { id: 'subitem12', title: 'File-2' },
...