Hello, i’ve tried to understand by myself but…
I’ve just started with javascript and next jquery and i want to create a responsive menu. With a certain browser width menu will be on top and totally visible. With resizing below 720 px menu will disappear and will appear the classic menu icon. Cliking menu icon will show the previous menu transformed in a column and he will enter from… right ok?.
Ok with html, css, appearing on click and disappearing on other click. Ok with resizing and menu transform in his original shape but… If i click to fadeOut him when i resize to full screen menu is… faded out.
Then i added this:
$(window).resize(function() {
if (window.innerWidth >= 720) {
$('#trial').css('display','inherit');
};
});
At original code:
$(document).ready(function() {
$("#button").click(function() {
$("#trial").fadeIn("slow");
});
$("#chiudilo").click(function() {
$("#trial").fadeOut("fast");
});
});
But obviously when i resize below 720 px… menu will display again even if it wasn’t displayed. Then click functions works, but…
Can anyone suggest me? I want to learn, not to copy so i ask your help