Mobile menu toggle submenu

[rixator]

Hi,

I need to have a toggle function for submenus in mobile view.
When the visitor touches main menu item it should expand to show all submenus but right now it shows everything expanded at once which makes the menu list very long.

I have UberMenu 3 which has the toggle functionality but I think that Dante is overriding it somehow. Do you know of a solution for this?

Thanks

[Kyle – SUPPORT]

Hi

I’m afraid the toggle is currently possible with the mobile menu. Will have to check with the developer to see if we can add it in

– Kyle

[iraqiboy90]

@Kyle

How?
Brown Bear, one of the sites you showcase did it.

[Kyle – SUPPORT]

Hi

They’re using Joyn not Dante

– Kyle

[iraqiboy90]

Dante does NOT have this option?

[Kyle – SUPPORT]

I’m afraid not, possibly something we will add when we get time

– Kyle

[hentsch]

Hello,
Is it possible now ?
Thanks

[Mohammad – SUPPORT]

Hi,
This feature is not available by the theme currently.
Thanks
Mohammad

[hentsch]

ok, too bad
thanks
Vince

[Kyle – SUPPORT]

No problem

[hentsch]

Hello,

As for my last request, I finaly code this, in case it could help someone.

Just put it in custom JS of theme options. You can see the result here (with a mobile device!) : mouskif.ch

jQuery(document).ready( function ($) {
	$( "#mobile-menu ul.sub-menu" ).hide();
	$( "#mobile-menu .menu-item-has-children > a" ).click(function(e) {
		e.preventDefault();
		e.stopImmediatePropagation();
		$( this ).next().slideToggle();
		$( "#mobile-menu ul.sub-menu" ).not($(this).next()).not($(this).parents( ".sub-menu") ).slideUp();
	});
});

Regards

Vincent

[hentsch]

and another version, with mobile menu opened on the current page :

jQuery(document).ready( function ($) {
	$( "#mobile-menu ul.sub-menu" ).not( ".current-menu-ancestor > ul.sub-menu" ).hide();
	$( "#mobile-menu .menu-item-has-children > a" ).click(function(e) {
		e.preventDefault();
		e.stopImmediatePropagation();
		$( this ).next().slideToggle();
		$( "#mobile-menu ul.sub-menu" ).not($(this).next()).not($(this).parents( ".sub-menu") ).slideUp();
	});
});

with this in custom css to be more visible :

#mobile-menu .menu li.current-menu-ancestor > a, #mobile-menu .menu ul li.current-menu-ancestor > a, #mobile-menu .menu ul li.current-menu-item > a {
    background-color: #313131!important;
}

[Mohammad – SUPPORT]

Hi,

@hentsch – Great thanks to share the code.
Thanks
Mohammad

[3lias]

Hi. Can the code be modified in a way that the current (main) menu sub-menus are displayed without clicking at it?

For example, Main 2 (site) currently open and the menu should look like this:

Main 1
Main 2
Sub 2.1
Sub 2.2
Main 3
Main 4
Main 5

When clicking at Main 4 the (Main 4) site should load an the menu looks like this

Main 1
Main 2
Main 3
Main 4
Sub 4.1
Sub 4.2
Sub 4.3
Main 5

And pretty much the same if one clicks form here at Sub 4.2.

I hope this makes sense and you understand what I mean.

Thanks

Elias

[David Martin – Support]

Hi Elias,

Not by default, you would need to work with a developer to intergrate this further then our initial demo: http://dante.swiftideas.com/