Cara Mengganti Menu Teks menjadi Menu Image

Bosan dengan tampilan menu anda yang berbasis Teks? Kadang tampilan font menjadi kurang sedap dipandang mata begitu font-size kita setting melebihi dari 13-14px. Coba gunakan Menu berbasis Image.

Langkah - langkah :

Pada file style.css di folder thema anda, temukan area css yang berhubungan dengan menu atau primary links, misal saya memakai thema NEWSWIRE dan menemukan element: .primary-links li a (gunakan Firebug/Web Developer Tools from FIREFOX)

Tentukan panjang dan lebar masing-masing menu, Misal kita buat masing-masing menu dengan lebar 150px dan tinggi 37px.

Pada element file style.css di element .primary-links li a, kita tambahkan property baru
width: 150px;
height: 37px;

Gunakan browser Mozilla Firefox, dan dengan bantuan adds-on dari Mozilla Firefox seperti FIREBUG /WEB DEVELOPER (download dulu, cari dengan google), maka kita akan menemukan kelas masing-masing menu sepert ini

Home ----> .menu-196
About Us ---> .menu-197
Services ----> .menu-198

Terus siapkan gambar sebagai background untuk links dan hover, dengan masing-masing lebar 150px dan tinggi 40px

hasil gambar di pindahkan ke folder images pada folder thema anda

(anda bisa gunakan gambar menu berikut untuk praktek)

Tambahkan kode css seperti ini di file style.css (terserah mau diletakkan dimana)

.menu-196 {
background: url(images/menu_home.gif) no-repeat;
}

.menu-196:hover {
background: url(images/menu_home_hover.gif) no-repeat;
}

.menu-197 {
background: url(images/menu_about_us.gif) no-repeat;
}

.menu-197:hover {
background: url(images/menu_about_us_hover.gif) no-repeat;
}

.menu-198 {
background: url(images/menu_services_hover.gif) no-repeat;
}

.menu-198:hover {
background: url(images/menu_services_hover.gif) no-repeat;
}

Save kemudian buka browser, maka gambar background akan muncul, tetapi teks menu masih ada menimpa.

Untuk menghilangkan teks menu, kita kembali lagi ke element .primary-links li a

tambahkan kode css seperti ini,

display: block;
text-indent: -9999px;
overflow: hidden;

Lengkapnya,

.primary-links li a {
width: 150px;
height: 40px;
display: block;
text-indent: -9999px;
overflow: hidden;
}

Semoga berhasil

Fasthan on http://www.fasthanweb.net