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

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/AVvXsEgc-I1W43yUkCUBBKXYANiYXYiG2StFbwauH6Jidv7gGcarAf8eHLsjwaccS-brLd_DybAJdsasUXtstJAAC-8mfl2LOa2tdynvJ8U_uu5KygO0AV52_u5riVVUwyVQ_xGJltUA7GRMflwT/s104/photos.png) no-repeat;

}



ul.slide-menu-drop-down li.bg-icon2{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUVoQAQZda8RHGmEcj1NrMcQTt7ExhLoOcWo2DONDfYbU8XvXg8prGZw_0_AnxTeOgU8df-0sKDGp0-VjYvRP0o8MJmbyUkdaSkfvkMkhVrZz9AnQ3FKj6nTQkYvGOAZ09KPHY2Ssw9sOW/s104/find.png) no-repeat;

}





ul.slide-menu-drop-down li.bg-icon3{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijPOD8_zlmD7yKa6PjjeHDJX2DCFMa9TMXeZaDJB2q_qrKdp0arNkEe5KsGfR5Joxk3rzriE0jcE4iYtnBxCLJBeJZjG1_0CUBAliWsAd8eXsTcOPrLDWULxEDaiNSf0GpTkl6ypymMw40/s104/mail.png) no-repeat;

}



ul.slide-menu-drop-down li.bg-icon4{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrVm9jfMuVaQBxLKZEQ3Ar-B-ntI1fSRjKdgmfo2m0MVBLlckUueAcWfl8nmSKREWa42hjkyrGmoY4I1YwF-ty-EzcTpwZbbl-RDr5KqE8-FLsddiTm80mShh58HIlbbIRUrdAoX7TOVz/s104/about.png) no-repeat;

}



ul.slide-menu-drop-down li.bg-icon5{

    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdFArAUGa6fqRRYVJzML55XNBEfsCmHQIyiVkFfjISrDZDmbYxYr8w8Ou8sRaR5HebB81YNRm3A3yt_NPxKaYSOmOiMcrG2p01T0A31EsFs7D6YLwRAIaYK74LHjYMGKpVDGKjiuYHOYX/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.

Judul: Cara buat slide menu drop down; Ditulis oleh Unknown; Rating Blog: 5 dari 5

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Blogger Tutorial | SEO | Free Blogger Templates | OOM RIO.com di inbox anda:

Related Posts

• Modifikasi Widget Archive dengan CSSMemodifikasi widget archive dengan css, itulah ayang akan kita bahas sekarang, memang mudah memodifikasi widget archive seperti membuat scroll down, menambahkan bac ... readmore
• CSS TeksBeberapa fungsi fitur CSS teks atau disebut juga dengan format teks seperti warna teks, penempatan atau posisi teks mengunakan properti align, properti Dekorasi tek ... readmore
• Cara buat menu navigasi Slide OutMasih terus memperbanyak jumlah koleksi menu navigasi. Menu ini bukan termasuk jenis drop down melainkan hanya sekedar navigasi biasa. Tapi menu ini memiliki kelebi ... readmore
• Cara membuat menu tooltipMenu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link at ... readmore
• Cara membuat slide dengan efek marqueeAnimasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dile ... readmore