Monday, July 11, 2011
Fancy Menu Drop Down dengan ( jQuery )
Posted by
Sibuk Banget |
Berikut langkah - langkah project latihan kita kali ini.
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode : <head>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode <head> kalau tidak bisa taruh dibawahnya saja.
<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/fancy-menu/style.css?attredirects=0&d=1" type="text/css" media="screen"/>
<script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$('#navigation > div').hover(
function () {
var $this = $(this);
//$this.find('.images').fadeIn();
$this.find('a.menu').removeClass('menu').addClass('hovered');
$this.find('.images').stop().animate({
'width' :'230px',
'height' :'390px',
'opacity' :'1.0'
},400,'easeOutBack',function(){
$(this).parent().find('div').fadeIn('fast');
});
},
function () {
var $this = $(this);
$this.find('div').fadeOut(500);
//$this.find('.images').hide();
$this.find('a.hovered').removeClass('hovered').addClass('menu');
$this.find('.images').stop().animate({
'width' :'100px',
'height' :'0px',
'top' :'0px',
'left' :'0px',
'opacity' :'0.9'
},600,'easeOutBack');
}
);
});
</script>
6. Setelah Itu Beralihlah dan cari kode <body>
Jika Sudah, taruh kode dibawah ini sebelum atau diatas kode <body> , kode ini juga bisa juga diletakan di sidebar yaitu dengan cara tanbag Gadget.
KET:<br clear="all" />
<div id="content">
<div class="total_images" id="navigation">
<div class="eachs" id="link1">
<a href="#" class="menu" style=" width:90px;">Beranda</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link4">
<a href="#" class="menu" style=" width:90px;">Web</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link2">
<a href="#" class="menu" style=" width:100px;">Blogger</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link3">
<a href="#" class="menu" style=" width:72px;">CSS</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<div class="eachs" id="link5">
<a href="#" class="menu" style=" width:84px;">jQuery</a>
<img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
<div>
<ul>
<li><a href="#">Sub Item 1</a></li>
<li><a href="#">Sub Item 2</a></li>
<li><a href="#">Sub Item 3</a></li>
<li><a href="#">Sub Item 4</a></li>
<li><a href="#">Sub Item 5</a></li>
<li><a href="#">Sub Item 6</a></li>
<li><a href="#">Sub Item 7</a></li>
<li><a href="#">Sub Item 8</a></li>
<li><a href="#">Sub Item 9</a></li>
</ul>
</div>
</div>
<br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />
</div>
</div>
<br clear="all" />
Ganti tanda # dengan alamat blog kalian masing maising diingatkan url dimulai dengan http://
contoh http://blogcunayz.blogspot.com/
7. Silahkan anda priview dulu dari hasil latihan ini ,apabila semua berjalan dengan sempurna barulah anda save project latihan ini.
Labels:
jQuery
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment