Codeigniter Multilevel Menu is a library that provide easy way to render multi level menu from plain array or from active record result_array(). It's easy to use and customize. Twitter Bootstrap 3.3 support
- PHP 5.2+
- CodeIgniter 2 or above
- Copy and paste
application/config/multi_menu.phpto your own project - Copy and paste
application/libraries/Multi_menu.phpto your own project
-
In
application/config/multi_menu.php, you can also configure menu structure if necessary:<?php $config["nav_tag_open"] = '<ul class="nav">'; $config["nav_tag_close"] = '</ul>'; $config["item_tag_open"] = '<li>'; $config["item_tag_close"] = '</li>'; $config["item_active_class"] = 'active'; ?>
-
Load the library manually or load automatically definied in
application/config/autoload.phpand it's ready to use. See example below<?php // execute query and get array data $this->load->model("menu_model", "menu"); $items = $this->menu->all(); // load the library and pass the array data $this->load->library("multi_menu"); $this->multi_menu->set_items($items); // call render in view echo $this->multi_menu->render(); ?>
-
By default, this library use several array keys as follow:
idis id for menu itemnamefor menu label or menu caption<a href='#'>{name}</a>keyfor menu key or slug<a href='http://example.com/%7Bkey%7D'>{name}</a>parentfor menu parentorderfor menu order
You can change according to the names of fields in your database table or as needed by defining in
application/config/multi_menu.phpas follow:<?php $config["menu_id"] = 'id'; $config["menu_label"] = 'name'; $config["menu_key"] = 'slug'; $config["menu_parent"] = 'parent'; $config["menu_order"] = 'order'; ?>
This example show how to render multi level menu with default active menu item Item-0
<?php echo $this->multi_menu->render('Item-0'); ?>
This example show how to render multi level menu with Twitter Bootstrap 3.0. For this purpose I use snippet created by msurguy.
<?php
// in controller
public function bootstrap1()
{
$config["nav_tag_open"] = '<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">';
$config["parent_tag_open"] = '<li class="dropdown-submenu">';
$config["parent_anchor_tag"] = '<a tabindex="-1" href="http://github.com/%s">%s</a>';
$config["children_tag_open"] = '<ul class="dropdown-menu">';
$config["item_divider"] = "<li class='divider'></li>";
$this->multi_menu->initialize($config);
$this->load->view("bootstrap1");
}
?>
<?php
// in view
// Render multi menu with default active item `Item-0` and menu items with separator `Item-3` and `Item-5`
echo $this->multi_menu->render('Item-0', array('Item-3', 'Item-5'));
?>
This example show how to render multi level menu with Twitter Bootstrap 3.3. For this purpose I use bootstrap submenu plugin.
<?php echo $this->multi_menu->render(array(
'nav_tag_open' => '<ul class="dropdown-menu" role="menu">',
'parent_tag_open' => '<li class="dropdown-submenu">',
'parent_anchor_tag' => '<a href="http://github.com/%s" data-toggle="dropdown">%s</a>',
'children_tag_open' => '<ul class="dropdown-menu">'
)); ?><div class="collapse navbar-collapse">
<?php echo $this->multi_menu->render(array(
'nav_tag_open' => '<ul class="nav navbar-nav">',
'parentl1_tag_open' => '<li class="dropdown">',
'parentl1_anchor' => '<a tabindex="0" data-toggle="dropdown" href="http://github.com/%s">%s<span class="caret"></span></a>',
'parent_tag_open' => '<li class="dropdown-submenu">',
'parent_anchor' => '<a href="http://github.com/%s" data-toggle="dropdown">%s</a>',
'children_tag_open' => '<ul class="dropdown-menu">'
)); ?>
</div><?php echo $this->multi_menu->render(array(
'nav_tag_open' => '<ul class="nav nav-pills">',
'parentl1_tag_open' => '<li class="dropdown">',
'parentl1_anchor' => '<a tabindex="0" data-toggle="dropdown" href="http://github.com/%s">%s<span class="caret"></span></a>',
'parent_tag_open' => '<li class="dropdown-submenu">',
'parent_anchor' => '<a href="http://github.com/%s" data-toggle="dropdown">%s</a>',
'children_tag_open' => '<ul class="dropdown-menu">',
'item_active' => 'Item-6'
)); ?>
You can choose 3 options:
You can define icon in menu label. See this example data:
<?php
$data = array(
array(
'id' => 1,
'name' => '<i class="fa fa-trash"></i> First Menu', // <--
'parent' => null,
'slug' => 'menu-1',
),
...
);
?>You can define every icon item in your array data. see this example data:
<?php
$data = array(
array(
'id' => 1,
'name' => 'First Menu',
'parent' => null,
'slug' => 'menu-1',
'icon' => 'fa fa-trash' // <--
),
...
);
?>This would generate menu item like so:
<li>
<a href="menu-1"><i class="fa fa-trash"></i> First Menu</a>
</li>Just in case you want position the position the menu on the right side, you can add this line in your configuration:
<?php
$config['icon_position'] = 'right';
?>You can apply menu icon by define icon list in configuration this way:
<?php
$config['menu_icon_lists'] = array(
'slug-menu-1' => 'fa fa-list',
'slug-menu-2' => 'fa fa-plus',
'slug-menu-3' => 'fa fa-trash',
);
?>If you want to add additional item in menu, you can place in first or last position by following this examaple:
<?php // sample menu item that would be injected ?>
<?php $additional_item1 = '<li><a href="#">Additional Item 1</a></li>'; ?>
<?php $additional_item2 = '<li><a href="#">Additional Item 2</a></li>'; ?>
<?php
// call inject_item() method before render() method called
echo $this->multi_menu
->inject_item($additional_item1, 'first')
->inject_item($additional_item2) // at last position by default
->render('Item-0'); ?>