menu dropdown dengan effect ease bounce

Drop Down Menu With Effect Ease Bounce
Menu navigation sering sekali saya bahas dan kali ini menu kita akan menggunakan efect animation dengan jquery ui dengan efect easeOutbounce. jika anda suka silahkan ganti menu navigation anda dengan menu di bawah ini.
jika belum mengerti dengan membuat menu navigation silahkan kunjungi artikel dasar membuat menu navigation blog.
1. Jika anda sudah mempunyai menu pada template. maka ganti dengan HTML di bwah 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='denzdii'>
    <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>
        <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>
    </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>
    </ul>
        </li>
    </ul>
</nav>
3. Simpan CSS di atas ]]></skin>.
#denzdii {
 background:#156AA6;
 overflow:hidden;
}

#denzdii ul {
 float:left;
 height:30px;
 list-style:none;
 overflow:hidden;
 margin:0;
 padding:0;
}

#denzdii li {
 float:left;
 text-shadow:1px 1px 2px #0066B3;
 padding:0;
}

#denzdii 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;
}

#denzdii li.depan a {
 border-left:none;
}

#denzdii 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;
}

#denzdii li li {
 display:block;
 float:none;
 width:225px;
 border-top:1px solid #4B88B3;
 border-bottom:1px solid #043457;
 margin:0;
 padding:0;
}

#denzdii li:hover li a {
 background:#156AA6;
}

#denzdii li ul a {
 display:block;
 height:30px;
 font-size:12px;
 font-style:normal;
 text-align:left;
 margin:0;
 padding:0 10px 0 15px;
}

#denzdii li a:hover,#denzdii li:hover > a {
 color:#fff;
}

#denzdii li:hover ul.hidden {
 display:block;
}
4. Simpan script di atas </head>.
<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[
    $('#denzdii li ul').removeClass('hidden');
    $('#denzdii li').hover(function() {
        $('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
    }, function() {
        $('ul', this).slideUp(600, 'easeInExpo');
    });
    //]]>
</script>

Catatan : jika jquery pada no.1 dan 2 sudah ada pada template anda, maka jangan di masukan lagi. cukup satu saja. dan ingat lihat type nya jangan URL nya.

Terakhir simpan template dan lihat hasilnya...
DEMO

license by under 88 blogspot.com
Post By : denzdii

15 comments:

  1. Replies
    1. hehe,,, ini cuman pasang menu saja om..
      buat fixed tinggal di edit sama pembaca saja.. hehehe

      Delete
  2. saya gagal terus kang dengan tema yang saya pakai sekarang, semua cara udah di coba... apa ganti template aja ya?? :(

    ReplyDelete
    Replies
    1. lihat jquery yang di bakai kank..
      ini menggunakan plugin jquery ui ...
      lihat lagi javascriptnya...

      bisi weh bentrok... :D

      Delete
  3. jago bgt nyari warnanya :D
    kapan2 akan saya pakai ini.

    ReplyDelete
    Replies
    1. ach.. warna saya sesuaikan dengan template saya aja kank.. selebihnya biar pembaca yang edit warna lagi.. hehe

      Delete
    2. itu cara ngilangin header sama footer feedjitnya gmana caranya?? :D

      Delete
    3. edit script-nya.. :p hapus sebagian link lainnya.. ;)

      Delete
  4. kang,, tolong di cek hasil nya pada blog saya... :D

    ReplyDelete
    Replies
    1. om jquery nya kebanyakan.. pake satu saja.. pake yang versi
      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
      hapus jquery lainnya..

      Delete
    2. kang,, tolong dong... dropdown saya ko gak mau work ya,, pakai effect ini.... padahal udah sesuai semua seperti tutor diatas

      Delete
    3. pake di blog yang mana sich kank.. saya susah reviewnya.. soalnya di blog waroengseo belum di pasang dropdownnya...

      Delete
  5. kang..saya udah coba tapi kok masih belum berhasil kang..tolong di cek dong kang..di blog saya yang ad-downloadgames.blogspot.com ,saya tunggu kang...

    ReplyDelete
  6. wah..., keren..., ini kayak yang di blognya DTE :] bukan ??

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top