How to create a bounce effect on a ul

I am using a page that has a menu. when you select the menu (mouseover or mouse movement) drop down ul appears. Here is the code

    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>  
    <script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>   
    <script type="text/javascript" src="js/myBounce.js"></script>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 


    <div id="page-wrap">
        <div id="menubg">      
            <ul class="dropdown">   
                <li><a href="#">Really Tall Menu</a>
                        <li><a href="#">Basit</a></li>
                        <li><a href="#">Masood</a></li>
                <li><a href="#">Kinda Tall Menu</a>
                    <ul id="test">
                        <li><a href="#">Artificial Turf</a></li>
                        <li><a href="#">Benches &amp; Bleachers</a></li>
                        <li><a href="#">Communication Devices</a></li>


js / jquery-ui-1.8.17.custom.min.js contains a bounce effect. I want that when my ul appears, it appears with a bounce effect. I have a lot of ul's on my page. In myBounce.js I used the following code but it doesn't work



How can I create a bounce effect on a ul?



source to share

2 answers

You should use jQuery ui show advanced method to add effect when you show your ul

$( "#id_of_your_ul" ).show( 'bounce');




Using your html try this:

<style type="text/css">
    ul li ul {
        display: none;

<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>

<script type="text/javascript">
    $(document).ready(function () {
       $('ul.dropdown > li > a').click(function (e) {




All Articles