<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
