I have made dynamic menu using mysql php. Everything is working fine on the desktop. But the issue is that it adds dropdown-menu class to every ul because of which the submenu will become non clickable as it tries to open other submenu because of dropdown class. Here is my code. Please check it on both mobile version and desktop version.
Database Table:
CREATE TABLE `tbl_menu` (
`id` int(10) UNSIGNED NOT NULL,
`label` varchar(200) NOT NULL DEFAULT '',
`link` varchar(100) NOT NULL DEFAULT '',
`parent` int(10) UNSIGNED NOT NULL DEFAULT '0',
`sort` int(10) UNSIGNED NOT NULL DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `tbl_menu` (`id`, `label`, `link`, `parent`, `sort`) VALUES
(1, 'Home', 'index.php', 0, 1),
(2, 'Offer Store', '#', 0, 2),
(3, 'Adidas', 'coupon_brand_store.php?id=20&page=1', 2, 3),
(4, 'Deal Store', '#', 0, 7),
(5, 'Nike', 'deal_brand_store.php?id=20&page=1', 4, 8),
(6, 'Mcd', 'coupon_brand_store.php?id=22&page=1', 2, 4),
(7, 'ON', 'coupon_brand_store.php?id=19&page=1', 2, 5),
(8, 'Walmart', 'coupon_brand_store.php?id=25&page=1', 2, 6),
(9, 'Tacos', 'deal_brand_store.php?id=21&page=1', 4, 9),
(10, 'Herblife', 'deal_brand_store.php?id=22&page=1', 4, 10),
(11, 'GAS', 'deal_brand_store.php?id=19&page=1', 4, 11),
(12, 'Offers Store', '#', 0, 12),
(13, 'PUMA', 'ecommerce.php?id=19&page=1', 12, 13),
(14, 'REEBOK', 'ecommerce.php?id=20&page=1', 12, 14),
(15, 'All Stores', 'allstores.php', 0, 15),
(17, 'All Coupons', 'coupons.php', 0, 16),
(18, 'All Deals', 'exclusive.php', 0, 17);
This is the PHP code to print the navigation menu:
function get_menu_tree($parent_id)
{
global $con;
$menu = "";
$sqlquery = " SELECT * FROM tbl_menu where parent='" .$parent_id . "' order
by sort";
$res=mysqli_query($con,$sqlquery);
while($row=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
$menu .="<li ><a href='".$row['link']."'>".$row['label']."</a>";
$menu .= "<ul class='dropdown-menu'>".get_menu_tree($row['id'])."
</ul>"; //call recursively
$menu .= "</li>";
}
return $menu;
}
?>
<div id="main-menu" class="wa-main-menu main-menu">
<!-- Menu -->
<div class="wathemes-menu relative">
<!-- navbar -->
<div class="navbar navbar-default theme-bg mar0" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="navbar-header">
<!-- Button For Responsive toggle -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Navbar Collapse -->
<div class="navbar-collapse collapse">
<div class="row">
<ul class="nav navbar-nav">
<?php echo get_menu_tree(0);//start from root menus having parent id 0 ?>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And if i remove the dropdown clas from the ul the dropdown menu stops working.