contoh menu jQuery Fancy Apple style disini
* Login ke blogger
* Pilih Rancangn masuk ke Edit Html
* Cari kode <head>
* Pastekan kode dibawah ini diatas atau sebelum kode <head>
<link charset='utf-8' href='https://sites.google.com/site/jayanaktkj/fancyapple/style.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-7243260-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script src='http://www.tympanus.net/Tutorials/FancyAppleStyleNavigation/jquery-1.3.2.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});
$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script>
* Terakhir cari kode <body> dan pastekan kode dibawah ini diatas atau sebelum kode <body>
<div class='title'/>
<div class='navigation'>
<ul class='menu' id='menu'>
<li><span class='ipod'/><a class='first' href='alamat url'>Beranda</a></li>
<li><span class='video_camera'/><a href='alamat url'>Tentang</a></li>
<li><span class='television'/><a href='alamat url'>Cari</a></li>
<li><span class='monitor'/><a href='alamat url'>Foto</a></li>
<li><span class='toolbox'/><a href='alamat url'>Rss Feed</a></li>
<li><span class='telephone'/><a href='alamat url'>Podcasts</a></li>
<li><span class='print'/><a class='last' href='alamat url'>Kontak</a></li>
</ul>
</div>
* Ganti alamat url dengan alamat url kalian masing masing dan terakhir simpan dan lihat hasilnya
Sumber dan Contoh http://tympanus.net/
0 komentar:
Posting Komentar