Trouble Converting my current Menu into Bootstrapped Menu - php

Question

Well, currently I've this main_menu table in my database.
-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Oct 29, 2016 at 04:49 PM
-- Server version: 10.1.13-MariaDB
-- PHP Version: 5.6.20
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET #OLD_CHARACTER_SET_CLIENT=##CHARACTER_SET_CLIENT */;
/*!40101 SET #OLD_CHARACTER_SET_RESULTS=##CHARACTER_SET_RESULTS */;
/*!40101 SET #OLD_COLLATION_CONNECTION=##COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `database`
--
-- --------------------------------------------------------
--
-- Table structure for table `main_menu`
--
CREATE TABLE `main_menu` (
`id` bigint(20) NOT NULL,
`title` text COLLATE utf8_unicode_ci NOT NULL,
`link` mediumtext COLLATE utf8_unicode_ci NOT NULL,
`parentid` bigint(20) NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
--
-- Indexes for dumped tables
--
--
-- Indexes for table `main_menu`
--
ALTER TABLE `main_menu`
ADD PRIMARY KEY (`id`);
--
-- AUTO_INCREMENT for dumped tables
--
--
-- AUTO_INCREMENT for table `main_menu`
--
ALTER TABLE `main_menu`
MODIFY `id` bigint(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=53;
/*!40101 SET CHARACTER_SET_CLIENT=#OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=#OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=#OLD_COLLATION_CONNECTION */;
And I have this code to make dropdown menu (not bootstrapped)
<?php
error_reporting(0);
ini_set('display_errors', 0);
header('Content-Type: text/html; charset=utf-8');
//Set the database connection
// $con1 = mysqli_connect('localhost','root','');
$con1 = mysqli_connect('localhost', '', '');
// mysqli_select_db($con1, 'database_name') or die(mysqli_error($con1));
mysqli_select_db($con1, 'database_name') or die(mysqli_error($con1));
//select all rows from the main_menu table
mysqli_query($con1, "SET NAMES utf8");
$result = mysqli_query($con1, "select id,title,parentid,link from main_menu order by id asc");
//create a multidimensional array to hold a list of menu and parent menu
$menu = array(
'menus' => array(),
'parent_menus' => array()
);
//build the array lists with data from the menu table
while ($row = mysqli_fetch_assoc($result)) {
//creates entry into menus array with current menu id ie. $menus['menus'][1]
$menu['menus'][$row['id']] = $row;
//creates entry into parent_menus array. parent_menus array contains a list of all menus with children
$menu['parent_menus'][$row['parentid']][] = $row['id'];
}
mysqli_set_charset($con1,"utf8");
// Create the main function to build milti-level menu. It is a recursive function.
function buildMenu($parent, $menu) {
$html = "";
if (isset($menu['parent_menus'][$parent])) {
$html .= "<ul>";
foreach ($menu['parent_menus'][$parent] as $menu_id) {
if (!isset($menu['parent_menus'][$menu_id])) {
$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['title'] . "</a></li>";
}
if (isset($menu['parent_menus'][$menu_id])) {
$html .= "<li><a href='" . $menu['menus'][$menu_id]['link'] . "'>" . $menu['menus'][$menu_id]['title'] . "</a>";
$html .= buildMenu($menu_id, $menu);
$html .= "</li>";
}
}
$html .= "</ul>";
}
return $html;
}
?>
It's working until now, but the problem is I've tried copy/paste the code into the bootstrap theme called Karma that I purchased recently, and I can't figure out how to make the menu based on my main_menu table.
Here's the sample bootstrapped navigation code
<div class="sidebar-module">
<nav class="sidebar-nav-v2">
<ul>
<li class="page-arrow active-page">
<i class="fa fa-dashboard"></i> Dashboard <span class="indicator-pill">32</span>
</li>
<li>
<i class="fa fa-sun-o"></i> Statistics<span class="indicator-dot">2</span>
</li>
<li>
<i class="fa fa-bar-chart-o"></i> Charts
</li>
<li>
<i class="fa fa-calendar-o"></i> Calendar
</li>
<li>
<i class="fa fa-envelope-o"></i> Form Elements <i class="fa fa-caret-left pull-right"></i>
<!-- * sub menu * -->
<ul>
<li>
Forms
</li>
<li>
Forgot Form
</li>
<li>
Login Form
</li>
<li>
Login 2 Form
</li>
<li>
Reset Form
</li>
<li>
Signup Form
</li>
<li>
Wizard
</li>
<li>
WYSIWYG
</li>
</ul>
</li>
<li>
<i class="fa fa-file-o"></i> Pages <i class="fa fa-caret-left pull-right"></i>
<!-- * sub menu * -->
<ul>
<li>
Billing
</li>
<li>
Comments
</li>
<li>
Clients
</li>
<li>
FAQs
</li>
<li>
Files
</li>
<li>
Planning
</li>
<li>
Social
</li>
<li>
Ticket Support
</li>
<li>
Timeline
</li>
<li>
Wiki
</li>
</ul>
</li>
<li>
<i class="fa fa-star-o"></i> UI Elements<i class="fa fa-caret-left pull-right"></i>
<!-- * sub menu * -->
<ul>
<li>
Buttons & Icons
</li>
<li>
Notifications
</li>
<li>
Dropdown & Menu
</li>
<li>
Misc
</li>
<li>
Tabs
</li>
<li>
Toolbars
</li>
</ul>
</li>
<li class="seperator">
<!-- * seperator line * -->
</li>
<li>
<i class="fa fa-picture-o"></i> Media
</li>
<li>
<i class="fa fa-wrench"></i> Modules
</li>
<li>
<i class="fa fa-table"></i> Tables
</li>
<li>
<i class="fa fa-th"></i> Page Layout
</li>
<li>
<i class="fa fa-warning"></i> Error Pages <i class="fa fa-caret-left pull-right"></i>
<!-- * sub menu * -->
<ul>
<li>
400
</li>
<li>
401
</li>
<li>
403
</li>
<li>
404
</li>
<li>
500
</li>
<li>
503
</li>
</ul>
</li>
<li class="menu-label">
<div class="spacer-20"></div>
Some group label
<div class="spacer-10"></div>
</li>
<li>
<i class="fa fa-map-marker"></i> Maps
</li>
<li>
<i class="fa fa-columns"></i> Widgets
</li>
<li>
<i class="fa fa-sitemap"></i> Sitemap
</li>
</ul>
</nav>
<!-- End .sidebar-nav-v1 -->
</div>
<!-- End .sidebar-module -->
Can anyone help me converting my old menu into bootstrapped navigation?

