Sepertinya Pemblokir Iklan Anda Aktif
Maaf, Sayangnya blog ini tidak bisa hidup tanpa bantuan dari iklan.
Mohon nonaktifkan terlebih dahulu Pemblokir iklan (misal: Adblock) khusus untuk blog ini.
Setelah Anda menonaktifkan AdBlock, silahkan reload halaman ini.
Terima Kasih, semoga anda selalu dimudahkan pada setiap usaha, serta semoga Tuhan menambah kualitas kesehatan anda sekeluarga.

Jabat tangan
FaRo.

Navigasi aktif biasanya ada pada website toko online atau costumer service, iya karena hal itu memudahkan pengunjung dalam menavigasi halaman yang dia baca.. nah faro akan berbagi cara membuat navigasi aktif menurut url halaman.

Sebagai live preview, silahkan buka link terbaru, daftar isi, tentang kami, kontak kami, dan kebijakan privasi di navigasi atas. Maka hasilnya akan seperti gambar berikut :


Untuk membuatnya, saya menggunakan jQuery.find(), logikanya, saya menggunakan jQuery find untuk mencari link di navigasi yang cocok dengan url di browser pengunjung, hasilnya navigasi yang memiliki link tersebut akan ditandai dengan class active.

Ini kode htmlnya :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready($("#navigation > li").find("a[href='"+window.location.href+"']").parent().addClass("active");});
</script>
pastekan kode tersebut sebelum tag end </html> di template anda.

Memang scriptnya terlihat sederhana,namun hasilnya sangat menarik untuk template web anda. Yang perlu anda ganti adalah teks berwarna merah, teks berwarna merah merupakan id pengenal CSS dari navigasi anda, jika anda membuat template sendiri, anda pasti tahu letaknya, namun jika template anda hasil mendownload dari suatu web penyedia template, umumnya pengenal navigasi yang digunakan adalah #navigation dan .navigation.

Saya sarankan anda membaca artikel ini mengenai navigasi website,
kunjungi : http://goo.gl/fb/U7ZWA

Selanjutnya adalah anda buat sebuah kode CSS untuk tombol navigasi aktif anda. Sebagai contoh di blog ini, saya hanya merubah background navigasi yang aktif menjadi merah, kodenya seperti berikut.
#navigation .active {
background: red;
}
kode tersebut saya sisipkan ke dalam kode css template yang telah ada.

Selesai, trik ini mudah diaplikasikan oleh siapa saja. Semoga bermanfaat. :)

Post link : http://www.blognafaro.com/2013/12/jquery-membuat-navigasi-aktif-sesuai-link-halaman.html

[JQuery] Membuat Navigasi Aktif Sesuai Link Halaman

[JQuery] Membuat Navigasi Aktif Sesuai Link Halaman
Ringkasan : Artikel ini berisi cara membuat navigasi style berbeda sesuai halaman yang dibuka, seperti tombol navigasi pada web news dan toko online. .
Jumlah Kata : | Dipublikasikan pada Friday, December 13, 2013

1 comments:

mantep nech sob info nya
di coba dulu

 
Top