menu dropdown dengan 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

---

Post By : denzdii