Cara Membuat Menu Horizontal Drop Down Dengan Animasi

Cara Membuat Menu Horizontal Drop Down Dengan Animasi -  Dalam membuat blog Menu memang sangat penting untuk mempermudah pengunjung mencari informasi. Kali ini kita akan Membuat Menu Horizontal Drop Down Dengan Animasi seperti yang terlihat dibawah ini :

- Masuk Ke akun Blogger
- Masuk Ke Bangian Template -> Edit HTML
- Jangan lupa centang Expand Template Widget
- Cari kode ]]></b:skin> Jika sudah Ketemu letakan kode dibwah ini tepat diatas kode ]]></b:skin>

#menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ25J7i4RJA1_7QZZr63Trcpa2AZK6zlDUqWtZUtHrh7NOEH55K46JYLAI-aEEOrZP-eCyvPtFgUpZij9Uf_600zvKsyU6_nQtHnoSilxumsLieiJHcoL_qv4S41s32QxAx5p_GUX_-nvt/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/AVvXsEjZ25J7i4RJA1_7QZZr63Trcpa2AZK6zlDUqWtZUtHrh7NOEH55K46JYLAI-aEEOrZP-eCyvPtFgUpZij9Uf_600zvKsyU6_nQtHnoSilxumsLieiJHcoL_qv4S41s32QxAx5p_GUX_-nvt/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/AVvXsEjZ25J7i4RJA1_7QZZr63Trcpa2AZK6zlDUqWtZUtHrh7NOEH55K46JYLAI-aEEOrZP-eCyvPtFgUpZij9Uf_600zvKsyU6_nQtHnoSilxumsLieiJHcoL_qv4S41s32QxAx5p_GUX_-nvt/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgYDM9wFKgfX5NY_wFq5uiHvaUc3R95jeSxgVFBADRBC_V17uCckkZOQQpOUhU5e_JEfayIZJGmo3TVjGbog8hJOJFm1ygRQHyvsbVdUSzmdUTN0RJwNzksla1dOSQCb-VulJO3Wg_iUu/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/AVvXsEiEtw-f5USmajVKYOt9544ZFSGusD6QkCsGA6SfSUnQ8oyjGvCFTq6ntUx8jsU0gNmenLBzzIMOZx8C2om7KhHQuuIeWMOmZ5yD-1JrcuzilIGlqpsmKBX0DiMKWb1qT1M7GdSrtn8-srUd/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/AVvXsEhkGje6wHPxfTFdQV8-1rLGW5DRv2IOaeTFvU5J6qNZyKK9jHTr35FRaGyp09vdpmzLS3xw4LChR86MJ_pDPHZMnZRNZtC_DN7LVPevtw3Cu3CaPuGnmiOFWnWm3Cakyxhp0GfRT75Isq36/s1600/over_red.png) no-repeat left top !important;
color:#FFFFFF !important;
border-left:none !important;
border-right:none !important;
}

- Selanjutnya Cari kode </head> Dan letakan kode dibawah ini tepat diatas kode </head>

<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>

 - Save Template
 - Selanjutnya Pada Menu Tata Letak -> Tambah Gadget -> PiLih HTML/Java Script dan Tambahkan Kode dibawah ini :

<ul id='menu'>
<li><a href='alamat blog kamu'>Home</a></li>
<li><a href='#'>Top</a>
<ul class='submenu'>
<li><a href='#'>Design</a></li>
<li><a href='#'>Development</a></li>
<li><a href='#'>Freebies</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>Resources</a></li>
<li><a href='#'>Tutorials</a></li>
<li><a href='#'>Wordpress</a></li>
</ul>
</li>
<li><a href='#'>Lifestyle</a>
<ul class='submenu'>
<li><a href='#'>Food</a></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Travelling</a></li>
</ul>
</li>
<li><a href='#'>Entertainment</a>
<ul class='submenu'>
<li><a href='#'>Celebs</a></li>
<li><a href='#'>Music</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>News</a>
<ul class='submenu'>
<li><a href='#'>Nasional</a></li>
<li><a href='#'>Internasional</a></li>
<li><a href='#'>Indonesiaku</a></li>
</ul>
</li>
<li><a href='#'>Sports</a>
<ul class='submenu'>
<li><a href='#'>Sepakbola</a></li>
<li><a href='#'>Basket</a></li>
<li><a href='#'>MotoGP</a></li>
</ul>
</li>
<li><a href='#'>Download</a>
<ul class='submenu'>
<li><a href='#'>Mp3</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Movie</a></li>
</ul>
</li>
<li><a href='#'>Technology</a>
<ul class='submenu'>
<li><a href='#'>Gadget</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Computer</a></li>
<li><a href='#'>Handphone</a></li>
</ul>
</li>
<li><a href='#'>Blogger</a>
<ul class='submenu'>
<li><a href='#'>Tips Blog</a></li>
<li><a href='#'>Tutorial Blog</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>jQuery</a></li>
</ul>
</li>
</ul>

Keterangan :
- Kode yang berwarna Biru Merupakan Lebar Dari Menu Silahkan Ganti Sesuai dengan Template Kawan
- Ganti Kata - Kata yng bercetak Tebal dengan nama menu yang kawan inginkan
- Ganti # dengan Link Dari menu yang agan buat

Nah Sekian dulu Cara Membuat Menu Horizontal Drop Down Dengan Animasi semoga bermampaat (-_-)