Crea....>
app/Helpers/menu_helper.php
<?php
if (!function_exists('buildMenu')) {
function buildMenu($items, $isDropdown = false) {
$html = $isDropdown ? '<ul class="nav-dropdown">' : '<ul class="nav-list">';
foreach ($items as $item) {
$hasChildren = !empty($item['children']);
if ($hasChildren) {
$html .= '<li>';
$html .= '<a href="#"' . $item['title'] . '">' . esc($item['title']) . '</a>';
$html .= buildMenu($item['children'], true);
$html .= '</li>';
} else {
$html .= '<li>';
$html .= '<a href="' . site_url($item['url']) . '">' . esc($item['title']) . '</a>';
$html .= '</li>';
}
}
$html .= '</ul>';
return $html;
}
}
public/assets/navigation/css/nav.css
body {
margin: 0;
}
@charset "UTF-8";
.navigation {
height: 70px;
background: #212529;
}
.brand {
position: absolute;
padding-left: 20px;
float: left;
line-height: 70px;
font-size: 1.4em;
}
.brand a,
.brand a:visited {
color: #ffffff;
text-decoration: none;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
}
nav ul li a,
nav ul li a:visited {
display: block;
padding: 0 20px;
line-height: 70px;
background: #212529;
color: #ffffff;
text-decoration: none;
}
nav ul li a:hover,
nav ul li a:visited:hover {
background: #2581DC;
color: #ffffff;
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
padding-left: 4px;
content: " ▾";
}
nav ul li ul li {
min-width: 190px;
}
nav ul li ul li a {
padding: 15px;
line-height: 20px;
}
.nav-dropdown {
position: absolute;
display: none;
z-index: 1;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile navigation */
.nav-mobile {
display: none;
position: absolute;
top: 0;
right: 0;
background: #212529;
height: 70px;
width: 70px;
}
@media only screen and (max-width: 798px) {
.nav-mobile {
display: block;
}
nav {
width: 100%;
padding: 70px 0 15px;
}
nav ul {
display: none;
}
nav ul li {
float: none;
}
nav ul li a {
padding: 15px;
line-height: 20px;
}
nav ul li ul li a {
padding-left: 30px;
}
.nav-dropdown {
position: static;
}
}
@media screen and (min-width: 799px) {
.nav-list {
display: block !important;
}
}
#nav-toggle {
position: absolute;
left: 18px;
top: 22px;
cursor: pointer;
padding: 10px 35px 16px 0px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 35px;
background: #ffffff;
position: absolute;
display: block;
content: "";
transition: all 300ms ease-in-out;
}
#nav-toggle span:before {
top: -10px;
}
#nav-toggle span:after {
bottom: -10px;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}
Establece....>
protected $helpers = ['menu'];
en app/Controllers/BaseController.php
Configura....>
app/Config/Menus.php
<?php
namespace Config;
use CodeIgniter\Config\BaseConfig;
class Menus extends BaseConfig {
public $main_menu = [
[
'title' => 'Inicio',
'url' => '/',
'children' => [],
],
[
'title' => 'Control',
'url' => '#',
'children' => [
[
'title' => 'Grupos',
'url' => 'control/grupos',
'children' => [],
],
[
'title' => 'Estudiantes',
'url' => 'control/estudiantes',
'children' => [],
],
[
'title' => 'Listas',
'url' => 'control/listas',
'children' => [],
],
],
],
];
}
Ejemplo de Vista
app/Views/layouts/main.php
<!DOCTYPE html>
<html>
<head>
<title>Mi Aplicación</title>
<link type="text/css" rel="stylesheet" href="<?php echo base_url() . '/assets/navigation/css/nav.css'; ?>" />
<?php
foreach ($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach;?>
</head>
<body>
<section class="navigation">
<div class="nav-container">
<div class="brand">
<a href="<?=site_url('/')?>">Appname</a>
</div>
<nav>
<div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
<ul class="nav-list">
<?php
$config = config('Menus');
echo buildMenu($config->main_menu);
?>
</ul>
</div>
</nav>
</div>
</section>
<?=$this->renderSection('content');?>
<script>
(function($) { // Begin jQuery
$(function() { // DOM ready
// If a link has a dropdown, add sub menu toggle.
$('nav ul li a:not(:only-child)').click(function(e) {
$(this).siblings('.nav-dropdown').toggle();
// Close one dropdown when selecting another
$('.nav-dropdown').not($(this).siblings()).hide();
e.stopPropagation();
});
// Clicking away from dropdown will remove the dropdown class
$('html').click(function() {
$('.nav-dropdown').hide();
});
// Toggle open and close nav styles on click
$('#nav-toggle').click(function() {
$('nav ul').slideToggle();
});
// Hamburger to X toggle
$('#nav-toggle').on('click', function() {
this.classList.toggle('active');
});
}); // end DOM ready
})(jQuery); // end jQuery
</script>
</body>
</html>
app/Views/example.php
<?=$this->extend('layouts/main');?>
<?=$this->section('content');?>
<div style='height:20px;'></div>
<div style="padding: 10px">
<?php echo $output; ?>
</div>
<?php foreach ($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach;?>
<?=$this->endSection();?>