Create Multi-Level Dynamic Menu in CodeIgnitor

0

How to Create a Multi-level Dynamic Menu

A lot of people have asked on google about Multi-level dynamic menu, but in results developers do not get appropriate answer. So I am writing this post to solve that problem. It is a bit tricky but not really difficult, try following steps.

Step 1 :

create a table in database where you will save your menu

Table Name : categories

ID Name Parent
1 Automobiles 0
2 Cars 1
3 Toyota 2
4 Bikes 1

 

In this case, Auto Mobile has no parent but cars and bikes are its child and cars gathers one more child Toyota.

Step 2 :

Now you need to create a tree from your database. You can use this query this way.

// This function will return values in array from database

public function getCategoriesAndSubCategories($parent_id = ”)
{
$st=$this->db->query(‘SELECT * from categories’);
$cats=$st->result_array();
$tree = $this->buildTree($cats);
if($parent_id != ”){
for($m=0;$m<sizeOf($tree);$m++){
if($tree[$m][‘id’] == $parent_id){
return $tree[$m];
}
}
}
else{ return $tree; }

}

// This is recursive function, use to build a tree array

function buildTree(array $elements, $parentId = 0) {

$branch = array();

foreach ($elements as $element) {
if ($element[‘parent’] == $parentId) {
$children = $this->buildTree($elements, $element[‘id’]);
if ($children) {
$element[‘children’] = $children;
}
$branch[] = $element;
}
}

return $branch;
}

Tree will look like this

example output:

Array
(
[0] => Array
(
[id]=> 1
[name]=> Automobiles
[parent]=> 0
[children]=> Array
(
[0] => Array
(
[id]=> 2
[name]=> Cars
[parent]=> 1
[children]=> Array
(
[0] => Array
(
[id]=> 3
[name]=> Toyota
[parent]=> 2
[children]=> Array
(
[0] => Array
(
[id]=> 4
[name]=> CD70
[parent]=> 1
)

)

)

 

Step 3 :

On front-end you need to render the menu using this code

<div class=”container” id=”menu-container”>
<ul id=”menu”>
<li><a href=”#”>Home</a></li>
<?php
$newMenu = sizeof($menu_cats);
for($i = 0; $i <$newMenu; $i++){

echo ‘
<li>
<a href=”#”>’;
echo $menu_cats[$i][‘name’];
echo ‘<span class=”caret”></span></a>’;
$buildMenu = buildMenu($menu_cats[$i][‘children’],$ul=true);
echo ‘
</li>’;
}
?>

</ul>
</div>

Did you noticed $buildMenu function ?

It will traverse the tree array and build navigation menu.

function buildMenu($array,$ul,$depth=0)
{
//echo ‘<pre>’;print_r();exit;
if($ul)
{
echo ‘<ul>’;
}
foreach ($array as $item)
{

echo ”;
if($ul)
{
//echo ‘<ul>’;
}
echo ‘<li><a href=””>’.$item[‘name’].'</a>’;
if(!$ul){
echo ‘</li>’;
}

echo ”;
if($ul){
//echo ‘</ul>’;
}
echo ”;
if (!empty($item[‘children’]))
{
buildMenu($item[‘children’],$ul=true,$depth + 1);

}

}
if($ul){
echo ‘</li>’;
echo ‘</ul>’;
}

}

Now style your menu using this CSS

<style>
#menu-container{
padding:10px;
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
}
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 960px;
margin: 0 auto;
display: inherit;
}
#menu:before,
#menu:after {
content: “”;
display: table;
}

#menu:after {
clear: both;
}

#menu {
zoom:1;
}
#menu li {
float: left;

position: relative;
}

#menu a {
float: left;
padding: 12px 18px;
color: #2a2a2a;
font-family:”Benton Sans”, “Helvetica Neue”, Helvetica, Roboto, Arial, sans-serif;
text-decoration: none;
}

#menu li:hover > a {
color: #fff;
background-color: #01411C;
}

html #menu li a:hover { / IE6 only */
color:#D61A21;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
border-radius: 3px;
background:white;
transition: all .2s ease-in-out;
}

#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}

#menu ul ul {
top: 0;
left: 200px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}

#menu ul li {
float: none;
display: block !important;;
border: 0;
_line-height: 0; /*IE6 only*/
// box-shadow: 0 1px 0 #c3c6cf, 0 1px 0 #c3c6cf;
border:1px solid #c3c6cf;
}

#menu ul li:last-child {
box-shadow: none;
}

#menu ul a {
width: 200px;
_height: 10px; /*IE6 only*/
display: block !important;;
white-space: nowrap;
float: none;
text-transform: none;
}

#menu ul a:hover {
background-color: #01411C;
}
#menu ul li:first-child > a {
border-radius: 3px 3px 0 0;
}

#menu ul li:first-child > a:after {
content: ”;
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}

#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #ffffff;
}

#menu ul li:first-child a:hover:after {
border-bottom-color: #ffffff;
}

#menu ul ul li:first-child a:hover:after {
border-right-color: #ffffff;
border-bottom-color: transparent;
}

#menu ul li:last-child > a {
border-radius: 0 0 3px 3px;
}

#menu ul ul {
top: 0;
left: 200px;
margin: 0 0 0 20px;
_margin: 0;
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu li a:hover + .hidden li, .hidden:hover li {
display:block !important;
}
</style>
[10:11:29 AM] Faisal Abbas: <style>
ul {
padding: 0;
margin: 0;
}
li {
display: inline;
position: relative;
}
ul ul {
position: absolute;
display: none;
}
li:hover ul {
display: block;
}
ul ul ul {
left: 100%;
top: 0;
}
li:hover > ul {
display: block;
}
</style>

Enjoy ! if this post really helped you, you can help others by sharing this post to others.

Share.

About Author

Leave A Reply