share all free for you

Advertiser Here

Fancy Menu Drop Down dengan ( jQuery )

Bisa Lihat Demonya Disini
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.

<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" />
KET:
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.

Title : Fancy Menu Drop Down dengan ( jQuery )
URL : http://blogcunayz.blogspot.com/2011/07/fancy-menu-drop-down-dengan-jquery.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Fancy Menu Drop Down dengan ( jQuery ) sebagai Sumbernya.

Belum ada komentar, bagaimana pendapat Anda,,??

Post a Comment

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah