Jumat, 18 Mei 2012

Drop Down Navigation Menu With Bounce Effect

Drop Down Navigation Menu With Bounce EffectTutor blogging kali ini seputar menu dropdown, udah banyak kale yah yang udah ngeposting rubrik tentang ini dan barang tentu udah bukan hal yang baru. Namun ku peruntukkan yang lagi nyari tutor sekitar menu dropdown dan kebetulan nyasar di blog saya. :)
Ok, berawal dari kunjungan ke salah satu blog inspiratorku “Hompimpa alaihum gambreng” yang kebetulan makai efek dropdown dengan efek bounce membuat ku penasaran dan ceritapun berlanjut dengan mencari tutornya.. (hehe panjang kali lebar ceritanya). Langsung aja bro/siz kita ke penampakan tuh dropdown menu kurang lebih seperti yang ada di blog ini.




Terus langkah  pemasangannya:
  1. login ke akun blogger sobat, terus ke menu rancangan dan ke edit HTML
  2. backup dulu templatenya!! biar kalo ada kesalahan bisa dibalikin.
  3. cari kode ]]</b:skin> atau </style> dan pasang kode di bawah ini di atas kode tersebut

    /*Navigation*/
    .menu {
    font:normal 12px arial;
    line-height:normal;
    text-transform:none;
    color:#FFF;
    text-decoration:none;
    margin:0;
    padding:3px 0
    }

    .menu ul {background:#000;
    background-image: linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
    background-image: -o-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
    background-image: -moz-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
    background-image: -webkit-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
    background-image: -ms-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(148,0,0)),
        color-stop(0.6, rgb(0,0,0))
    );
    height:35px;
    line-height:30px;
    -webkit-box-shadow:0 1px 5px #fff;
    -moz-box-shadow:0 1px 5px #fff;
    box-shadow:0 1px 5px #fff;
    margin:0;
    padding:0
    }

    .menu li {
    list-style:none;
    color:#FFF;
    float:left;
    display:inline;
    position:relative;
    margin:0;
    padding:0
    }

    .menu li a {
    display:block;
    border-left:1px solid #444;
    border-right:1px solid #222;
    color:#FFF;
    text-decoration:none;
    font-weight:700;
    line-height:30px;
    outline:none;
    margin:0;
    padding:2px 15px
    }

    .menu li ul {
    position:absolute;
    z-index:10;
    left:0;
    top:100%;
    height:auto;
    width:170px;
    -webkit-box-shadow:0 1px 5px #000;
    -moz-box-shadow:0 1px 5px #000;
    box-shadow:0 1px 5px #000;
    display:none;
    margin:0;
    padding:0
    }

    .menu li ul a {
    border-left:none;
    border-right:none;
    border-top:1px solid #444;
    border-bottom:1px solid #222;
    display:block
    }

    .menu li ul li {
    float:none;
    display:block;
    width:auto
    }

    .menu li ul ul {
    top:0;
    left:100%
    }

    .menu li a:focus {
    background-color:#666;
    border-left-color:#777;
    border-right-color:#555
    }

    .menu ul li a:focus {
    background-color:#666;
    border-top-color:#777;
    border-bottom-color:#555
    }

    .menu li a:hover,.menu ul li a:hover {
    color:#ccc;
    background:#000
    }
  4. setelah itu masukkan efek bounce berikut ini di atas kode </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
    <script src='http://hompimpa.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(function() {
        $(&#39;.menu li&#39;).hover(function() {
            $(this).children(&#39;ul&#39;).filter(&#39;:not(:animated)&#39;).slideDown(700,&#39;easeOutBounce&#39;);
        }, function() {
            $(this).children(&#39;ul&#39;).slideUp(400);
        });
    });
    </script>
  5. Dan masukkan menu nya di tempat yang Anda inginkan, contoh menunya seperti ini:

    <div class='menu'>
           <ul>
    <li><a href='http://arimjie.blogspot.com/search/label/Farmasi'>Pharmacy</a>
            <ul>
    <li><a href='#'>Biologi Farmasi</a>
    <ul class='children'>
    <li><a href='http://arimjie.blogspot.com/search/label/Farmakognosi'>Farmakognosi</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Fitokimia'>Fitokimia</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Farmakologi'>Farmakologi</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Mikrobiologi'>Mikrobiologi</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Bioteknologi'>Bioteknologi</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Biokimia'>Biokimia</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Fisiologi'>Fisiologi</a></li>
    </ul>
    </li>
    <li><a href='#'>Farmakokimia</a>
    <ul class='children'>
    <li><a href='#'>Farmasi Analisis</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Kimia%20Fisika'>Kimia Fisika</a></li>
    <li><a href='#'>Kimia Medisinal</a></li>
    <li><a href='#'>Kimia Klinik</a></li>
    <li><a href='#'>Analisis Mikrobiologi</a></li>
    <li><a href='#'>Analisis dan Keamanan Makanan</a></li>
    </ul>
    </li>
    <li><a href='#'>Farmasetika</a>
    <ul class='children'>
    <li><a href='#'>Ilmu Meracik Obat</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Farmasi%20Fisika'>Farmasi Fisika</a></li>
    <li><a href='#'>Teknologi Farmasi</a>
    </li>
    <li><a href='http://arimjie.blogspot.com/search/label/Farmakokinetik'>Biofarmasi dan Farmakokinetik</a></li>
    </ul>
    </li>
    <li><a href='http://arimjie.blogspot.com/search/label/Spesialite%20Obat'>Spesialite Obat</a></li>
    <li><a href='#'><span style='font-weight: bold; color:#ddd;'>Informasi Praktikum</span></a>
    <ul class='children'>
    <li><a href='#'>Fisika Dasar</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Praktikum%20Kimia%20Fisika'>Kimia Fisika</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Praktikum%20Farmasi%20Fisika'>Farmasi Fisika</a></li>
    <li><a href='#'>Fitokimia</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='http://arimjie.blogspot.com/search/label/Tips%20Ngeblog'>Design</a>
    <ul class='children'>
    <li><a href='http://arimjie.blogspot.com/search/label/Photoshop'>PhotoShop</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Coreldraw'>CorelDraw</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Desain%20Web'>Desain Web</a></li>
    </ul></li>

    <li><a href='http://arimjie.blogspot.com/search/label/Tips%20Ngeblog'>Blogging</a>
    <ul class='children'>
    <li><a href='http://arimjie.blogspot.com/search/label/My%20Tools'>My Tools</a>
    <ul class='children'>
    <li><a href='http://arimjie.blogspot.com/2012/01/kode-warna-html-complit-seperti.html'>Kode Warna</a></li>
    <li><a href='http://arimjie.blogspot.com/2012/04/parse-html.html'>Parse HTML</a></li>
    <li><a href='http://arimjie.blogspot.com/2012/01/cara-mengecek-berat-blog.html'>Check Weight</a></li>
    </ul></li>
    </ul></li>

    <li><a href='http://arimjie.blogspot.com/search/label/Software'>Software</a></li>
    <li><a href='#'>Lain Lain</a>
    <ul class='children'>
    <li style='color: rgb(255, 102, 102);'><a href='http://arimjie.blogspot.com/search/label/TV%20Live%20Streaming'>TV Streaming</a>
    <ul class='children'><li><a href='http://arimjie.blogspot.com/2011/01/rcti-live-streaming.html'>RCTI Live Streaming</a></li><li><a href='http://arimjie.blogspot.com/2011/01/mivotv-live-streaming.html'>Mivo.tv Live Streaming</a></li></ul></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Bisnis'>Bisnis</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Serba Serbi'>Serba Serbi</a></li>
    </ul>
    </li>
    <li><a href='#'>E-Book</a>
    <ul class='children'>
    <li><a href='http://arimjie.blogspot.com/search/label/Book%20Review'>Review</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Pharmacy E-Book'>Pharmacy</a></li>
    </ul>
    </li>
    <li><a href='http://arimjie.blogspot.com/search/label/Exchange' target='_blank'>Exchange</a>
    <ul class='children'>
    <li><a href='http://arimjie.blogspot.com/2012/01/tukar-link.html'>Banner Exchange</a></li>
    <li><a href='http://arimjie.blogspot.com/2012/01/link-exchange.html'>Link Exchange</a></li>
    </ul>
    </li>
    <li><a href='http://arimjie.blogspot.com/2012/04/guest-book.html' target='_blank'>Guest Book</a></li>
    <li><a href='http://arimjie.blogspot.com/search/label/Daftar Isi' target='_blank'>Daftar Isi</a></li>
           </ul>
    </div>
  6. Terakhir pratinjau dan kalo sudah sesuai dengan harapan save. !! selamat mencoba.

Ditulis Oleh : arimjie blog ~Arimjie Blog~ share about what I know

icon-kecil Artikel Drop Down Navigation Menu With Bounce Effect ini diposting oleh arimjie blog pada hari Jumat, 18 Mei 2012. Anda bisa menemukan artikel Drop Down Navigation Menu With Bounce Effect ini dengan url http://arimjie.blogspot.com/2012/05/drop-down-navigation-menu-with-bounce.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Drop Down Navigation Menu With Bounce Effect ini sangat bermanfaat, namun jangan lupa untuk meletakkan link Drop Down Navigation Menu With Bounce Effect sebagai sumbernya.

..:: Terimakasih::..

Artikel Terkait Lainnya Seputar:



19 comments:

  1. menu dropdown nya kaya menu blog ini ya gan,,ijin coba ya gan..:D

    BalasHapus
  2. waduh artikel master taufik ada dimana-mana...xixixi

    BalasHapus
    Balasan
    1. weits ada master di sini.. maksih dah berkunjung master koben.. :)

      Hapus
    2. kan artikelnya master taufik banyak berguna :)
      btw, salam kenal broo..

      Hapus
    3. salam kenal balik sobat

      Hapus
  3. Melihat tampilan blog ini rasanya seperti web profesional, mantabs deh... pingin seperti ini tapi kurang bisa hehehehe

    Trims atas tutornya masbro, ijin mempelajari ya :)

    BalasHapus
    Balasan
    1. hehehe... mas arie berlebihan nih..:)

      silahkan dipelajari mas!!

      Hapus
  4. sdh saya follow mas bro.
    jangan lupa sering2 berkunjung,
    http://denbo-1.blogspot.com

    BalasHapus
  5. salam kenal sobat...
    nice post

    BalasHapus
  6. Ane coba buat blog ane yang lain sobat...
    terima kasih infonya...

    BTW, home pagenya bagus, ane mau pake diblog ane gimana cara buatnya yah ?
    mohon tutorialnya yah... :D

    BalasHapus
  7. Luar biasa... menarik sekali tutorialnya, langsung minta izin copas artikel tak simpen di notepad, buat arsip tutorial sewaktu2 dibutuhkan.
    BTW, betul jg tuh.... home pagenya keren ui....

    BalasHapus
  8. Bgus nih artikelnya,,,tpi saya takut ngutakngatik Parse HTML saya,,,Blog saya kan udah ada menunya klo di tambahin Efek bounce mungkin akan lbih menarik,tpi rasanya blog saya ga perlu di tambahin efek bounce deh...Thanks udah mau berbagi Ilmunya,,

    Di tunggu Komentar Dan kunjungan baliknya..!!!

    BalasHapus
  9. ckckc, mantab. backto top sama breadcrumbnya sama :D

    BalasHapus
  10. Keren nih sob tutorialnya mengenai Drop Down Navigation Menu With Bounce Effect, pengen nyoba tapi belum ada waktu... kapan-kapan mau nyoba ah...Makasih sob :)

    BalasHapus

Mohon Berkomentarlah dengan Baik dan Sopan, tanpa harus memasang link hidup. Trims

 

Selamat Datang

Selamat datang di Arimjie Blog, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis apa adanya, ada yang muncul dari hasil pemikiran sendiri ada juga dari materi kuliah, hasil copas (tentunya diedit dulu..hehe..

Sekilas tentang Arimjie Blog

Nama lengkap saya Abd.Karim biasanya disapa Arim ato Aim saya membuat blog ini karena ingin berbagi ma teman-teman, sekaligus eksis di dunia blogger and dunia maya tentunya :p

Navigasi

Info