Baiklah sobat pada kesempatan ini seocips akan membagikan tentang cara membuat navigasi menu dropdown dengan effect easeOutbounce, setelah sebelumnya juga seocips telah membagikan navigasi menu Lavalamp pure CSS3.

Dengan memasang menu navigasi pada blog, dapat memudahkan pengunjung untuk mencari artikel dalam satu kelompok/ kategori yang di letakan dalam navigasi ini. Misalkan pada menu navigasi tertera "Widget" maka pada menu drop downnya bisa diisi pecahan-pecahan dari kategori Widget ini misalnya widget facebook, widget email subcribe, widget Google Plus dan lain sebagainya.




Cara Membuat Navigasi Menu Dropdown Bounce Effect

1. Jika anda sudah mempunyai menu pada template. maka ganti dengan HTML di bawah ini.
2. Jika belum ada menu silahkan simpan HTML di di bawah header atau di atas main-wrapper . ingat nama ID tiap template berbeda.
<nav id='navseocips'>
    <ul>
        <li class='depan'><a href='/'>Beranda</a></li>
        <li><a href='#'>Title 2</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
        <li><a href='#'>Title 3</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
        <li><a href='#'>Title 4</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
         <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
    </ul>
</nav>
3. Simpan CSS di atas kode ]]></skin> atau </style>.
#navseocips { background:#156AA6; overflow:hidden; }
#navseocips ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0; }
#navseocips li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0; }
#navseocips li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px; }
#navseocips li.depan a { border-left:none; }
#navseocips li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0; }
#navseocips li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0; }
#navseocips li:hover li a { background:#156AA6; }
#navseocips li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px; }
#navseocips li a:hover,#navseocips li:hover > a { color:#fff; }
#navseocips li:hover ul.hidden { display:block; }
4. Simpan script di atas kode </head>.
Catatan : jika jquery pada kode berwarna merah dibawah sudah ada pada template anda, maka jangan di masukan lagi. cukup satu saja.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>

<script type='text/javascript'>
//<![CDATA[
    $('#navseocips li ul').removeClass('hidden');
    $('#navseocips li').hover(function() {
        $('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
    }, function() {
        $('ul', this).slideUp(600, 'easeInExpo');
    });
    //]]>
</script>
5. Save dan lihat hasilnya.

Sekian navigasi menu dropdown yang dapat dibagikan seocips untuk saat ini. Selamat mencoba.
2 Komentar untuk "Membuat Navigasi Menu Dropdown Bounce Effect"

Gan Klo Terapkan Efek Bounce Nya aja tanpa Sub Menu nya Gimana??

Itu efek bounce hanya kelihatan pada sub menunya, kalau tanpa sub menu jadi navigasi kayak biasanya. Kalau pengen tanpa sub menu tinggal hapus saja, misalnya:
<ul class='' style='display: none;'>
<li><a href='#'>Dropdown</a></li>
<li><a href='#'>Dropdown</a></li>
</ul>
begitu pun dengan title selanjutnya dan tidak perlu menggunakan script pada langkah ke 4 diatas.