Pada tutorial kita kali ini, kita akan belajar cara membuat menu beserta sub menunya pada tema Apricot CMS.
Nah pada tutorial pertama, kita sudah bisa menampilkan semua daftar menu beserta sub menunya tapi hanya masih berbentuk raw HTML list.
Namun pada tutorial kali ini kita akan membuat menu yang 100% sudah jadi.
Pada pembuatan menu kali ini, kita akan membuat 2 menu. Yang satu menggunakan Cssmenumaker dan yang satunya menggunakan Bootstrap.
Kelebihan dari cssmenumaker dibandingkan dengan bootstrap, cssmenumaker relative lebih mudah dibuat dan support multilevel sub menu . Sedangkan pada bootstrap, hanya mendukung beberapa level sub menu saja dan konfigurasinya agak lebih ribet.
Namun gak masalah. Karena tutorial ini akan mencover kedua-duanya.
Btw sebelum melangkah lanjut pada tutorial ini, saya mau bilang bahwa ini adalah tutorial lanjutan dari tuorial pertama. Semua persiapan dan konfigurasi awal yang dibutuhkan tutorial ini sudah dijelaskan pada tutorial pertama. Yang akan kita lakukan pada tutorial kali ini hanya memodifikasi script yang sudah kita buat sebelumnya.
Jadi pastikan kamu sudah membaca dan mengikuti tutorial yang sebelumnya.
Nah, sekarang kita perlu untuk mempersipkan semua assets yang diperlukan. Yang akan kita butuhkan saat ini adalah jQuery, Bootstrap, dan script gratisan yang didownload dari situs cssmenumaker.com.
Dan semua sudah saya siapkan, silahkan download disini
Download
Perhatian!
Sebenarnya dengan memberikan link dowload source code cssmenumaker sebenarnya saya sudah melanggar ketentuan mereka yang melarang meredistribusikan source code mereka lewat website lain.
Namun perlu saya jelskan bahwa ini saya lakukan demi kepentingan tutorial saja. Semua hak cipta tetaplah milik cssmenumaker.com.
Setelah selesai download, ekstrak semua filenya didalam folder an-theme/latihan/assets
Sudah?
Jika sudah, selanjutnya buka kembali file header.php yang ada didalam folder application/views/latihan
Modifikasi kode yang telah dibuat sebelumnya menjadi seperti ini
header.php
<html>
<head>
<title>Latihan Menu</title>
<link rel="stylesheet" type="text/css" href="<?php echo assets_url('bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?php echo assets_url('css-menu/styles.css') ?>">
<script type="text/javascript" src="<?php echo assets_url('jquery.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('bootstrap/js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('css-menu/script.js') ?>"></script>
<style type="text/css">
body{
background-color: #ccc;
}
</style>
</head>
<body>
<?php
class menu_apricot {
public $CI;
public $menu;
function __construct(){
$this->CI =& get_instance();
}
// fungsi untuk mengambil menu
function ambil_menu($type_menu,$parent=0){
$kondisi=array(
"menu_id"=>$type_menu,
"menu_child_parent" => $parent,
"aktif" => "Y"
);
//query ke database
$this->CI->db->order_by("posisi","ASC");
$query= $this->CI->db->get_where("menu_child",$kondisi);
//cek apakah memiliki hasil
if($query->num_rows()>0){
$this->menu.="<ul>";
foreach ($query->result_array() as $menu) {
$this->menu.= "<li><a href='$menu[menu_child_url]' target='$menu[menu_child_target]'>$menu[menu_child_nama]</a>";
//panggil ambil_menu() secara reqursive untuk mengambil sub-menu nya
$this->ambil_menu($type_menu,$menu['menu_child_id']);
$this->menu.= "</li>";
}
$this->menu.="</ul>";
} else {
//jika tidak ada hasil.
return;
}
}
}
$menuPertama = new menu_apricot;
$menuPertama->ambil_menu(1); //angka 1 adalah ID menu horizontal
?>
<div class="container">
<div id='cssmenu'>
<?php echo $menuPertama->menu; ?>
</div>
</div>
Jangan lupa tutup tag body dan html nya pada file footer.php
footer.php
</body>
</html>
Selanjutnya pada halaman administrator, klik Pengaturan Menu , lalu edit menu utama . Silahkan buat menu, dan atur semua posisi sesuai kebutuhan kamu.
Misalnya seperti ini
Jangan lupa klik tombol Update Posisi setiap kali kamu, mengatur posisi atau menambahkan menu!
Buka Browser kamu lalu buka buka alamat project kamu misalnya "http://localhost/apricot/"
Ini dia hasilnya (screenshot)
Menu Dropdown
Pada tampilan Mobile
Nah, itu adalah menu yang dibuat dengan cssmenumaker. Gampang bukan? :)
Nah sekarang, menggunakan Bootstrap.
Tapi sebelumnya, pada halaman administrator > Pengaturan Menu > menu utama . Silahkan buat menu, rubah dan atur semua posisi sesuai kebutuhan kamu.
Misalnya seperti ini
lalu kembali kepada file header.php Silahkan modifikasi code yang tadi menjadi seperti ini
header.php
<html>
<head>
<title>Latihan Menu</title>
<link rel="stylesheet" type="text/css" href="<?php echo assets_url('bootstrap/css/bootstrap.min.css') ?>">
<link rel="stylesheet" type="text/css" href="<?php echo assets_url('css-menu/styles.css') ?>">
<script type="text/javascript" src="<?php echo assets_url('jquery.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('bootstrap/js/bootstrap.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo assets_url('css-menu/script.js') ?>"></script>
<style type="text/css">
body{
background-color: #ccc;
}
</style>
</head>
<body>
<?php
class menu_apricot {
public $CI;
public $menu;
function __construct(){
$this->CI =& get_instance();
}
// fungsi untuk mengambil menu
function ambil_menu($type_menu,$parent=0){
$kondisi=array(
"menu_id"=>$type_menu,
"menu_child_parent" => $parent,
"aktif" => "Y"
);
//query ke database
$this->CI->db->order_by("posisi","ASC");
$query= $this->CI->db->get_where("menu_child",$kondisi);
//cek apakah memiliki hasil
if($query->num_rows()>0){
$class=$parent==0?"nav navbar-nav":"dropdown-menu";
$this->menu.="<ul class='$class'>";
foreach ($query->result_array() as $menu) {
//cek apakah menu sekarang mempunyai submenu atau tidak
$cek=$this->CI->db->get_where('menu_child',array('menu_child_parent'=>$menu['menu_child_id'],'aktif'=>'Y','menu_id'=>$type_menu));
//jika terdapat sub menu
if($cek->num_rows()>0){
$this->menu.= "<li class='dropdown'><a href='$menu[menu_child_url]' target='$menu[menu_child_target]' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>$menu[menu_child_nama] <span class='caret'></span></a>";
//panggil ambil_menu() secara reqursive untuk mengambil sub-menu nya
$this->ambil_menu($type_menu,$menu['menu_child_id']);
$this->menu.= "</li>";
}
//jika tidak memiliki sub menu
else {
$this->menu.= "<li><a href='$menu[menu_child_url]' target='$menu[menu_child_target]'>$menu[menu_child_nama]</a>";
$this->menu.= "</li>";
}
}
$this->menu.="</ul>";
} else {
//jika tidak ada hasil.
return;
}
}
}
$menuPertama = new menu_apricot;
$menuPertama->ambil_menu(1); //angka 1 adalah ID menu horizontal
?>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sandro ID</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php echo $menuPertama->menu; ?>
</div>
</div>
</nav>
Refresh browser kamu. Dan ini hasilnya
Menu Dropdown
Pada ukuran mobile
Sama dengan yang sudah saya sebutkan diatas, Menu menggunakan Bootstrap memiliki kekurangan. Yaitu:
1.Gak support lebih dari 2 level menu.
2 Menu yang memiliki sub menu, link tidak akan aktif, karena menu tersebut berperan sebagai toggle dropdown.
Nah demikian tutorial kali ini.
Mohon dikoreksi jika ada kesalahan pada tutorial ini. Dan jika ada pertanyaan silahkan tinggalkan pertanyaan dibagian komentar.