Cara buat slide menu drop down

Satu lagi menu drop down dari hasil kreasi saya, namanya slide menu drop down. Dibuat menggunakan fitur CSS dan beberapa HTML, cara kerjanya ringan dan memiliki efek slide yang bervariatif. Pengaturan pada atribut transitionnya juga pas, selain itu kombinasi warna hijau dan putih serta menggunakan background grafis yang sesuai, sehingga menu ini tampil dan bekerja sangat dinamis sekali.
Silahkan anda bisa manfaatkan slide menu drop down ini untuk web ataupun blog anda.

LIHAT DEMO

Nah..., bila anda berminat memasang slide menu drop down ini, silahkan anda bisa ikuti langkah - langkah sebagai berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

<style type='text/css'>/*widget Fitur slide-menu-drop-down by noer Ceo http://www.carabuatwebgratis.com */ ul.slide-menu-drop-down{ list-style:none; position:absolute; right:30px; font-family: Cambria, serif; font-size: 16px; font-style: italic; line-height: 1.5em; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9IbCIiCt8wwzoMeYcdlaIYhU2IQngesOVJ82BRxDJX2vzD0VCKxZljEOAGfAA0d7Fwp-vYcG7fsQu2goDGNkdDZGwuicD_Bam-zjFL6GWm4ZOHj2jBfC_HN5yOCBZR2_WwowgCEFlBHC/s1000/background-image.jpg) no-repeat top left; background-repeat:no-repeat; cursor:pointer; border:2px solid #ddd; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; z-index:99999; } ul.slide-menu-drop-down li{ float:right; width:55px; height:55px; margin:10px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#000; background-repeat:no-repeat; background-position:center center; position:relative; overflow:hidden; cursor:pointer; border:2px solid #ddd; -moz-border-radius:30px; -webkit-border-radius:30px; border-radius:30px; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul.slide-menu-drop-down li:hover{ float:right; width:300px; height:250px; display:block; border-right:2px solid #fff; border-bottom:2px solid #fff; background-color:#fff; position:relative; overflow:hidden; cursor:pointer; -moz-box-shadow:1px 3px 15px #555; -webkit-box-shadow:1px 3px 15px #555; box-shadow:1px 3px 15px #555; } ul.slide-menu-drop-down li .judul{ background-color:#fff; padding:10px; margin-top:300px; margin-left:55px; opacity:0.9; text-transform:uppercase; font-style:normal; font-weight:bold; font-size:14px; color:#444; text-align:center; text-shadow:-1px -1px 1px #ccc; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul.slide-menu-drop-down li:hover .judul{ background-color:#52C941; padding:10px; margin-top:5px; margin-left:55px; } .sub-menu{ text-align:right; font-size:10px; font-family: Cambria, serif; font-weight:bold; line-height: 1em; width:280px; height:100%; padding:5px 10px 10px; margin:10px 0px 40px; background-color:#fff; -moz-box-shadow:1px 3px 15px #aaa; -webkit-box-shadow:1px 3px 15px #aaa; box-shadow:1px 3px 15px #aaa; opacity:0.7; } .sub-menu p a{ text-transform:uppercase; text-shadow:1px 1px 1px #fff; color:#333; text-decoration:none; font-size:10px; font-family: Cambria, serif; line-height: 1em; } .sub-menu p a:hover{color:#347D29;} </style>

8. Lalu copy lagi kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>
/*widget Fitur slide-menu-drop-down by noer Ceo http://www.carabuatwebgratis.com */

ul.slide-menu-drop-down li.bg-icon1{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWSvtUhM4lFQfq07PDRJNmNJVg4CT8YHyXxIjVqELkP-OXmIhuMlByebDZn1KZ_7OaXoBQllT7moSOOc2PrhyGfJX95aNeam7ovjuHRn40FTH3cfJc5gKWrzqTbZSmhuq80eU1e1AAhX3T/s104/photos.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon2{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU68zvr-PPRikZSGjym_JXkCl9y6GGwrks4npNzkGFnVr00MFMBGJlx3brJBfa9xMK3MEV-8xfYfLYwiHY_RVLyROhGZx4GLdrhofGkO-ntYhveIV1AxztUmbZbaiEsYzFqtVANHVoovNJ/s104/find.png) no-repeat;
}


ul.slide-menu-drop-down li.bg-icon3{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGOXnal7SeMfx6G0uXuAs7YDxJl8HuekuVV-u5sVnnQZYINN1BDLiYfd1rhnrhp-_gn2H2BbilSI14yvB4gPlphIkccSuNUxBT5yslif9frm2t-p_hXrMGh_38tpo5BLrhl28tSOS7sxTM/s104/mail.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon4{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcaxXouij2piS06UGxNHNVzWRciNgOaycNF68XPHZ9EjLm3hd3BiuvXNQ2ivth-HDi3VxKRGS6KD4XiJv0bp3ubuVOUuP8LaaecT9gWJd4i17V3IZIjhkAMuyHqz1OUJcEsM25V0d0NZcE/s104/about.png) no-repeat;
}

ul.slide-menu-drop-down li.bg-icon5{
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-_BOm_prIkH74H5dBWiqLcjUOGXw_1EviKF75HLGicNQPiVeV6HKCoU7WQhJBnL_3b8kOs1wWLaFCEiHPmWsGIOGPM_7efBYMhO5VnhfQGnA6gvxCjztW-4VajsJaumSM67rj7jmTCexi/s104/home.png) no-repeat;
}
</style>

Catatan :

Teks warna merah diatas adalah ULR Icon menu yang akan tampil pada slide menu drop down. Silahkan bila anda menginginkan, ganti dengan milik anda. Tapi ingat, bentuk icon sebaiknya bulat dengan ukuran icon = 50px, dan dengan format file PNG, agar dapat sesuai dengan tampilan menu ini.

9. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menambahkan kode dibawah ini pada gadget, dan letak gadget sesuka anda akan menaruh menu ini dimana...OK...!!
Silahkan ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<ul class="slide-menu-drop-down" id="slide-menu-drop-down">

<li class="bg-icon1">
<div class="judul">Album</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 6</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 7</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 8</a></p>
</div>
</li>

<li class="bg-icon2">
<div class="judul">Explorer</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

<li class="bg-icon3">
<div class="judul">Kontak</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

<li class="bg-icon4">
<div class="judul">About Me</div>
<div class="sub-menu"><p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

<li class="bg-icon5">
<div class="judul">Home</div>
<div class="sub-menu">
<p><a href="ULR ARTIKEL">Sub Menu 1</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 2</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 3</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 4</a></p>
<p><a href="ULR ARTIKEL">Sub Menu 5</a></p>
</div>
</li>

</ul>

Catatam :

• Silahkan anda ganti Teks berwarna diatas.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.