Tips and Trick Customize Navigation Menu (Home, Notes, Blog, Photos...)

Maksud dari "Customize Navigation Menu" adalah memberikan nuansa lain kepada menu standart multiply.com.

Tutorial atau tips ini adalah asli buah pemikiran saya sendiri, dan bukan nyontek dari site siapapun. Baik di dalam MP maupun di luar MP.
Tips ini akan kelihatan sedikit aneh, karena belum banyak yang memakai maupun mengulasnya.
Saya juga belum pernah menemui trik ini dipakai oleh user multiply.com ( atau saya yang kurang keluyuran. Jadi ... mohon maaf jika sudah ada).

Menu yang dimaksud adalah menu navigasi untuk mengarahkan user ke page item seperti

Home  Notes  Blog  Photos  Video  Music  Calendar  Reviews  Links

Menu ini bisa saya ganti warna background maupun text-nya serta jenis font dan ukurannya.
Tetapi saya tidak bisa merubah ejaan text dari menu tersebut, seperti merubah "Blog" menjadi "Jurnal" atau "Music" menjadi "Lagu-lagu" atau "Home" menjadi "Beranda" kecuali jika saya agak memaksakan sedikit penggantian ini dengan mengisikannya pada Page Title seperti yang dijelaskan di group trick mp pada journal Merubah text menu di Navigation Bar (Navigation Menu)  tetapi trick ini mempunyai resiko, yaitu apapun text pengganti menu saya, akan menjadi bagian dari Page Title saya.
Sebuah dampak yang saat ini tidak saya kehendaki karena kadang "Page Title" saya akan tampak sedikit "nyleneh" walau bagi sebagian user, ini tidaklah menjadikan hal mengganggu.

Jika saya akan menambahkan background pada menu tersebut, background itu akan tampil kembar.
Maksudnya, setiap text menu akan mempunyai gambar background yang sama, tidak independent atau sendiri-sendiri.
Seperti menu Home background-nya bunga, Music background-nya gambar CD dan seterusnya.

Kunci dari trick ini adalah, memberikan background masing-masing yang berbeda kepada setiap text menu.
Apabila saya bisa mengganti background per item-nya, background juga bisa saya fungsikan sebagai tampilan tombol / button.
Jika berhasil, saya akan mempunyai menu yang terdiri dari beberapa tombol dan tentunya saya bisa memberi text apa saja pada tombol tersebut.
Simak baik-baik penjelasan saya berikut ini ( *wedew, promosi ).

Base theme : AVLACK
Mengapa avlack yang saya pakai sebagai contoh ?
Jawabannya sederhana dan seperti biasanya, saya kurang paham yang lainnya.


Menu saya akan terlihat seperti gambar di atas.
Atau bisa juga seperti berikut ini.


Langkah pertama, saya akan membuat latar belakang tempat tombol menjadi abu-abu dan me-nyeting tinggi serta paddingnya.

div#subnavc {
background-color: Silver;
border-top: medium none;
height: 30px;
padding: 4px;
width: auto;
}

Berikutnya, menempatkan jajaran tombol menu agar berada di tengah bar abu-abu.

div#subnav {
background: transparent none repeat scroll 0 0;
border: medium none;
height: auto;
padding: 4px 1px 1px 5px;
}

Nah, bagian berikut ini adalah bagian yang paling membuat saya frustasi, saya harus  menuliskan kodenya satu persatu karena setiap tombol menu mempunyai 2 gambar tombol.
Satu untuk menu aktif / dipilih / selected menu (menu sesuai page-nya) dan satu untuk menu yang tampil dan tidak sedang dipilih.

Untuk tombol home, akan terdiri dari 2 gambar :


Jadi, apabila kapasitas penuh dengan model standart, akan ada 16 image + 16 pengaturan selektor .. wow.

Berikut bagian yang mengatur besaran tombol, lebar di-set ke ukuran fix serta menentukan margin-nya, agar menu tidak terlalu mepet satu sama lain.

a.topt, a.topt:visited,a.toptsel, a.toptsel:visited {
color:#FFFFFF;
display:block;
float:left;
font-size:0px;
height:21px;
line-height:21px;
margin-left:1px;
margin-right:1px;
padding:2px;
text-align:center;
width:80px;
}

Jika CSS untuk pengaturan bar abu-abu seperti di atas sudah di-set. Saatnya untuk memasukkan button image / gambar tombol ke dalam CSS.
Berikut adalah kode lengkap, termasuk kode-kode yang saya jelaskan di atas.
Tambahkan semuanya ke dalam CSS anda dan jika anda menemui nama selector yang sama, ganti dengan yang ada di kumpulan kode berikut ini.

div#subnavc {
background-color:Silver;
border-top:none;
height:30px;
padding:4px;
width:auto;
}
div#subnav {
background:transparent none repeat scroll 0 0;
border:medium none;
height:auto;
padding:4px 1px 1px 5px;
}
a.topt, a.topt:visited,a.toptsel, a.toptsel:visited {
color:#FFFFFF;
display:block;
float:left;
font-size:0px;
height:21px;
line-height:21px;
margin-left:1px;
margin-right:1px;
padding:2px;
text-align:center;
width:80px;
}
a[href="/"].toptsel , a[href="/"].toptsel:visited  {
background:transparent url(http://img7.imageshack.us/img7/5576/home2hh4.png) no-repeat scroll 0 0;
}
a[href="/journal"].toptsel, a[href="/journal"].toptsel:visited  {
background:transparent url(http://img26.imageshack.us/img26/7007/jurnal2nc0.png) no-repeat scroll 0 0;
}
a[href="/photos"].toptsel, a[href="/photos"].toptsel:visited {
background:transparent url(http://img8.imageshack.us/img8/6375/foto2iq4.png) no-repeat scroll 0 0;
}
a[href="/video"].toptsel, a[href="/video"].toptsel:visited {
background:transparent url(http://img27.imageshack.us/img27/4369/video2lv5.png) no-repeat scroll 0 0;
}
a[href="/music"].toptsel,  a[href="/music"].toptsel:visited {
background:transparent url(http://img26.imageshack.us/img26/1732/musik2cr8.png) no-repeat scroll 0 0;
}
a[href="/calendar"].toptsel, a[href="/calendar"].toptsel:visited {
background:transparent url(http://img4.imageshack.us/img4/5851/kalender2kl9.png) no-repeat scroll 0 0;
}
a[href="/reviews"].toptsel, a[href="/reviews"].toptsel:visited {
background:transparent url(http://img13.imageshack.us/img13/4917/tinjauan2oj1.png) no-repeat scroll 0 0;
}
a[href="/links"].toptsel, a[href="/links"].toptsel:visited {
background:transparent url(http://img24.imageshack.us/img24/4557/tautan2ro2.png) no-repeat scroll 0 0;
}


a[href="/"].topt, a[href="/"].topt:visited  {
background:transparent url(http://img24.imageshack.us/img24/5204/home1zt7.png) no-repeat scroll 0 0;
}
a[href="/journal"].topt, a[href="/journal"].topt:visited  {
background:transparent url(http://img13.imageshack.us/img13/1416/jurnal1qu3.png) no-repeat scroll 0 0;
}
a[href="/photos"].topt, a[href="/photos"].topt:visited {
background:transparent url(http://img26.imageshack.us/img26/2458/foto1bt3.png) no-repeat scroll 0 0;
}
a[href="/video"].topt, a[href="/video"].topt:visited {
background:transparent url(http://img26.imageshack.us/img26/5927/video1xg0.png) no-repeat scroll 0 0;
}
a[href="/music"].topt,  a[href="/music"].topt:visited {
background:transparent url(http://img16.imageshack.us/img16/8917/musik1mt0.png) no-repeat scroll 0 0;
}
a[href="/calendar"].topt, a[href="/calendar"].topt:visited {
background:transparent url(http://img17.imageshack.us/img17/2090/kalender1qf6.png) no-repeat scroll 0 0;
}
a[href="/reviews"].topt, a[href="/reviews"].topt:visited {
background:transparent url(http://img7.imageshack.us/img7/6634/tinjauan1oi6.png) no-repeat scroll 0 0;
}
a[href="/links"].topt, a[href="/links"].topt:visited {
background:transparent url(http://img22.imageshack.us/img22/4082/tautan1ad8.png) no-repeat scroll 0 0;
}

Catatan : Semua alamat image, bisa anda rubah dengan alamat URL image anda.

Untuk men-generate button, anda bisa membuatnya melalui Online Button Genetaror.
Salah satunya, seperti yang saya pakai untuk men-generate tombol-tombol di atas adalah :



Semoga bermanfaat.
Enjoy.