Cara Menambahkan Class 'Active' pada Menu Navigasi Web Codeigniter

Class Active khususnya pada menu navigasi digunakan sebagai penanda pada menu tersebut ketika halaman website tersebut dibuka. Dengan adanya class active ini kita dapat membedakan jenis style yang digunakan dengan menu lain yang tidak sedang dibuka saat itu. Misalnya untuk menu yang sedang dibuka diberi background biru sedangkan menu yang lain berwarna putih.

Membuat menu seperti ini tidaklah susah jika Anda membuat website yang hanya beberapa halaman statis saja, tapi bagaimana dengan website yang memiliki banyak halaman? Script menu navigasi biasanya di buat satu file yang tinggal dipanggil pada halaman mana saja yang akan ditampilkan.

Nah cara ini membuat script class="active" tidak boleh kita pasang pada menu home saja atau pada setiap menu yang ada, karena jika dipasang pada menu home maka halaman manapun yang di buka tetap halaman home yang memiliki attribute active begitupun kalau dipasang pada setiap menu yang ada maka semu menu akan memiliki attribute active.

Untuk itu perlu dilakukan modifikasis script class="active" pada menu navigasi. Di codeigniter kita dapat membuat helper khusus yang bisa mengatasi masalah di atas.

Berikut panduan yang bisa anda lakukan untuk menambahkan atribut class="active" pada menu navigasi web codeigniter:

Cara Pertama

---

1. Buat Helper

Caranya buka direktori web - application - helpers. Buat file baru dengan nama menu_helper.php isi dengan script berikut:

<?php if(!defined('BASEPATH')) exit('No direct script access allowed');
if(!function_exists('active_link')) {
 function activate_menu($controller) {
  $CI = get_instance();
  $class = $CI->router->fetch_class();
  return ($class == $controller) ? 'active' : '';
 }
}

2. Tambahkan Menu Helper di autoload.php

Agar helper menu yang telah kita buat dapat berjalan di semua halaman web yang kita buat, maka helper menu harus kita load file tersebut di autoload.php yang ada di (direktori web - application - config - autoload.php). Tambahkan helper menu di array $autoload['helper'] = array('url');, sehingga pada baris tersebut seperti script berikut:

$autoload['helper'] = array('url','menu');

3. Modifikasi Script Menu Navigasi

Langkah terakhir adalah mengubah script menu navigasi cari class="active" kemudian ganti dengan class="<?php echo activate_menu('home');?>". Bagian yang berwarna merah merupakan nama conttroller, untuk lebih jelasnya berikut contoh penerapan yang sering saya gunakan.

<ul class="nav navbar-nav navbar-left">

 <li class="<?php echo activate_menu('profil');?>"><a href="<?php echo base_url('profil');?>" title="About me">Profil</a></li>

 <li class="<?php echo activate_menu('work');?>"><a href="<?php echo base_url('work');?>" title="My work">Work</a></li>

 <li class="<?php echo activate_menu('blog');?>"><a href="<?php echo base_url('blog');?>" title="My Blog">Blog</a></li>

 <li class="<?php echo activate_menu('contact');?>"><a href="<?php echo base_url('contact');?>" title="Contact us">Contact</a></li>

</ul>

Cara Kedua

---

Pada cara pertama di atas hanya bisa gunakan jika menu navigasi kita mengarah ke controller saja dan itu tidak berfungsi jika kita mengambil menu navigasi dari function, maka pada cara ke dua ini kita manfaatkan segment uri.
Untuk penggunaan segment uri perhatikan link: http://belajarci/blog/kategori/codeigniter/

Keterangan:

• belajarci: Folder root web codeigniter
• blog: Nama controller disebut juga uri segment 1 ($this->uri->segment('1'))
• kategori: function kategori di controller blog disebut juga uri segment 2 ($this->uri->segment('2'))
• codeigniter: Method dari function kategori disebut juga uri segment 3 ($this->uri->segment('3'))
• Catatan: segment uri dipisahkan dengan "/"

Bagaimana penerapan segment uri untuk menambahkan attribute class="active" pada menu navigasi web codeigniter? Perhatikn script berikut:

<ul class="nav navbar-nav navbar-left">

<li class="<?php echo activate_menu('profil');?>"><a href="<?php echo base_url('profil');?>">Profil</a></li>

<li class="<?php echo activate_menu('work');?>"><a href="<?php echo base_url('work');?>/">Work</a></li>

<li class="<?php if ($this->uri->segment('1') == 'blog') {echo 'active';} ?>"><a href="<?php echo base_url('blog');?>">Blog</a></li>

<li class="<?php if ($this->uri->segment('2') == 'kategori') {echo 'active';} ?>"><a href="<?php echo base_url('artikel/kategori');?>">Kategori Artikel</a></li>

<li class="<?php if ($this->uri->segment('3') == 'codeigniter') {echo 'active';} ?>"><a href="<?php echo base_url('panduan/programmer/codeigniter');?>">Panduan CodeIgniter</a></li>

</ul>

Pada menu Profil dan Work menggunakan cara yang pertama di atas, sedangkan menu Blog, Kategori Artikel dan Panduan CodeIgniter menggunakan cara yang kedua. Berikut hasil menu dari cara yang kedua:



Jadi kembali lagi pada Anda ingin meggunakan cara yang pertama atau yang kedua atau bisa menggabungkan keduanya.

Sekian panduan cara menambahkan attribute class='Active' pada menu navigasi web CodeIgniter secara otomatis semoga bermanfaat. Jika ada yang kurang di pahami dengan tulisan saya tinggalkan komentarnya. Terima kasih!