Php Bootstrap 4 Navigation Menu With Sub-menu's

ORIGINAL POST I want to create a navigation menu in PHP with Bootstrap 4. Problem is that one of the

's is not right (the one from dropdown, it doesn't become a dropdown

Solution 1:

I added menu to the database and check if it's 0 or 1. I have dropped the sub-sub menu's, but I will update this post if I add them.

function menu_builder($pdo, $parent_id) {
    $sql = $pdo->prepare("SELECT * FROM menus");
    if ($sql->execute()) {
        while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
             $array[$row['parent_id']][] = $row;
        }
        main_menu($array);
    }
}
function main_menu ($array, $parent_id = 0) {
    if (!empty($array[$parent_id])) {
        foreach ($array[$parent_id] as $item) {
            if ($item['menu'] == '0') {
                echo"  <li class=\"nav-item\">" . PHP_EOL;
                echo"    <a class=\"nav-link\" href=\"#\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
                main_menu($array, $item['id']);
                echo"  </li>" . PHP_EOL;
            }
            elseif ($item['menu'] == '1') {
                echo"  <li class=\"nav-item dropdown\"><a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
                sub_menu($array, $item['id']);
                echo"  </li>" . PHP_EOL;
            }
        }
        //echo "</div>" . PHP_EOL;
        echo"</li>" . PHP_EOL;
    }
}
function sub_menu ($array, $parent_id) {
    if (!empty($array[$parent_id])) {
        echo"    <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">" . PHP_EOL;
        foreach ($array[$parent_id] as $item) {
            echo"      <a class=\"dropdown-item\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
        }
        echo"    </div>" . PHP_EOL;
    }
}

?>
<header class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm">
    <a class="navbar-brand" href="#">Webshop</a>
    <button class="navbar-toggler" style="background: #000000"type="button" data-toggle="collapse" data-target="#navbar-header" aria-controls="navbar-header">
        &#9776;
    </button>
    <div class="navbar-collapse collapse show"id="navbar-header">

        <?php
        echo"<ul class=\"navbar-nav mr-auto\">";
        echo menu_builder($pdo, 0);
        echo"</ul>" . PHP_EOL;    
        ?>
    </div>
</header>

EDIT: To have sub-menu's the code looks like this and you need the following css too.

functionmenu_builder($pdo, $parent_id) {
    $sql = $pdo->prepare("SELECT * FROM menus");
    if ($sql->execute()) {
        while ($row = $sql->fetch(PDO::FETCH_ASSOC)) {
             $array[$row['parent_id']][] = $row;
        }
        main_menu($array);
    }
}
functionmain_menu ($array, $parent_id = 0) {
    if (!empty($array[$parent_id])) {
        foreach ($array[$parent_id] as$item) {
            if ($item['menu'] == '0') {
                echo"            <li class=\"nav-item\">" . PHP_EOL;
                echo"                <a class=\"nav-link\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
                main_menu($array, $item['id']);
                echo"            </li>" . PHP_EOL;
            }
            elseif ($item['menu'] == '1') {
                echo"            <li class=\"nav-item dropdown\">". PHP_EOL;
                echo"                <a class=\"nav-link dropdown-toggle\" href=\"" . $item['url'] . "\" id=\"navbarDropdown\" role=\"button\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
                sub_menu($array, $item['id']);
                echo"            </li>" . PHP_EOL;
            }
        }
    }
}
functionsub_menu ($array, $parent_id) {
    if (!empty($array[$parent_id])) {
        echo"                <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">" . PHP_EOL;
        foreach ($array[$parent_id] as$item) {
            if ($item['sub_menu'] == '0') { 
                echo"                    <a class=\"dropdown-item\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
            }
            elseif ($item['sub_menu'] == '1') {
                echo"                    <div class=\"dropdown-submenu\">" . PHP_EOL;
                echo"                        <a class=\"dropdown-item dropdown-toggle\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
                sub_sub_menu($array, $item['id']);
                echo"                    </div>" . PHP_EOL;
            }
        }
        echo"                </div>" . PHP_EOL;
    }
}
functionsub_sub_menu ($array, $parent_id) {
    if (!empty($array[$parent_id])) {
        echo"                    <div class=\"dropdown-menu\" aria-labelledby=\"navbarDropdown\">" . PHP_EOL;
        foreach ($array[$parent_id] as$item) {
            echo"                        <a class=\"dropdown-item\" href=\"" . $item['url'] . "\">" . $item['menu_naam'] . "</a>" . PHP_EOL;
        }
    }
    echo"                    </div>" . PHP_EOL;
}

The CSS you need for the sub-menu's because bootstrap doesn't have support for it by default (https://stackoverflow.com/a/45755948/2877035):

.dropdown-submenu {
  position: relative;
}

.dropdown-submenua::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu.dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

and the jQuery:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
        $(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
    }
    var $subMenu = $(this).next(".dropdown-menu");
    $subMenu.toggleClass('show');
    $(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
        $('.dropdown-submenu .show').removeClass("show");
    });
    returnfalse;
});