About Me

Foto Saya
AthieR (GOoD Time)
Lihat profil lengkapku

Minggu, 11 Maret 2012

Auto mEnu hOver dengan sorOtan "mOuse"

   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:

li {
       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;
}
Dan Cari </head> Kode Letakkan Kode di bawah ini Tepat di atas kode </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<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>
Dan ini kode Html untuk pemanggilan nya bisa di taruh di mana saja atau masukan +gadget

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

0 komentar:

Posting Komentar

Daftar Isi Cyber remoxp-vj™

.-= fUntastic mUsic =-.

  • Banner Link

remoxp-vj.blogspot.com. Diberdayakan oleh Blogger.

  • Banner Link

Pengikut bLog


close
 
Copyright© 2011 ---== cyber remoxp-vj™ ==---- | Template Blogger Designer by : RAJANI SINURAT' |
Template Name | Cyber remoxp-vj™ : Version 1.0 | BoysstReet Up'z