Dalam pembuatan current page atau menu ini kita akan menggunakan jquery dan sedikit tambahan css pada menu navigasi, tidak terlalu rumit caranya seperti berikut:
1. Pertama silahkan buka editor HTML template anda sperti biasanya
2. Letakkan kode berikut ini di atas tag </head>
1234567891011121314151617<script type='text/javascript'>
//<![CDATA[
function extractPageName(hrefString){
var arr = hrefString.split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();}
function setActiveMenu(arr, crtPage){
for (var i=0; i<arr.length; i++){
if(extractPageName(arr[i].href) == crtPage){
if (arr[i].parentNode.tagName != "DIV"){
arr[i].className = "penanda-nav";
arr[i].parentNode.className = "penanda-nav";}}}}
function setPage(){hrefString = document.location.href ? document.location.href : document.location;
if (document.getElementById("id-menu-navigasi")!=null)setActiveMenu(document.getElementById("id-menu-navigasi")
.getElementsByTagName("a"), extractPageName(hrefString));
}
//]]>
</script>
perhatikan kode di atas, silahkan di ubah sesuai dengan ID menu navigasi sobat, untuk contoh saya menggunakan ID id-menu-navigasi.
3. Sisipkan sedikit kode script berikut kedalam elemen menu navigasi sobat
1<script language='javascript'>setPage()</script>
hingga nampak seperti berikut:
12345678910<nav id='id-menu-navigasi'>
<ul>
<li><a href='/'>Depan</a></li>
<li><a href='#'>Tentang</a></li>
<li><a href='#'>Kontak</a></li>
<li><a href='#'>Member</a></li>
<li><a href='#'>Iklan</a></li>
</ul>
<script language='javascript'>setPage()</script>
</nav>
4. Setelah langkah di atas selesai kita buat sedikit css untuk class penanda pada current menunya, contoh saja seperti berikut:
1234.penanda-nav {
background-color:#98CB00;
color:#222;
}
5. Tambahkan css di atas pada css menu navigasi sobat, contoh terlihat seperti di bawah ini:
pada contoh di atas, css menu navigasi saya adalah #id-menu-navigasi dan akan terlihat seperti ini:
1234#id-menu-navigasi li .penanda-nav {
background-color:#98CB00;
color:#222;
}
css di atas hanya sebuah contoh saja agar sobat lebih mudah menerapkan, silahkan di rombak dan rubah sesuai keinginan.
6. Silahkan simpan semua editan template yang sudah di buat dan lihat hasilnya.
demikian saja posting saya tentang membuat current menu atau current page pada menu navigasi, silahkan di jadikan eksperimen dan di pelajari. semoga bermanfaat...
Peraturan dalam berkomentar :
☛ Budayakan berkomentar sesudah membaca artikel.
☛ Dilarang Menghina, Memfitnah, dll.
☛ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, Profokasi.
☛ Berkomentarlah yang Sopan, Bijak, dan Sesuai Artikel.
☛ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.
Copyright © 2015 Template Blog.