how to create WordPress responsive menu working like accordion for mobile devices?

I have created my WP responsive menu and it has several level sub menus, and I want to only show or slideToggle the particular sub-menu when tap or click on it.

I have put the span into the anchor tag to prevent redirecting to URL, so only click or tap on the span will slide the menu.

Read More

this is menu structure.

<nav id="nav" class="menu-menu-container" style="display: block;">
    <ul id="menu" class="menu">
        <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-has-children menu-item-7"><a href="http://localhost/wordpress/">Home<span class="arrow"> </span></a>
            <ul class="sub-menu">
                <li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-8"><a href="http://localhost/wordpress/sample-page/">Sample Page</a></li>
                    <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-32"><a href="http://localhost/wordpress/activate/">activate<span class="arrow"> </span></a>
                    <ul class="sub-menu">
                        <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost/wordpress/register/">register</a></li>
                        <li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-34"><a href="http://localhost/wordpress/resetpass/">resetpass<span class="arrow"> </span></a>
                            <ul class="sub-menu">
                                <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="http://localhost/wordpress/forgotpass/">forgotpass</a></li>
                                <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href="http://localhost/wordpress/activate/">activate</a></li>
                                <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href="http://localhost/wordpress/logout/">logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    <li id="menu-item-10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-10"><a href="http://localhost/wordpress/member/">member</a></li>
    <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href="http://localhost/wordpress/login/">login</a></li>
    </ul>
</nav>

This is jquery.

$('.menu > li.menu-item-has-children > a').append('<span class="arrow"> </span>');
$('.sub-menu li.menu-item-has-children > a').append('<span class="arrow"> </span>');


$('.menu > li.menu-item-has-children > a > span.arrow').click(function(){
    var txt = $(this).text() == ' ' ? '  ' : ' ';
    $(this).text(txt);
    $('.menu > li > .sub-menu').slideToggle('fast');
    if ($(this).text() == ' ') {
        setTimeout(function(){
        $('.menu > li > .sub-menu').removeAttr('style');
        },1000);
    } else {
    }
    return false;
});

for 2nd sub-menu.

$('.sub-menu li.menu-item-has-children > a > span.arrow').click(function(){
    var txt = $(this).text() == ' ' ? '  ' : ' ';
    $(this).text(txt);
    $('.sub-menu > li > .sub-menu').slideToggle('fast');
    if ($(this).text() == ' ') {
        setTimeout(function(){
        $('.sub-menu > li > .sub-menu').removeAttr('style');
        },1000);
    } else {
    }
    return false;
});

So for 3rd and so on…..

$('.sub-menu .sub-menu li.menu-item-has-children > a > span.arrow').click(function(){..
...

example

you can see what I have tried using this method I have to make this rules for every single selector.

so I don’t want this, is there any way I can do this all by only just in single click handler, so I when only user click or tap on the particular sub-menu the only that menu will slide or toggle.

Related posts

Leave a Reply

1 comment