How to create a WordPress responsive menu that works like a mobile accordion?
I created my WP Responsive Menu and it has multiple level submenus and I want to show or show only one or the other submenu when I click or click on it.
I put the span in an anchor tag to prevent redirecting to the url, so just a click or tap on the range slips the menu.
this is the 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>
It's 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 the second submenu.
$('.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 the 3rd and so on ...
$('.sub-menu .sub-menu li.menu-item-has-children > a > span.arrow').click(function(){..
...
you can see what i have tried with this method. I need to do these rules for every single selector.
so i dont want that, is there a way to do it with just one click handler, so i, when only the user clicks or clicks on a particular submenu, only that menu will slide or toggle.
source to share
Several solutions.
-
build 2 menus - mobile and desktop (mobile with nolink # for collapse events), these menus are dispatched based on screen size
-
Prevent default via JS but u link loss functional
-
But I recommend building your walker for this menu based on bootstrap. Here's a walker https://github.com/twittem/wp-bootstrap-navwalker/blob/master/wp_bootstrap_navwalker.php
(About walkers: http://codex.wordpress.org/Function_Reference/wp_nav_menu )
source to share