Button to switch visibility of Menu

[Kirin]

Hello,

I have created a button to show and hide the menu. There is one button for desktop view and one for mobile view.

In the desktop view, I want the menu to be initially hidden when you visit the page and only appear when you use the button.
This works here.

On mouseover and click on the button the menu should switch between visible and invisible.

On mouseover it works perfectly. However, the menu can only be hidden by clicking on the button, but never shown.

Also, the menu is supposed to disappear when you click in an area outside the button or the menu. This works fine for the desktop version.

Here is the code for it:

Custom CSS for Desktop:

nav { visibility:hidden !important;}

nav.navon{  
    visibility:visible !important;  
}

nav.navoff{
    visibility:hidden !important;
}

Custom HTML at top:

<button name="jim" class="desktopbutton">—</button>	<div id="intro-region"></div>


jQuery(document).on("mouseover", ".desktopbutton", function() {
     jQuery("nav").toggleClass("navon");
    jQuery("nav").toggleClass("navoff");	 	 
});


jQuery(document).on("click", ".desktopbutton", function() {
         jQuery("nav").toggleClass("navon");
    jQuery("nav").toggleClass("navoff");
});
</script>

For the mobile version, I also want the menu to be initially hidden when you visit the page and only appear when you use the button.
That doesn't work here. If I insert

nav { visibility:hidden !important;} 

in Custom CSS for Mobile, the menu never appears, the button is then completely functionless.

If I leave out this code, at least the button works. But the menu is not hidden initially as intended when the site is visited.

In addition, the menu should also disappear in the mobile version if you click or "touch" in an area outside the button or the menu. This does not work here, unlike on the desktop.

Here is the code for the mobile version:

 <script>

<button name="mobilejim" class="mobilebutton">—</button>	<div id="intro-region"></div>

jQuery(document).on("click", ".mobilebutton", function() {
         jQuery("nav").toggleClass("navon");
    jQuery("nav").toggleClass("navoff");
});


jQuery(document).on("click touchstart", "html", function(event) {
    jQuery("nav").removeClass("navon");
    jQuery("nav").addClass("navoff");

 </script>

To detect the "touch" I also found this more complex solution online - but it it doesn't detect any touches in my case either:

 <script>
jQuery(document).on('touchstart',"html", function() {
    documentClick = true;
    return false;
});
jQuery(document).on('touchmove',"html", function() {
    documentClick = false;
});
jQuery(document).on('click touchend',"html", function(event) {
    if (event.type == "click") documentClick = true;
    if (documentClick){
    
    jQuery("nav").removeClass("navon");
    }
 });
 </script>

Originally this snippet came without the "html", which I inserted after the first fail, since it worked with "html" in the Desktop version. But still no luck here.

CSS is the same as for the Desktop version

I've spent a couple of days trying it out now and I'm really stuck. I would be very grateful for your help.

My Best,
Kirin

[arminunruh]

can u post the link please

[Kirin]

Hi Armin,

here it is: https://t-a-a-a.net/?cmp_bypass=34

Let me know if something too confusing.

Thanks!

@arminunruh

[arminunruh]

<script>

var showDesktop = false;

jQuery(document).on("mouseenter click", ".desktopbutton", function(e) {
e.stopPropagation();
if( showDesktop ) {
     jQuery("nav").removeClass("navoff");
}else{
     jQuery("nav").addClass("navoff");
}
showDesktop = !showDesktop;	 
});

the touchstart event is triggered at the same time the click event is triggered. you need to read about event propagation, google it

var showMobile = false;

jQuery(".mobilebutton",).on("click", function(e) {
e.stopPropagation();
if( showMobile == true ) {
jQuery("nav").removeClass("navoff");
}else{
jQuery("nav").addClass("navoff");
}
showMobile = !showMobile;
});


jQuery(document).on("click", function(event) {
// hide desktop and mobile menu
// if you dont want these menus to get hidden when clicking on a menu point,
// you need to take a look at event.target and see if that element or its parents are part of the menu
});

u probably also only need to add and remove one class: navoff instead of switching out navon, navoff. the navoff class just has opacity: 0;

i'd recommend you to read a beginners book about jquery to learn how to do things like that or post questions like that on stackoverflow or sth

i didn't test this code, idk if it really works well. but i don't have time to help you more than that, as its custom coding