Bicara jQuery memang tidak bakalan ada habisnya..
Maklum ane lagi seneng-seneng nya ngutak-atik jQuery neg..
Setelah bereksperimen, jadi juga neg Auto mEnu hOver dengan sorOtan "mOuse"..
Bedanya Auto mEnu hOver dengan sorOtan "mOuse" ini tanpa Click loh..
Cukup kita lewati dg Cursor Mouse, maka akan muncul keseluruhan menunya.
cAra peMbuatanya:
1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4. Selanjutnya cari kode ]]></b:skin>
Jika sudah ketemu letakkan kode CSS dibawah ini
tepat sebelum atau diatas kode ]]></bskin> tersebut:
cAra peMbuatanya:
1. Login blogger
2. Tata Letak/Layout - Edit HTML
3. Klik pada Expand Template Widget.
4. Selanjutnya cari kode ]]></b:skin>
Jika sudah ketemu letakkan kode CSS dibawah ini
tepat sebelum atau diatas kode ]]></bskin> tersebut:
li {Dan Cari </head> Kode Letakkan Kode di bawah ini Tepat di atas kode </head>
height:60px;
width:276px;
overflow:hidden;
font-family:Helvetica ;
color: #222;
text-decoration: none;
font-weight: bold;
line-height:3;
text-shadow: 0 -1px 1px #222;
padding: 0px 0px 0px;
margin-top:0px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5uiLkHxY_sPp3srGdSAjC5pE3H-IHdI1DsIPu9fC6BddT_pQggbEeL2Z4M54FPMzaJsR7CpZhyAKnfPld5DDfnJvudmFw98OMkg-uXJ2eR8Rxicm-hXQhKjK3lUfcRWjS411_Fnlhj9f/s1600/nongol.png')no-repeat top center;
}
li a {color: #222;}
li p {
margin-top:5px;
font-size:20px;
color:cyan;
line-height:1;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>Dan ini kode Html untuk pemanggilan nya bisa di taruh di mana saja atau masukan +gadget
<script src='http://generation-platinum.googlecode.com/files/jquery.easing.1.3.js ' type='text/javascript'/><!--mce:0--></script>
<script type="text/javascript">
$(document).ready(function(){
//When Mouse rolls over li
$("li").mouseover(function(){
$(this).stop().animate({height:'60px'},{queue:false, duration:500, easing: 'easeOutBounce'})
});
//When Mouse cursor removed from li
$("li").mouseout(function(){
$(this).stop().animate({height:'120px'},{queue:false, duration:500, easing: 'easeOutBounce'})
});
});
</script>
<div id="vnav"><ul>
<li><a href="#">Home</a><p>kembali ke beranda</p></li>
<li><a href="#">About Me</a><p>Tentang Saya</p></li>
<li><a href="#">Follow us</a><p>ikuti saya</p></li>
<li><a href="#">Info</a><p>Informasi</p></li></ul>
</div>