membuat menu dropdown horisontal

 Cara Membuat Menu Horizontal Drop Down Animasi
Sebelumnya saya sudah menguraikan cara membuat menu dropdown, cara membuat menu dropdown horizontal ini tidak jauh berbeda.Dengan bantuan CSS dan jQuery kita bisa membuat menu drop down ini dengan animasi, tapi untuk membuka menu drop down nya klik tanda panah yang ada disebelah kata TOP, Atau Lifestyle maka menu nya akan langsung terbuka. Baiklah langsung saja cara membuat nya.

Rex Screen Shoot:

Langkah - langkahnya adalah sbb :
1. Login ke Blog sobat.
2. Pilih Template > Edit HTML.
3. Cari kode ]]></b:skin>  
    letakan kode tepat di atasnya.

#menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntO4KK67vqBnO6Hibialc1McJncaZ786e7GturKE29Ak_DJH286fNX6Bt78upREZEkUPh7xLVoKGn6XvG_cvCY7fxLyRRhzQD7XXJLeTdO_EgJqK0sHWNiBZkrgsxHacpAB5RDsArAW_9/s1600/menu_bg.gif);
font:normal 18px/36px Arial, Helvetica, sans-serif;
float:left;
width:980px;
padding:0;
}
#menu li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntO4KK67vqBnO6Hibialc1McJncaZ786e7GturKE29Ak_DJH286fNX6Bt78upREZEkUPh7xLVoKGn6XvG_cvCY7fxLyRRhzQD7XXJLeTdO_EgJqK0sHWNiBZkrgsxHacpAB5RDsArAW_9/s1600/menu_bg.gif);
list-style:none;
padding:0;
margin:0;
float:left;
position:relative;
}
#menu li a{
color:#bfbfbf;
text-decoration:none;
padding-left:15px;
padding-right:10px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjntO4KK67vqBnO6Hibialc1McJncaZ786e7GturKE29Ak_DJH286fNX6Bt78upREZEkUPh7xLVoKGn6XvG_cvCY7fxLyRRhzQD7XXJLeTdO_EgJqK0sHWNiBZkrgsxHacpAB5RDsArAW_9/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiClzefzyH9NHAldMPVRm9OtM6-q6COSj2-MAwdLdMC25vjrPIHIG7ZWUk-rsKrAlul995B-5sBPT9v50-5nno_nKrJC33ff-kQhu5Dw6H2n2d-SOAfwSB4OFx1ECI0ReGFPaISDPYqHwQN/s1600/arrow.png) no-repeat 0 12px ;
width:20px;
height:35px;
/*display:inline-block;*/
float:left;
/*top:-35px;*/
/*position:relative;*/
cursor:pointer;
}
#menu li ul{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM4YDlBVU7QEiilAdETsLLUKqp1FNVJmv3APr14jpcHwrMPdolCfzHheu8odVQE_g6aaGybXUK3lDGxhzM5KyPlf8pP4k-HV6OPWyNdtBLALQwMY7biGmi2Cg9si7-JA7Cuf7sXV1keb42/s1600/submenu_bg.gif) no-repeat right bottom;
padding:0;
font-size:15px;
display:none;
width:250px;
z-index:5;
position:absolute;
margin:0;
float:left;
left:0;
top:36px;
}
#menu li ul li{
background:none;
width:250px;
overflow:hidden;
line-height:25px;
}
#menu li ul a{
background-image:none;
border-bottom:1px solid #171717;
border-top:1px solid #545454;
border-left:1px solid #171717;
width:237px;
}
#menu li:hover ul{
}
a:active, a:visited {
outline:none;
}
.overRed {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf5S0VN-gdPn7VbH4q-EXjopFBLfoYAcOvea6Kt3bmlOR0faIiWU2DNsLY2caAa9XQXURD7DGXsYO2o1R5owdy7Jw1bqY6GadAWW1lDAvbWJM9kSWt368LW8gv7CBNwrBq3uqnx0nN_GEX/s1600/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}

Jika lebar nya tidak sesuai dengan Blog Sobat, ubah kode yang berwarna biru dari 980px menjadi 1000px atau jika terlalu besar sobat boleh memperkecil lebar nya. .

