Senin, 11 Oktober 2010

Membuat menu DropDown


Ketika jalan-jalan ke blog yang berisi tips-tips wordpress, aku menemukan barisan kategori yang ditampilkan memanjang horisontal dan ada beberapa kategori yang mengandung kategori lain dan ditampilkan secara dropdown. Jika kita lewatkan pointer mouse ke kategori tersebut akan nampak anak kategori lain yang berada dibawah kategori tersebut (lihat gambar).
Cara membuat tampilan kategori di WordPress dalam menu horisontal dropdown tersebut menggabungkan Javascript dan CSS. Berikut langkah-langkahnya yang aku sarikan dari blog tersebut.
1. Langkah pertama adalah buat WordPress menampilkan menu sebagai daftar hirarki tanpa judul
2. Bungkus script tersebut seperti berikut ini sehingga kita dapat mengatur style-nya (di css)





3. Tambahkan kode tersebut dimana kita akan menaruhnya, dalam contoh gambar diatas kode ini ditambahkan di header.php sehinggu menu tersebut muncul dibagian header.
4. Tambahkan kode-kode berikut ke style.css template wordpress yang anda pakai.
ul#menu {
margin: 0;
padding: 0;
list-style: none;
width: 100%;
font-size:1.2em;
}
ul#menu li {
float: left;
padding: 0;
margin: 0;
border-right:solid 1px #fff;
}
ul#menu ul li {
float: none;
position: relative;
border-bottom: 1px solid #7EAED7; /* fixes gap problem in IE */
border-left: 1px solid #FFF;
z-index:1000;
}
ul#menu li ul {
margin: 0;
padding: 0;
display:none;
list-style: none;
position: absolute;
background: #9CC;
}
ul#menu ul ul{
margin-left: .2em;
position: absolute;
top: 0; /* if using borders, -1px to align top borders */
left: 100%;
}
ul#menu * a:hover, ul#menu li a:active{
background:#7EAED7 !important;
color: #FFFFFF;
}
ul#menu li a:link,
ul#menu li a:visited,
ul#menu li a:hover,
ul#menu  li a:active{
display: block;
padding: .2em .3em;
text-decoration: none;
background: #5587B3;
color: #FFFFFF;
}
ul#menu ul li a:link,
ul#menu ul li a:visited,
ul#menu ul li a:hover,
ul#menu ul li a:active {
width: 8em;
}
Tentu saja kita perlu menyesuaikan warna dan ukuran font agar hasilnya menyatu dengan tema yang kita gunakan.
5. Langkah terakhir adalah membuatnya bekerja sebagai daftar dropdown pada semua browser. Mungkin dengan deklarasi CSS sederhana dapat bekerja dengan baik di Firefox, namun Internet Explorer tidak dapat membaca “hover pseudo classes”, jadi kita buat dalam Javascript.
Kopi paste kode berikut :
Untuk mengaktifkannya, ubah tag pada tema yang anda gunakan menjadi
Demikian tutorial ini mudah-mudahan dapat membantu. Jika ada yang kurang jelas, silakan kunjungi langsung sumber tulisan ini disini.

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 komentar: on "Membuat menu DropDown"

Posting Komentar

Buat siapa saja yang suka dengan artikel saya, silahkan anda share di mana saja anda suka (blog, facebook, twitter dll). Namun, bila berkenan mohon cantumkan link sumber dari artikel yang sobat blogger share (copy/paste). Mari bangun Indonesia lebih baik lagi, dengan berbagi informasi yang bermanfaat. Terima kasih,,^o^
======================================================

Next Prev home