Mode mobile unactive
  2. tutor sederhana
  3. explorer bootstrap #navList

explorer bootstrap #navList

   
Masih saja bercerita tentang bootstrap, ya, bootstrap memang tidak ada habisnya untuk di explorer. Kali ini saya akan membuat sidebar menu menggunakan nav list punyanya bootstrap. Kode yang saya buat ini tentu saja menu dinamis, di mana untuk setiap halaman yang di buka, akan terseleksi menu dari halaman tersebut. Coba lihat gambar di bawah, ini jika anda berada di halaman home.

Langsung action yuk, mari kita buat fungsinya.
function buatMenu($arrmenu){
  $return = "<div class='well' style='padding: 8px 0;'><ul class='nav nav-list'>";
  $return .= "<li class='nav-header'>Sidebar Menu</li>";
  foreach($arrmenu AS $key => $val){
    $return .= "<li class='".($key == $_GET['p'] ? "active":"")."'><a href='index.php?p=".$key."'>
 <i class='icon ".$val."'></i> ".ucwords($key)."</a></li>";
  }
  $return .= "</ul></div>";
}
Jika fungsi di atas sudah selesai di buat, sekarang saatnya menentukan menu apa saja yang akan di buat lengkap dengan icon-nya. Di sini kita memakai array, bagi yang belum terbiasa dengan array sudah saatnyalah membiasakan okeh ^^.
$menu = array("home"=>"icon-home","about"=>"icon-envelope","contact"=>"icon-info-sign");
Sedikit penjelasan, "contact, home, about" di situ nantinya akan di pakai untuk teks dan page. Coba perhatikan lagi fungsi yang telah di buat pada gambar pertama. Dan di bawah ini adalah cara menampilkan menu tersebut.
echo buatMenu($menu);
Sederhana saja, cukup echo ^^. Jika kesemuanya sudah selesai di buat dengan benar, maka kode html akan tampil seperti berikut.
<ul class="nav nav-list">
<li class="nav-header">Sidebar Menu</li>
 <li><a href="index.php?p=home"><i class="icon icon-home"></i> Home</a></li>
 <li class="active"><a href="index.php?p=about"><i class="icon icon-info-sign"></i> About</a></li>
 <li><a href="index.php?p=contact"><i class="icon icon-envelope"></i> Contact</a></li>
</ul>
Di browser akan tampil seperti ini.
Dan jika kita berpindah halaman, misal kita pilih halaman "about", maka di bar url akan menuju ke "index.php?p=about" dan menu about akan terseleksi secara dinamis. Lihat gambar ini:
Seperti itu saja, mudah bukan? Fungsi yang saya buat di atas adalah sebagai perkenalan saja, dan saya rasa anda yang membaca postingan ini bisa lebih kreatif. Bisa mengerti dan mampu mengexplorer lebih jauh lagi.

Happy Ngoprek!

Sharing this:

Post Terkait explorer bootstrap #navList

No comments explorer bootstrap #navList

Post a Comment

Popular Posts