jquery: slidedown and slideup on horizontal navigation bar menu

Question

I'm trying to create a simple show submenu with simple slideup or slidedown animation on hover using jquery.

It works fine when i have #menu1 and #menu2. But there is repetition in code.

How can I get sub1 and sub2 to slide up and down without repeating code?

I also want to display sub1 and sub2 in orange and the dropdown list in blue. However, now all are getting displayed in blue.

thank you.

My code:

<style type="text/css">
ul{
list-style-type:none;
margin:0;
padding:0;
background-color:#FF9900;
}
li {float:left;
display:block;
width:120px;
text-align:center;
padding:4px;
color:#FFFFFF;
background-color:#33CCFF;}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#menu1").hover(
        function(){//onmouseover
            $("#menu1 ul").slideDown();
        },
        function(){//onmouseout
            $("#menu1 ul").slideUp();
        });
     $("#menu2").hover(
        function(){//onmouseover
            $("#menu2 ul").slideDown();
        },
        function(){//onmouseout
            $("#menu2 ul").slideUp();
        });
});
</script>
</head>

<body>
<ul id="menu">
    <li id="menu1">Sub 1
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
    <li id="menu2">Sub 2
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
</ul>       
</body>
</html>

bugwheels94 · Accepted Answer · 2012-07-19T07:50:52.603

3

$("#menu1,#menu2").hover(
        function(){//onmouseover
            $(this).children("ul").slideDown();
        },
        function(){//onmouseout
            $(this).children("ul").slideUp();
    });

edited Jul 19 '12 at 07:50

answered Jul 19 '12 at 06:47

bugwheels94

30,681
3
39
60

yes, that works. Thank you. However, i'm not able to display sub1 and sub2 in orange. All are appearing in blue(sub1, sub2 and the lists). – vaanipala Jul 19 '12 at 06:57
All are getting displayed in blue. If you notice the css code, i'm trying to display sub1 and sub2 in orange and the list items in blue. – vaanipala Jul 19 '12 at 07:25
Now all are displaying in orange. – vaanipala Jul 19 '12 at 07:48
sorry, now everything is working fine. I found the solution in the other question. – vaanipala Jul 20 '12 at 05:08

score 0 · Answer 2 · edited May 23 '17 at 11:51

My final solution with Ankit's help and guidance from css:background-color for main menu sub1 and sub2 not displaying. Thank you all!

<style type="text/css">
* {color:#ffffff;}
ul{
list-style-type:none;
margin:0;
padding:0;
}
li{float:left;
display:block;
width:120px;
text-align:center;
}

ul > li{background-color:#0000ff;}

ul > li > ul > li{background-color:#ff7700;}


</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){

    $("#menu1,#menu2").children("ul").hide(); //hides the lists when documents loads


    $("#menu1,#menu2").hover( 
        function(){//onmouseover 
            $(this).children("ul").slideDown(); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(); 
    }); 
});
</script>
</head>

<body>
<ul id="menu">
    <li id="menu1">Sub 1
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
    <li id="menu2">Sub 2
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
</ul>       
</body>

jquery: slidedown and slideup on horizontal navigation bar menu

2 Answers2