Codeigniter Tutorials

Home » Codeigniter »

How to create Dynamic navigation menu and sub menu

Controller

File Name :

<?php
defined("BASEPATH") OR exit('no direct script access allowed');
class Navigation_menu extends CI_Controller
{
public function __construct()
{
parent::__construct();
}
public function index()
{
$data = array();
$data['title'] = "Demo";
$data['main_menu'] = $this->Auth_model->get_main_menu();
$data['sub_menu'] = $this->Auth_model->get_sub_menu();
$this->load->view('navigation_menu', $data);
}

}

Model

public function get_main_menu()
{
$this->db->select('*');
$this->db->from("menu_parent");
$qry = $this->db->get();
$result = $qry->result();
return $result;
}

public function get_sub_menu()
{
$this->db->select('*');
$this->db->from("menu_children");
$qry = $this->db->get();
$result = $qry->result();
return $result;
}

view

<html>
<head>
<style type="text/css">
ul {list-style: none;padding: 0px;margin: 0px;}
ul li {display: block;position: relative;float: left;border:1px solid #000}
li ul {display: none;}
ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
white-space: nowrap;color: #fff;}
ul li a:hover {background: #f00;}
li:hover ul {display: block; position: absolute;}
li:hover li {float: none;}
li:hover a {background: #f00;}
li:hover li a:hover {background: #000;}
.drop-nav li ul li {border-top: 0px;}
</style>
</head>
<body>

<div class="drop-nav">
<ul>
<?php foreach ($main_menu as $menurow) { ?>
<?php if($menurow->p_id){?>

<li><a href="#"><?php echo $menurow->menu_name;?></a>
<ul>

<?php foreach($sub_menu as $subrow){?>
<?php if($subrow->fk_p_id == $menurow->p_id) {?>
<li><a href="#"><?php echo $subrow->cm_name;?></a></li>
<?php }?>
<?php }?>
</ul>
</li>

<?php } else { ?>

<li><a href="#"><?php echo $menurow->menu_name; ?></a></li>

<?php }?>

<?php }?>
</ul>
</div>

<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<ul id="drop-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Aboutus</a></li>
<li><a href="#">Men</a>
<ul>
<li><a href="#">Jeans</a></li>
<li><a href="#">Shirt</a></li>
<li><a href="#">Tshirt</a></li>

</ul>
</li>
<li><a href="#">Woman</a>
<ul>
<li><a href="#">Suit</a></li>
<li><a href="#">Kirti</a></li>
</ul>
</li>
<li><a href="#">Accessories</a></li>
<li><a href="#">Contactus</a></li>
</ul>

</body>
</html>

Table : -

CREATE TABLE `menu_parent` (
`p_id` int(11) NOT NULL,
`menu_name` varchar(32) NOT NULL,
`menu_link` varchar(64) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `menu_parent` (`p_id`, `menu_name`, `menu_link`) VALUES
(1, 'Home', ''),
(2, 'Aboutus', ''),
(3, 'Man', ''),
(4, 'Woman', ''),
(5, 'Accessories', ''),
(6, 'Contactus', '');

CREATE TABLE `menu_children` (
`c_id` int(11) NOT NULL,
`cm_name` varchar(32) NOT NULL,
`cm_link` varchar(64) NOT NULL,
`fk_p_id` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `menu_children` (`c_id`, `cm_name`, `cm_link`, `fk_p_id`) VALUES
(1, 'Jeans', '', 3),
(2, 'shirt', '', 3),
(3, 'tshirt', '', 3),
(4, 'cap', '', 3),
(5, 'suit', '', 4),
(6, 'kurti', '', 4);

Itechtuto