Membuat Menu Dropdown JQuery


Jika anda tertarik untuk membuatnya , silahkan ikuti langkah berikut ini :

1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Klik simpan
<style>
/*------ CSS3 Drop Down Menu By RL (dhecun.blogspot.com)---------*/
#rl-menu, #rl-menu ul {
margin: 5;
padding: 5;
list-style: none;
}
#rl-menu {
width: 533px;
margin: 5px auto;
border: 1px solid #3b5998;
background-color: #4b67a1;
background-image: -moz-linear-gradient(#3b5998, #3b5998);
background-image: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#3b5998));
background-image: -webkit-linear-gradient(#3b5998, #3b5998);
background-image: -o-linear-gradient(#3b5998, #3b5998);
background-image: -ms-linear-gradient(#3b5998, #3b5998);
background-image: linear-gradient(#3b5998, #3b5998);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#rl-menu:before,
#rl-menu:after {
content: "";
display: table;
}
#rl-menu:after {
clear: both;
}
#rl-menu {
zoom:1;
}
#rl-menu li {
float: left;
border-right: 1px solid #3b5998;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#rl-menu a {
float: left;
padding: 5px 5px;
color: white;
text-transform: uppercase;
font: normal 11px Verdana, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#rl-menu li:hover > a {
color: white;
}
*html #rl-menu li a:hover { /* IE6 only */
color: #3b5998;
}
#rl-menu ul {
margin: 5px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#rl-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#rl-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 5px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#rl-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#rl-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#rl-menu ul a {
padding: 5px;
width: 400px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#rl-menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#3b5998, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#3b5998), to(#0186ba));
background-image: -webkit-linear-gradient(#3b5998, #0186ba);
background-image: -o-linear-gradient(#3b5998, #0186ba);
background-image: -ms-linear-gradient(#3b5998, #0186ba);
background-image: linear-gradient(#3b5998, #0186ba);
}
#rl-menu ul li:first-child > a {
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#rl-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #444;
}
#rl-menu ul ul li:first-child a:after {
left: -5px;
top: 0%;
margin-top: -5px;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 5px solid #3b3b3b;
}
#rl-menu ul li:first-child a:hover:after {
border-bottom-color: #3b5998;
}
#rl-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#rl-menu ul li:last-child > a {
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
</style>
<br />

<ul id="rl-menu">
<li><a href="#">Menu 1 ▼</a>
<ul>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
</ul></li>
<li><a href="#">Menu 2 ▼</a>
<ul>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
</ul>
</li>
<li><a href="#">Menu 3 ▼</a>
<ul>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
</ul></li>
<li><a href="#">Menu 4 ▼</a>
<ul>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
<li><a href="http://alamatlinkanda">► Teks anda</a></li>
</ul></li></ul>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/12/membuat-menu-dropdown-jquery.html" target="_blank"><span style="font-size: xx-small;">[ Widget by Dhecun Blog ]</span></a></div>
Keterangan :
Ganti tulisan warna merah , biru , pink dengan teks sesuai keinginan anda.

Semoga bermanfaat...!!!

Subscribe

1 Komentar Blogger
Komentar Facebook

1 komentar:

May 1, 2013 at 10:50 PM

keren tutorialnya gan....
visit and komment back ---www.chibifansub.blogspot.com---

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge