Posted by : Ryo Apri 11 Mei 2012

Menu Slide merupakan efek animasi bergeser saat di sentuh mouse

nah ,kita bisa membuat nya sebagai menu nih .........


Masuk ke Design dan Edit HTML ,kemudian letakkan kode dibawah ini diatas ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://3.bp.blogspot.com/-mK6Cb1XtLmM/TvoyuSgJ_ZI/AAAAAAAAAYE/tF_lAg7b_Bc/s1600/menuslidejquery.png
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}
Lalu letakkan kode dibawah ini diatas kode  <head>

<script src='http://situseo.googlecode.com/files/menuslidejquery-1.2.3.js' type='text/javascript'/>
<script src='http://situseo.googlecode.com/files/menuslidejquery.kwicks-1.5.1.js' type='text/javascript'/>
<script src='http://situseo.googlecode.com/files/menuslidejquery.easing.1.3.js' type='text/javascript'/>
Save Template kalian

Selanjutnya Add gadget dan isikan HTML diabawah ini
<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://situseo.blogspot.com/' title='situseo home'>Home</a></li>
<li id='kwick2'><a href='http://situseo.blogspot.com/' title='kirim email'>Contact</a></li>
<li id='kwick3'><a href='http://situseo.blogspot.com/' title='about me'>About Me</a></li>
<li id='kwick4'><a href='http://situseo.blogspot.com/' title='link exchange'>Link</a></li>
</ul>
</div>

<script type="text/javascript">
$().ready(function() {
$('.kwicks').kwicks({
max : 190,
duration: 800,
easing: 'easeOutQuint'
});
});
</script>

Kode tsb bisa kalian edit sendiri yah
Semoga bermanfaat

Leave a Reply

Subscribe to Posts | Subscribe to Comments

Welcome to My Blog

Banner

banner banner banner banner

Follow

Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino Blog, Blogger, Tips, Tricks, Music, Ryo, Apri, R-Ryuzaki™, Ryo Apri, Science, software, template, colour code, social, Game, l-nino

- Copyright © 2013 RLanzer -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -