Hey guys im using a simple script I found online to allow my responsive menue to hide and display the conent of the menu. All is working great when its in in mobile sub 740px however when I expand the viewport and the desktop view comes back if the user clicks on the header it then hides the viewport. Look at this example
I was thinking I could use JS to determin the screen size using the @media rule in css and then enable and disable the function, not knowing anything about js I again found this code online and mixed it with my own script to try and hack together a solution. Sadly this dose not work and the result is a desktop menu that dose not hide however the mobile menu that dose not show.
This was my hacked together script, im guesing Im not reading the script correctly and missing an if statment of some sort?
/*Show and hide the menu*/
$(document).ready(function() {
// run test on initial page load
checkSize();
// run test on resize of the window
$(window).resize(checkSize);
});
//Function to the css rule
function checkSize(){
if ($("nav").css("background-color") == "black" ){
// your code here
$(function() {
var menuVisible = false;
$('#menuBtn').click(function() {
if (menuVisible) {
$('#myMenu').css({'display':'none'});
menuVisible = false;
return;
}
$('#myMenu').css({'display':'block'});
menuVisible = true;
});
$('#myMenu').click(function() {
$(this).css({'display':'none'});
menuVisible = false;
});
});
}
}
After reading an interesting article on sitepoint I have edited the code to the following. This seems to of fixed it all except if you resize the browser then click on te menu it disapears.
if (matchMedia) {
var mq = window.matchMedia("(max-width: 700px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
$(function() {
var menuVisible = false;
$('#menuBtn').click(function() {
if (menuVisible) {
$('#myMenu').css({'display':'none'});
menuVisible = false;
return;
}
$('#myMenu').css({'display':'block'});
menuVisible = true;
});
$('#myMenu').click(function() {
$(this).css({'display':'none'});
menuVisible = false;
});
});
} else {
// window width is less than 500px
$(this).css({'display':'block'});
}
}
