howdy guys !!
In this post, I will explain the responsive Multi-Level Dynamic Menu In Codeigniter. i will create an example of a multi-level dynamic menu in Codeigniter. I will show the parent and child menu with a nested tree view structure in the Codeigniter application.
You Must read
Codeigniter 4 Crud Operation With source code
How to create dynamic menu from database in codeigniter
In this tutorial i have created “category” table with parent child relation , and in model i have made 3 function to generate raw tree structure(hierarchical data), jquery and css made raw tree structure beautiful multilevel dynamic menu.
if you are beginner of Codeigniter this post can help you to make “Responsive Multi Level Dynamic Menu”
here Very simple step of multi level dynamic menu in Codeigniter.
Responsive Multi Level Dynamic Menu
Step 1
- Download Codeigniter latest version.
- Extract in XAMPP/htdocs in menu
- Edit application/config
1. autoload.php -replace $autoload[‘libraries’]=”;$autoload[‘helper’]=”; with following
$autoload['libraries'] = array('database');
$autoload['helper'] = array('url', 'file');
2. Edit datapase.php : according to your database configuration like username,password,database
3. Edit config.php -$config[‘base_url’] = ”;
$config['base_url'] = 'http://localhost/cidemo/';
4.Edit Route.php -$route[‘default_controller’] = ‘welcome’;
$route['default_controller'] = 'demo/menu';
Step 2
1 Create controller file Demo.php in controller folder
<?php
defined('BASEPATH') or exit('No direct script access allowed');
//require APPPATH . ' / libraries / BaseController.php';
class Demo extends CI_Controller
{
/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/
public function __construct()
{
parent::__construct();
$this->load->model('g_model');
$this->load->helper('string');
ini_set('max_execution_time', 44540);
ini_set('memory_limit', '2048M');
}
public function menu(){
$data['lst']= $this->g_model->CategoryList(1);
$this->load->view('menu',$data);
}
////////////////////////////////////////////////////////////////////////////////////////
}
2.Create model g_model.php in model folder
<?php if(!defined('BASEPATH')) exit('No direct script access allowed');
class G_model extends CI_Model
{
function hasChild($parent_id)
{
$sql = $this->db->query("SELECT COUNT(*) as count FROM tbl_category WHERE parent_id = '" . $parent_id . "'")->row();
return $sql->count;
}
function CategoryList($id)
{
$list = "";
$sql = "SELECT * FROM tbl_category WHERE parent_id=0 ";
$qry = $this->db->query($sql);
$parent = $qry->result();
//print_r($parent);
$mainlist = "<ul>";
foreach($parent as $pr){
$mainlist .= $this->CategoryTree($list,$pr->id,$pr->cat_name,$append = 0);
}
$list .= "</li></ul>";
return $mainlist;
}
function CategoryTree($list,$id,$name,$append)
{
$list = '<li><a href="#">'.$name.'</a>';
if ($this->hasChild($id)) // check if the id has a child
{
$append++;
$list .= "<ul>";
$sql = "SELECT * FROM tbl_category WHERE parent_id =$id";
$qry = $this->db->query($sql);;
$child = $qry->result();
foreach($child as $pr){
$list .= $this->CategoryTree($list,$pr->id,$pr->cat_name,$append);
};
$list .= "</ul>";
}
return $list;
}
}
3. Create view file menu.php in view folder
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
?><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Responsive Multi level hover dropdown Navbar using codeigniter</title>
<meta name="description" content="dynamic Multi level hover dropdown Navbar for codeigniter,bootstrap">
<meta name="keywords" content="dyannamic Multi level hover dropdown Navbar for codeigniter,bootstrap">
<link href="https://fonts.googleapis.com/css?family=Exo+2:300,400" rel="stylesheet">
<!-- required -->
<link rel="stylesheet" type="text/css" media="all" href="<?=base_url()?>assets/css/stellarnav.css">
<!-- required -->
<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
gtag('js',new Date());gtag('config','UA-156360564-1');</script>
<style>
/* styles for this sample only */
*{ margin: 0; padding: 0; }
body { height: 3200px; font-size: 16px; font-family: 'Exo 2', sans-serif; background: #efefef; color: #555; }
.header { text-align: center; }
.header a { padding: 30px 0 0; display: block; font-size: 48px; text-decoration: none; color: #555; }
.header p { margin: 10px 0 40px 0; font-size: 18px; }
.container { max-width: 1200px; margin: 0 auto; }
@media only screen and (max-width : 1000px) {
.stellarnav > ul > li > a { padding: 20px 23px; }
}
/* styles for this sample only */
</style>
</head>
<body>
<div class="header">
<p>Responsive, Lightweight, Multi-Level Dropdown Menu using codeigniter.</p>
</div>
<div class="stellarnav">
<?=$lst?>
</div><!-- .stellarnav -->
<!-- required -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script type="text/javascript" src="<?=base_url()?>assets/js/stellarnav.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('.stellarnav').stellarNav({
theme: 'dark',
breakpoint: 960,
position: 'right',
phoneBtn: '98035',
locationBtn: 'https://www.google.com/maps'
});
});
</script>
<!-- required -->
<script src="https://code.jquery.com/jquery-migrate-3.0.1.js"></script>
</body>
</html>
4. .htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
#If you are having problems with the rewrite rules, remove the "#" from the
#line that begins "RewriteBase" below. You will also have to change the path
#of the rewrite to reflect the path to your base path.
#RewriteBase /
RewriteRule ^/?ajax/(.*)$ ajax.php?$1 [NC,QSA,L]
SetEnv MAGIC_QUOTES 0
SetEnv PHP_VER 5
Options +FollowSymlinks -MultiViews
RewriteEngine On
DirectoryIndex index.php
RewriteCond %{REQUEST_URI} ^system.*
RewriteRule (.*) index.php?/$1 [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt|css)
RewriteRule (.*) index.php?/$1 [L]
</IfModule>
<IfModule mod_headers.c>
Header add Cache-Control: "no-store, no-cache, must-revalidate"
</IfModule>
Now you can run application
localhost/demo
dynamic menu codeigniter DEMO
Thank you for reading!!
Do share article and comment if you have any query.
Tags: beginner of Codeigniter, dynamic menu codeigniter, find multi level menu bootstrap, Responsive Multi Level Dynamic Menu, Responsive Multi Level Dynamic Menu In Codeigniter
subhanit kasandi
please give me source code and db
vijay1983
Sure we will provide u source code
Coiji Ryuna
please give me source code and db
kesavan
Hai i want to know parent and child insertion process
vijay1983
function CategoryTree($list,$id,$name,$append)
{
$list = ‘
if ($this->hasChild($id)) // check if the id has a child
{
$append++;
$list .= “
“;
$sql = “SELECT * FROM tbl_category WHERE parent_id =$id”;
$qry = $this->db->query($sql);;
$child = $qry->result();
foreach($child as $pr){
$list .= $this->CategoryTree($list,$pr->id,$pr->cat_name,$append);
};
$list .= “
“;
}
return $list;
}
}