4. Selanjutnya Cari kode </head>  
    letakan kode dibawah ini tepat di atasnya

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("ul.submenu").parent().append("<span></span>");
$("ul#menu li a, ul#menu li span").click(function(){
$(this).parent().find("ul.submenu").animate({height: 'show', opacity: 'show'}, 'slow');
})
$("ul#menu li").not("ul#menu li ul li").hover(function(){
}, function(){
$(".submenu").animate({height: 'hide', opacity: 'hide'}, 'slow');
})
$(".submenu li a").hover(function(){
$(this).animate({paddingLeft: "30px"}, 'fast') ;
$(this).addClass("overRed") ;
},
function(){
$(this).animate({paddingLeft: "15px"}, 'fast') ;
$(this).removeClass("overRed") ;
}
)
})
</script>

5. Simpan Template.

6. Cari kode yang mirip dengan dibawah ini.

<blockquote class="tr_bq"> <div id='header-wrapper'> <br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><br /> <b:widget id='Header1' locked='true' title='Demo Blazer Blog (Header)' type='Header'/><br /> </b:section><br /> <b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/><br /> <div style='clear:both;'/> <br /> </div> <!-- end header-wrapper --></blockquote>
Atau search <Header>  
Letakan tepat di bawahnya

<ul id='menu'>
<li><a href='http://www.rexroom.blogspot.com'>Home</a></li>
<li><a href='http://www.rexroom.blogspot.com/2012/10/the-owner.html'>About me</a>
<ul class='submenu'>
<li><a href='url'>Design</a></li>
<li><a href='url'>Development</a></li>
<li><a href='url'>Freebies</a></li>
<li><a href='url'>Inspiration</a></li>

<li><a href='url'>Tutorials</a></li>
<li><a href='url'>Wordpress</a></li>
</ul>
</li>
<li><a href='#'>Lifestyle</a>
<ul class='submenu'>
<li><a href='url'>Food</a></li>
<li><a href='url'>Health</a></li>
<li><a href='url'>Travelling</a></li>
</ul>
</li>
<li><a href='url'>Entertainment</a>
<ul class='submenu'>
<li><a href='url'>Celebs</a></li>
<li><a href='url'>Music</a></li>
<li><a href='url'>Movie</a></li>
</ul>
</li>
<li><a href='url'>News</a>
<ul class='submenu'>
<li><a href='url'>Nasional</a></li>
<li><a href='url'>Internasional</a></li>
<li><a href='url'>Indonesiaku</a></li>
</ul>
</li>
</ul>

Sehingga susunan nya kayak gambar dibawah ini.

Rex Screen Shoot:

Keterangan :
Warna Hitam ganti dengan url sobat
Warna Merah ganti dengan Judul menu sobat.
Warna Biru ganti dengan judul sub menu sobat 
Silahkan sobat menambahkan sub menu atau judul menu sobat sesuai dengan keinginan

Related Post:

Tentang BLoG

• Cara Membuat Tombol (button) url lengkap
• 10 Kata kunci (keyword) yang paling banyak di cari di dunia
• 10 Keyword yang paling banyak di cari di indonesia menggunakan google insight
• Cara Membuat Breadcrumbs Langsung Terindeks Oleh Google
• Merubah Postingan lama / baru (Navigasi) dengan angka
• Cara membuat 2 kolom posting / widget pada blog
• Cara membuat halaman depan blog tanpa postingan
• Merubah Title Tag Lebih SEO Friendly
• Membuat SlideShow mudah dan keren di blog
• Template keren gratis untuk blogger (part.3)
• Template keren gratis untuk blogger (part.2)
• Template keren gratis untuk blogger
• Membuat Favicon pada blog atau website bagian.2
• Membuat favicon pada blog atau website bagian.1
• Membuat menu dropdown keren
• membuat link menjadi warna warni / rainbow link
• Membuat Rencent Comment terbaru dan keren with avatar
• Menampilkan jumlah postingan di beranda
• Membuat Halaman Statis pada blogger
• Membuat Border / widget melengkung pada blog
• cara mendaftarkan blog di rss feeds
• Cara menghilangkan Diposkan, Label dan waktu postingan / artikel
• Memasang Menu Accordion Terbaru pada widget (vertikal)
• Memasukan Label Tertentu pada Widget
• Membuat blog jadi DoFollow