Membuat Beberapa Menu Dropdown dalam Sebuah Halaman

Trik ini memadukan antara html dan beberapa settingan CSS. Dengan fasilitas menu ini, Anda dapat mengefektifkan penggunaan halaman yang aktif dengan banyak komponen link. Apalagi untuk site yang digunakan untuk berbagai promo, iklan dan sebagainya. Mungkin ini akan cocok untuk Anda.

Sebelumnya, Anda harus mempersiapkan HTML yang akan Anda gunakan untuk menu Anda. Jika ingin membuatnya sendiri, itu lebih baik. Namun jika tidak, Anda bisa mendapatkannya disini. Hanya saja Anda harus mengganti direct linknya seperti yang sudah pernah dibahas sebelumnya.

Langkah pertama yang sangat penting adalah tentukan dahulu berapa menu induk yang akan Anda buat. Misalnya, Anda ingin membuat tiga menu dropdown sekaligus dalam sebuah halaman. Maka, Anda harus mempersiapkan tiga komponen HTML yaitu direct link, image button dan  "id"nya yang akan dibaca nantinya pada CSS Anda. (yang di highlight sebagai contoh dan dapat diubah sesuai kebutuhan Anda).

Misalnya, saya menyiapkan tiga buah script HTML yang saya ambil dari theme saya sendiri. Disini, Saya memakai theme Empire Efwan, Skyline Minimalist dan Binderous. Contohnya dapat dilihat sebagai berikut :

EMPIRE EFWAN

<DIV class="menu"><DIV class="thumbnail"><DIV id="empireefwan"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/1/menu.png?et=4 V,f54RwJ5T9LZ1kRZsMw&amp;am" p;nmid="247440569" height="90" width="30" border="0"><SPAN class="show"><UL> <LI><A href="http://friewan.multiply.com"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/9/Home.png?et=F9KbC7Q6IPJY3HEuWsDhjg&amp;nmi" d="247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/journal"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/2/Blog.png?et=oxqXf52IYZh19yrrQ52XVg&amp;n" mid="247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/photos"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/3/photo.png?et=eIlQgEhDSfIZrN,DqGqEoQ&amp;" nmid="247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/video"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/4/Video.png?et=iAZ37hNbdWglWNX4y1dOfA&amp;am" p;nmid="247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/music"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/5/Music.png?et=lbQeDv5NImxmJVwsILoXEg&amp;am" p;nmid="247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/links"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/8/Links.png?et=KntDjDcSJZ9knnX6HoQVgg&nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/reviews"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/7/reviews.png?et=8c 4kDSGstwDThGFmizNCQ&amp;" amp;nmid="247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/calendar"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/6/calendar.png?et=bfT6KpUdYpExrVIejfSkuQ&amp;a" mp;nmid="247440569" height="18" width="50" border="0"></A></LI></UL></SPAN></DIV></DIV>

SKYLINE MINIMALIST

<DIV class="menu"><DIV class="thumbnail"><div id="skylineminimalist"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/13/MENU.jpg?et=JLsBRgkM74O6GMMm24nL2g&amp;nmid=247440569" height="90" width="30" border="0"><SPAN class="show"><UL> <LI><A href="http://friewan.multiply.com"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/14/home.jpg?et=OYogmSCkPWctB6DcM2uCTw&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/journal"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/15/blog.jpg?et=L6Fh4%2BhHi%2Bgvt2f8iaiASQ&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/photos"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/16/photos.jpg?et=8g90FEXNuy1e7oVmgGv6gg&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/video"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/17/video.jpg?et=HZWu1wSjiVCoxRyxILPcPA&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/music"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/18/music.jpg?et=lCV8%2C4ZLggC1CbAKZr25wA&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/links"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/19/links.jpg?et=RxJdsZIeN3fKZrTIENQ5Fg&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/reviews"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/20/reviews.jpg?et=6K7jIjBWF%2CD0Wf1OFlpUug&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/calendar"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/21/calendar.jpg?et=Q7xcne8TsJqTf6G0RdeveQ&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/34/friewan.jpg?et=pGwh%2C9xcJBrHZHB2l%2BxWnQ&amp;nmid=247440569" height="18" width="50" border="0"></A></p></LI></UL></SPAN></DIV></DIV>

