Cara Membuat Menu Drop Down Dengan Animasi - Apakah kamu mau mempunyai Menu Drop Down yang cantik, jika mau, saya akan memberitahu anda bagaimana Cara Membuat Menu Horizontal Drop Down Dengan Animasi, 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.
LIHAT DEMO
1. Login ke Blog kamu.
2. Pilih Rancangan > Pilih EDIT HTML.
3. Cari kode
]]></b:skin> setelah ketemu letakan kode dibawah ini tepat di atas kode
]]></b:skin>
#menu {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivLlZ3HRXonQwK1IB4I3rcRav5ruOqeefHrRpTuHjWthX3NP_K9VECrV9OYtUdqYaOYKuQWxBKvQvkgF1woX8GOkkiqNUxgKWsI4KTEEpfR9Xd2hT_EQqXfL86kaBpusbIUI1I5jlDbhad/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/AVvXsEivLlZ3HRXonQwK1IB4I3rcRav5ruOqeefHrRpTuHjWthX3NP_K9VECrV9OYtUdqYaOYKuQWxBKvQvkgF1woX8GOkkiqNUxgKWsI4KTEEpfR9Xd2hT_EQqXfL86kaBpusbIUI1I5jlDbhad/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/AVvXsEivLlZ3HRXonQwK1IB4I3rcRav5ruOqeefHrRpTuHjWthX3NP_K9VECrV9OYtUdqYaOYKuQWxBKvQvkgF1woX8GOkkiqNUxgKWsI4KTEEpfR9Xd2hT_EQqXfL86kaBpusbIUI1I5jlDbhad/s1600/menu_bg.gif);
display:block;
float:left;
}
#menu li span{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe_guw5rAnxlNLBd-pcTUhfbL7wb3nBLjgy6RqzxQu-Iexnc3jfgZ0Gj0Jv2gLKq-K4qdBOT4rdFn5A-LAkf3pZ1SH-xKKVOqz1ApUGfbGNs1lQM5sMJCHYcmxUQxyd6HNSx1tWHB_AYVQ/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/AVvXsEhIm9-B-rL2FZBt25u0vz5vx168sjjg54o_k1wruO5t1AH9NZM3iFYYGXrQxVo5L-xMmj8XiqoD550DFgV9-JUaFwsSOZyB2oENK_kDfOR1P88jSsue4VlXZuuipWF45oNH9I5M3LzrF91I/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/AVvXsEiBwZplufHz9ZaWgn5kGym8eFpa_AU4BfnB3FqaxQKRjKeS7nkcs0u5GIyswkivTLRkovn3mebuEDIwKAeoOfEq1HSwTPX8AIWDntVAIV1Mv7BVFSBlQqrJ5hQ4NYWfblwaPDvab3EqykrQ/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 anda, anda boleh ubah kode yang berwarna biru dari 980px menjadi 1000px atau jika terlalu besar anda boleh memperkecil lebar nya. Terserah anda saja.
4. Selanjutnya Cari kode
</head> setelah ketemu letakan kode dibawah ini tepat di atas 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>
5. Simpan Template nya.
6. Cari kode yang mirip dengan dibawah ini.
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Demo Blazer Blog (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='1' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->
Kode datas
merepukan kode bagian Header, takut setiap blog berbeda, coba cari saja
yang ada kata (Header) setelah ketemu letakan kode di bawah ini tepat di
bawah kode diatas yang nomor 6. Intinya cari kode bagian header anda
supaya lebih mudah, apa nama judul blog anda yang di header misal judul
nya Demo Blazer Blog, Cari saja kata Demo Blazer Blog.
<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>
Sehingga susunan nya kayak gambar dibawah ini.
Ganti kata-kata yang dicetak tebal dengan kata-kata lainnya.
Ganti tanda # dengan URL yang dituju.
Simpan dan lihat hasilnya.
Perhatian :
"Kenapa supaya mudah ga dipilih Add Gadget HTML Java Script, entah
kenapa nantinya ga bisa di buka Submenu nya, jadi supaya bisa di buka
letakan saja secara langsung di menu EDIT HTML di bagian bawah kode
bagian HEADER BLOG anda"
Jika anda menemukan
masalah alangkah baiknya meninggalkan pesan di kotak komentar, dan kami pasti akan menjawab nya.
Sumber : http://blazerracing.blogspot.com/2012/05/cara-membuat-menu-horizontal-drop-down_14.html
Dede Azis Nagara
My Google+
Twitter
Facebook