Answer 1

There is no bootstrap dropdown class in your html code. here is snippet. make sure to include jquery, bootstrap in your code(which is included in this snippet) the link tag comes under head tag and script tag under body tag.
.navbar-nav > li:hover ul.dropdown-menu, .menu li:hover ul.dropdown-menu{
display: block;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="page-arrow active-page">
<i class="fa fa-dashboard"></i> Dashboard <span class="indicator-pill">32</span>
</li>
<li>
<i class="fa fa-sun-o"></i> Statistics<span class="indicator-dot">2</span>
</li>
<li>
<i class="fa fa-bar-chart-o"></i> Charts
</li>
<li>
<i class="fa fa-calendar-o"></i> Calendar
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-envelope-o"></i> Form Elements <i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>
<!-- * sub menu * -->
<ul class="dropdown-menu">
<li>
Forms
</li>
<li>
Forgot Form
</li>
<li>
Login Form
</li>
<li>
Login 2 Form
</li>
<li>
Reset Form
</li>
<li>
Signup Form
</li>
<li>
Wizard
</li>
<li>
WYSIWYG
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-file-o"></i> Pages <i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>
<!-- * sub menu * -->
<ul class="dropdown-menu">
<li>
Billing
</li>
<li>
Comments
</li>
<li>
Clients
</li>
<li>
FAQs
</li>
<li>
Files
</li>
<li>
Planning
</li>
<li>
Social
</li>
<li>
Ticket Support
</li>
<li>
Timeline
</li>
<li>
Wiki
</li>
</ul>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-star-o"></i> UI Elements<i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>
<!-- * sub menu * -->
<ul class="dropdown-menu">
<li>
Buttons & Icons
</li>
<li>
Notifications
</li>
<li>
Dropdown & Menu
</li>
<li>
Misc
</li>
<li>
Tabs
</li>
<li>
Toolbars
</li>
</ul>
</li>
<li class="seperator">
<!-- * seperator line * -->
</li>
<li>
<i class="fa fa-picture-o"></i> Media
</li>
<li>
<i class="fa fa-wrench"></i> Modules
</li>
<li>
<i class="fa fa-table"></i> Tables
</li>
<li>
<i class="fa fa-th"></i> Page Layout
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-warning"></i> Error Pages <i class="fa fa-caret-left pull-right"></i> <span class="caret"></span></a>
<!-- * sub menu * -->
<ul class="dropdown-menu">
<li>
400
</li>
<li>
401
</li>
<li>
403
</li>
<li>
404
</li>
<li>
500
</li>
<li>
503
</li>
</ul>
</li>
<li class="menu-label">
<div class="spacer-20"></div>
Some group label
<div class="spacer-10"></div>
</li>
<li>
<i class="fa fa-map-marker"></i> Maps
</li>
<li>
<i class="fa fa-columns"></i> Widgets
</li>
<li>
<i class="fa fa-sitemap"></i> Sitemap
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
basically your html code should look like this image