Cara buat Menu Dropdown


Sedikit penjelasan dari saya, menu drop down adalah menu yang mempunyai sub-sub menu di dalamnya. Prisipnya adalah ketika pointer menyorot sebuah main menu, maka akan muncul sub menu dari main menu tersebut.

“Lantas, bagaimana cara menambahkan menu drop down pada blog kita?”

Berikut langkah-langkahnya, ikuti saja! :)

Silahkan Anda Login terlebih dahulu ke Blogger

Klik menu Tata Letak dan pilih sub menu Edit HTML dan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget

Jangan lupa untuk membackup terlebih dahulu template Anda agar jika terjadi kesalahan bisa dikembalikan lagi pada kondisi semula. Anda tinggal klik Download Template Lengkap

Lalu, copy paste kode berikut di atas tag 


Cari kode ]]> kemudian tambahkan struktur CSS di bawah ini dengan mengcopy paste di atas kode ]]>

.chromestyle{
width: 100%;
font-weight: bold;
}

.chromestyle:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.chromestyle ul{
border: 1px solid #BBB;
width: 100%;
background: url(http://nestoriko.googlepages.com/chromebg2.gif) center center repeat-x;
padding: 4px 0;
margin: 0;
text-align: center;
}

.chromestyle ul li{
display: inline;
}

.chromestyle ul li a{
color: #494949;
padding: 4px 7px;
margin: 0;
text-decoration: none;
border-right: 1px solid #B5E2FE;
}

.chromestyle ul li a:hover, .chromestyle ul li a.selected{
background: url(http://nestoriko.googlepages.com/chromebg2-over.gif) center center repeat-x;
}

.dropmenudiv{
position:absolute;
top: 0;
border: 1px solid #B5E2FE;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Shadow(color=#CACACA
,direction=135,strength=4);
}

.dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #B5E2FE;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

.dropmenudiv a:hover{
background-color: #EBF7FF;
}

Cari struktur seperti di bawah ini pada template Anda


Jika sudah ketemu, copy paste struktur berikut ini tepat di bawah struktur yang Anda temukan pada langkah 6.


dropmenu1" class="dropmenudiv">

dropmenu2" class="dropmenudiv">


Coba perhatikan tulisan yang berwarna merah struktur tersebut. Tulisan "dropmenu1" dan "dropmenu2" tersebut merupakan atribut rel dari parent menu drop down yang kita buat. Pada bagian tersebut terlihat bahwa terdapat 2 menu drop down, yaitu "Menu1" dan "Menu2" (warna biru). Jika Anda ingin menambahmenu drop down lagi misalnya "Menu3", maka buatlah juga atribut rel untuk "Menu3" tersebut misalnya "dropmenu3", setelah itu tambahkan struktur menu drop down untuk "Menu3" setelah menu drop down kedua". Sehingga strukturnya akan menjadi :




dropmenu3" class="dropmenudiv">


Perhatikan bahwa nama atribut ID untuk menu drop down ketiga harus sama dengan nama atribut rel untuk "Menu3" yaitu "dropmenu3". Begitu pula jika Anda ingin menambah menu drop down keempat, kelima, dan seterusnya.

"URL sub menu1" merupakan URL halaman yang akan dituju jika "Sub Menu1" diklik, dan seterusnya. Silahkan pembaca ganti nama menu, sub menu, dan juga URL dari menu drop down tersebut.

Nah, begitulah tips dari saya hari ini tentang bagaimana cara membuat menu dropdown
These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • Furl
  • Reddit
  • Spurl
  • StumbleUpon
  • Technorati

Leave a comment

Related Posts Plugin for WordPress, Blogger...