WordPress slide down menu

2 Views

i tried to implement a jquery slide down menu in my wordpress blog.
Sadly it is not working at all. I will show the submenu when i click on the parent menu point. Here is my html code: 

    <ul id="menu-sidebarmenue" class="menu">
    <li id="menu-item-37" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-37"><a href="#">Parentmenu</a>
    <ul class="sub-menu">
    <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href="?page_id=13">Submenu 1</a></li>
    </ul>
  </ul>

my Css:

Read More
ul{
    margin:0;
    padding:0;
    list-style-type: none;
}
li{
    margin:0;
    padding:0;
    list-style-type: none;
}
.menu-item {    
    width: 225px;
    display: inline-block;
    color: black;
    text-decoration: none;
    font-size: 11px;
    font-weight: normal;
    padding: 5px 0;
    cursor: pointer;
    border-top: black dotted 1px;
}
.sub-menu { 
    float: left;
    display: inline-block;
    color: black;
    padding: 10px 0px 15px 5px;
    text-decoration: none;
    font-size: 11px;
    font-weight: normal;
    }

and my Javascript: 

$(document).ready(function() {

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.menu-item-has-children').click(function() {

        //REMOVE THE ON CLASS FROM ALL BUTTONS
        $('.menu-item-has-children').removeClass('on');

        //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
        $('.sub-menu').slideUp('normal');

        //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
        if($(this).next().is(':hidden') == true) {

            //ADD THE ON CLASS TO THE BUTTON
            $(this).addClass('on');

            //OPEN THE SLIDE
            $(this).next().slideDown('normal');
         } 

     });


    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER 
    $('.menu-item-has-children').mouseover(function() {
        $(this).addClass('over');

    //ON MOUSEOUT REMOVE THE OVER CLASS
    }).mouseout(function() {
        $(this).removeClass('over');                                        
    });

    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/


    /********************************************************************************************************************
    CLOSES ALL S ON PAGE LOAD
    ********************************************************************************************************************/   
    $('.sub-menu').hide();

});

can anyone help me with my code?
Would be very nice. Thank you a lot!

EDIT::
Hi, i got the problem now when i have more than one dropdown menu and i click on one, that all other open as well. can you help me how i can fix this that just .this object slides down?

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. That’s because the jQuery you are using is referencing to HTML elements that you do not use.

    In your HTML, there are no classes on or off.

    Also, you only have one slide, so the functions for closing slides do not work correctly.

    If you just want to toggle the .slideDown() and .slideUp() animations on the submenu, you can do this:

    $(document).ready(function() {
    $('.sub-menu').hide();
    
    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.menu-item-has-children').click(function() {

        $('.sub-menu').slideToggle('normal');
        
     });
});

    This works for a simple sliding animation. See what I mean in this demo:

    DEMO