Menu wants to appear!

jquery
javascript
#1

Hello, i've tried to understand by myself but... :confused:

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 :smiley:

#2

but if you want to hide #trail when the window becomes less then 720px, why set #trail to display inherit? if you want to hide it, use display none instead

#3

No i want to hide it when window become more than 720px
>=

#4

okay, can i see all the relevant parts of the code? I need to see in action in other to help you