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 :
Ini kode htmlnya :
Selesai, trik ini mudah diaplikasikan oleh siapa saja. Semoga bermanfaat. :)
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'/>pastekan kode tersebut sebelum tag end </html> di template anda.
<script type='text/javascript'>
$(document).ready($("#navigation > li").find("a[href='"+window.location.href+"']").parent().addClass("active");});
</script>
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
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 {kode tersebut saya sisipkan ke dalam kode css template yang telah ada.
background: red;
}
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?m=0
[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
Jumlah Kata : | Dipublikasikan pada Friday, December 13, 2013
1 comments:
mantep nech sob info nya
di coba dulu