BINDEROUS

<DIV class="menu"><DIV class="thumbnail"><div id="binderous"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/35/binder-cream.png?et=0BXTR89V2Ixttlh1sLxVyA&amp;nmid=247440569" height="90" width="30" border="0"><SPAN class="show"><LI><A href="http://friewan.multiply.com"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/36/home.jpg?et=k1l8NNIq7%2BZVmcnwJtMlbQ&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/journal"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/37/blog.jpg?et=nB5DtA82SUeWPpZ34Tu%2CtA&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/photos"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/38/photos.jpg?et=oujI2A6g7ZkfGKOdfeHiJQ&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/video"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/39/video.jpg?et=cksPgCBVBF8lgNNXQR%2B0Bg&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/music"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/40/music.jpg?et=0BXdPDxwyeS8DFIDzNXbnA&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/links"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/41/links.jpg?et=TYKBvSq8LjafuLYdq9LWug&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/reviews"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/42/reviews.jpg?et=WFGzLXOn5htTO2%2BLlQW%2BtQ&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com/calendar"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/43/calendar.jpg?et=LUYQ7vWtc1Ddyv9iEMoTPw&amp;nmid=247440569" height="18" width="50" border="0"></A></LI> <LI><A href="http://friewan.multiply.com"><IMG src="http://images.friewan.multiply.com/image/1/photos/9/500x500/45/friewan2009.jpg?et=lfPW49CY25qCAib9cRHChA&amp;nmid=247440569" height="18" width="50" border="0"></A></LI></P></SPAN></DIV></DIV>

Warna orange adalah Identitas untuk masing-masing komponen menu. Anda lihat script di atas yaitu <DIV id="empireefwan"> ini menandakan bahwa kita telah memberi identitas kepada masing-masing komponen html tersebut yang nantinya akan kita format pada CSS nya. Begitu juga dengan yang lainnya.

Langkah selanjutnya adalah menyiapkan script CSS untuk ketiga komponen HTML tersebut :
#efwanempire
{
position: absolute;
top: 150px;
left: 1px;
}
#skylineminimalist
{
position: absolute;
top: 250px;
left: 1px;
}
#binderous
{
position: absolute;
top: 350px;
left: 1px;
}

Sekarang, Anda tinggal memasukkan script CSS di atas ke custom CSS MP Anda.
Sebelumnya, terlebih dahulu Anda harus mengaktifkan dropdown menu dengan memasukkan script CSS ini :
/* Hide Default Menu */
div#subnav {
display:none;
}

/* Dropdown Menu Function */
.menu {
position: fixed;
top: 0px;
left: 0px;
}
div.thumbnail span.show {
width: 100px;
position: absolute;
background-color: transparent;
font-size: 0px;
padding: 0px;
visibility: hidden;
color: none;
text-decoration: none;
border: 0;
}
div.thumbnail:hover span.show {
visibility: visible;
top: 0px;
left: 30px;
}
Untuk script HTML tadi, jika Anda bermaksud menampilkan ketiga menu dropdown tersebut ke setiap halaman dalam page Anda, maka script HTML nya Harus Anda insert ke bagian SITE TITLE. Namun jika Anda bermaksud menu tersebut ingin ditampilkan di halaman tertentu, maka cukup dimasukkan ke halaman tersebut saja.
Catatan :

• Anda dapat menyetting besarnya tampilan menu sesuai layout MP Anda mengingat themes dasar yang berbeda dengan contohnya.
• Browser yang support untuk trik ini adalah Opera, Firefox dan Chrome. Sementara dari hasil uji coba pada IE, hasilnya kurang maksimal.
  Sumber