Fancy menu drop down
Huhu`buat kalian yang hoby pasang menu dengan JQUERY saya punya satu lagi yang menurut saya sangat keren dan unik.. klik DEMO untuk melihat contohnya..!!
hahaha.. Gimana lucu bukan ?? yu langsung aja lihat langkah-langkahnya.
1. Login / Masuk Blogger
2. Klik rancangan dan pilih Edit HTML
3. Jangan lupa kasih centang ( Expand Template Widget )
4. Cari kode <head> taruh kode dibawah ini sebelum atau diatas kode <head>
<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>
5. Terus cari code <body> letakan kode dibawah ini sebelum atau diatas kode <body> .
6. Code di bawah ini bisa juga diletakan di sidebar yaitu dengan menggunakan HTML/JavaScript .
<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" />
7. Save Template dan lihat hasilnya..
Keterangan :
Edit Alamat URL sesuaikan dengan kebutuhan kalian.
Sekian tutorial dari saya cara membuat " Fancy Menu Drop Down " semoga bermanfaat
>
Show
0 Comments
prev
next
