How to Create Responsive Multi Level Dynamic Menu In Codeigniter

Multi Level Dynamic Menuhowdy 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

Dynamic menu codeigniter DEMO

Thank you for reading!!

Do share article  and comment if you have any query.

Written By

vijay1983

Comments :

Leave a Reply