seperti kita ketahui, pada beberapa blog atau website ada yang menerapkan tehnik highlight current page, atau penanda pada navigasi menu untuk sebuah halaman yang sedang kita kunjungi. semisal pada menu navigasi ada menu home – about – dan contact us, maka apabila kita klik menu about, tombol menu about akan berubah warna atau bentuknya sesuai css nya.

pada kesempatan ini penulis ingin memberikan salah satu cara untuk membuat highlight menu current page yang sederhana, tanpa menggunakan javascript.

demo untuk highlight current page

cukup sederhana, namun cukup merepotkan bila mempunyai banyak halaman yang ingin di masukkan ke menu navigasi. kita hanya menambahkan sebuah id pada tiap link navigasi, misal div id=home untuk halaman home dan navigasi home. dan ditiap halaman yang ada pada link navigasi pun juga kita berikan id, agar saat link navigasi di klik, maka halaman dengan id yang dimaksud dapat memanggil id pada CSS.

pada CSS kita dapat membuat link navigasi yang berbeda tampilannya dengan tombol menu pada saat standby maupun pada saat di sorot mouse / hover stat.

download highlight current page files

telah di lihat 209 kali