Untuk menghindari agar pengunjung website tidak mengklik suatu menu yang sebenarnya sedang dia lihat (aktif), maka menu yang sedang aktif tersebut harus ditandai. Biasanya kita beri tanda dengan memberi warna lain dari menu defaultnya atau dengan menyorotnya (highlite). Dengan demikian jika pengunjung ingin berpindah ke menu lainnya mereka akan mengklik menu yang tidak sedang dihighlite dan terhindar dari mengklik menu yang sebenarnya sedang mereka lihat (baca).
Berikut adalah contoh menyorot (highlite) menu navigasi untuk menu yang disusun dengan menggunakan kode html dan css. Untuk website / blog yang menggunakan kode php khususnya wordpress terdapat kode tersendiri dan tidak dibahas di halaman ini. Sebagai contoh, buat empat berkas html dan satu berkas css sebagai berikut :
1. index.html
2. produk.html
3. kontak.html
4. about.html
5. style.css
Berkas index.html berisi kode sebagai berikut:
<html> <head> <title>Home</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body id="index"> <ul> <li><a href="index.html" id="indexmenu">HOME</a></li> <li><a href="produk.html" id="produkmenu">PRODUK</a></li> <li><a href="kontak.html" id="kontakmenu">CONTACT US</a></li> <li><a href="about.html" id="aboutmenu">ABOUT</a></li> </ul> </body> </html>
Berkas produk.html berisi kode sebagai berikut:
<html> <head> <title>Produk</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body id="produk"> <ul> <li><a href="index.html" id="indexmenu">HOME</a></li> <li><a href="produk.html" id="produkmenu">PRODUK</a></li> <li><a href="kontak.html" id="kontakmenu">CONTACT US</a></li> <li><a href="about.html" id="aboutmenu">ABOUT</a></li> </ul> </body> </html>
Berkas kontak.html berisi kode sebagai berikut:
<html> <head> <title>Kontak</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body id="kontak"> <ul> <li><a href="index.html" id="indexmenu">HOME</a></li> <li><a href="produk.html" id="produkmenu">PRODUK</a></li> <li><a href="kontak.html" id="kontakmenu">CONTACT US</a></li> <li><a href="about.html" id="aboutmenu">ABOUT</a></li> </ul> </body> </html>
Berkas about.html berisi kode sebagai berikut :
<html> <head> <title>About</title> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body id="about"> <ul> <li><a href="index.html" id="indexmenu">HOME</a></li> <li><a href="produk.html" id="produkmenu">PRODUK</a></li> <li><a href="kontak.html" id="kontakmenu">CONTACT US</a></li> <li><a href="about.html" id="aboutmenu">ABOUT</a></li> </ul> </body> </html>
Adapun style.css berisi kode berikut :
body {padding:20px}
ul {padding:20px;font-family:verdana;font-size:12px;}
li {display:inline;margin:10px;padding:0;}
ul a {padding:10px;text-decoration:none}
body#index a#indexmenu,
body#produk a#produkmenu,
body#kontak a#kontakmenu,
body#about a#aboutmenu {
color: #000000;
background: #ffcc00;
}
Sekilas semua file html terlihat sama kodenya, namun ada satu elemen berbeda yang berperan penting yaitu pada tag <body> yang tiap file mempunyai id berbeda. Id pada tag <body> disesuaikan dengan id pada setiap link yang merujuk kepada file yang bersangkutan. Id ini didefinisikan dan diidentifikasikan di file css.
Simpan semua file tersebut dalam satu directory atau folder yang sama, kemudian jalankan salah satu file html. Akan ditampilkan sebuah menu dengan empat link dengan salah satu link dalam keadaan tersorot, yang menandakan bahwa link tersebut sedang aktif. Demikian pula jika setiap link tersebut diklik.
Contoh di atas merupakan dasar yang dapat dikembangkan untuk diimplementasikan pada suatu web dengan jumlah halaman atau kategori yang banyak yang fungsinya adalah untuk memudahkan navigasi kepada pengunjung sehingga mereka tidak perlu untuk mengklik link halaman yang sebenarnya sedang terbuka atau aktif.
Untuk WordPress tambahkan kode berikut ini di file css sesuaikan dengan properti menu yang digunakan theme yang anda gunakan:
.current-menu-item a:link, .current-menu-item a:visited {}
Jika menu dimaksudkan untuk menampilkan halaman blog gunakan kode css berikut:
.current_page_item a:link, .current_page_item a:visited {}
Contoh yang digunakan di blog ini:
.current_page_item a:link, .current_page_item a:visited {background-color:#D52258;}
Makasih banyak, artikelnya simple dan mudah dimengerti 🙂 saya sudah mencoba menerapkannya dan “It’s Work” 🙂