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>
1code-line:1-12code-line:1-23code-line:1-34code-line:1-45code-line:1-56code-line:1-67code-line:1-78code-line:1-89code-line:1-910code-line:1-1011code-line:1-1112code-line:1-1213code-line:1-1314code-line:1-1415code-line:1-1516code-line:1-1617code-line:1-17<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
1code-line:2-1<script language='javascript'>setPage()</script>
hingga nampak seperti berikut:
1code-line:3-12code-line:3-23code-line:3-34code-line:3-45code-line:3-56code-line:3-67code-line:3-78code-line:3-89code-line:3-910code-line:3-10<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:
1code-line:4-12code-line:4-23code-line:4-34code-line:4-4.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:
1code-line:5-12code-line:5-23code-line:5-34code-line:5-4#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...
1 komentar
http://templateswuss.blogspot.co.id/ gan kunjungan baliknya ditunggu
BalasHapusLink aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>