jquery: прокрутка и прокрутка в меню горизонтальной панели навигации

Я пытаюсь создать простое подменю шоу с простой анимацией слайдов или слайдов при наведении курсора с помощью jquery.

Он отлично работает, когда у меня есть #menu1 и #menu2. Но в коде есть повторения.

Как я могу заставить sub1 и sub2 скользить вверх и вниз без повторения кода?

Я также хочу отображать sub1 и sub2 оранжевым цветом, а раскрывающийся список синим цветом. Однако теперь все отображается синим цветом.

Спасибо.

Мой код:

<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>

menu navigationbar jquery slidedown slideup
person vaanipala    schedule 19.07.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Мое окончательное решение с помощью Ankit и под руководством css:background -цвет для главного меню sub1 и sub2 не отображается. Спасибо вам всем!

<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>
person vaanipala    schedule 20.07.2012

arrow_upward

arrow_downward

person    schedule
comment
да, это работает. Спасибо. Однако я не могу отображать sub1 и sub2 оранжевым цветом. Все отображаются синим цветом (sub1, sub2 и списки). - person vaanipala; 19.07.2012
comment
Все отображаются синим цветом. Если вы заметили код CSS, я пытаюсь отобразить sub1 и sub2 оранжевым цветом, а элементы списка — синим. - person vaanipala; 19.07.2012
comment
Теперь все отображается оранжевым цветом. - person vaanipala; 19.07.2012
comment
извините, теперь все работает нормально. Я нашел решение в другом вопросе. - person vaanipala; 20.07.2012