[hentsch]

ok, perhaps just like this :
Just put it in custom JS of theme options

jQuery(document).ready( function ($) {
	$( "#mobile-menu ul.sub-menu" ).not( ".current-menu-ancestor > ul.sub-menu" ).hide();
});

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

[hentsch]

Hi Elias,
Isn’t it exactly what happends with my second solution ?
Have a look here for an example (with a mobile device of course 😉 : https://mouskif.ch/voyages-camps/yoga-escalade/
Vincent

[hentsch]

Hi !
Ok thank you for watching this.
Regards
Vince

[hentsch]

This reply has been marked as private.

[hentsch]

I don’t know !
You are best placed to know that 😉
But don’t Parallax mean that effect ?

Vince

[hentsch]

UPDATE:
– setTimeout in enter and leave menu to avoid shadow background to be activated when you just move the mouse over the menu, without willing to show the menu.
– change the selector to only activate on menu item and not the whole line

<script>
jQuery(document).ready( function ($) {
	$('#container').append('<div id="bg-menu-shadow" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(0,0,0); z-index: 3; opacity: 0;display:none;"></div>');
	vhInMenu = 0;
	$('#menu-menu-par-activite-1').children().hover( 
		function() {
			vhInMenu = 1;
			setTimeout(function(){
				if(vhInMenu == 1){
					$('#bg-menu-shadow').fadeTo(400,0.5);
				}
			}, 250);
		}
			,
		function() {
			vhInMenu = 0;
			setTimeout(function(){
				if(vhInMenu == 0){
					$('#bg-menu-shadow').fadeOut(700,'easeInExpo');
				}
			}, 100);
		}
	);
});
</script>

[hentsch]

UPDATE:
– z-index value
– fadeOut time & shape
– div id name
– menu ID

<script>
jQuery(document).ready( function ($) {
	$('#container').append('<div id="bg-menu-shadow" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(0,0,0); z-index: 3; opacity: 0;display:none;"></div>');
	$('#REPLACE_WITH_YOUR_MENU_ID').hover( 
		function() {
			$('#bg-menu-shadow').fadeTo(400,0.5);
		},
		function() {
			$('#bg-menu-shadow').fadeOut(700,'easeInExpo');
		}
	);
});
</script>

[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;
}

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

Hello,

I finaly code this, in case it could help someone. It’s not yet perfect but, for me, better than without.

Just put it in custom JS of theme options, and change “menu-menu-par-activite-1” by yours. You can see the result here : mouskif.ch

<script>
jQuery(document).ready( function ($) {
	$('#container').append('<div id="vh-menu-shadow" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(0,0,0); z-index: 1; opacity: 0;display:none;"></div>');
});

jQuery(document).ready( function ($) {
	$('#menu-menu-par-activite-1').hover( 
		function() {
			$('#vh-menu-shadow').fadeTo(400,0.5);
		},
		function() {
			$('#vh-menu-shadow').fadeOut(500);
		}
	);
});
</script>

Regards
Vince

[hentsch]

ok, too bad
thanks
Vince

[hentsch]

Hello,
Is it possible now ?
Thanks

[hentsch]

ok thanks !

[hentsch]

ok sorry.
The problem came from the cache of CloudFlare. So the problem was in a previous version of dante and now it’s resolved.
Thanks and sorry for the disturbance
Vincent

[hentsch]

Sure I did clear the cache, on firefox, chrome and vivaldi. And everywhere the same.
However on my android tablet, it’s displaying normaly, but without animation.