Menu mobile : media queries et jQuery

Bonjour à tous,

J'ai ajouté un menu mobile quand la page est <500px

le code jQuery simple est celui-ci :

jQuery(document).ready(function($){
        	
	/* toggle nav */
	$("#menu").on("click", function(){
		$("#menu ul").slideToggle();
	});

});

sauf que l'effet SlideToogle s’applique même lorsque l'écran est >500px et fait disparaitre le menu un instant (normal effet SlideToggle).

Existe t'il une fonction Jquery pour activer l'effet que lorsque l'écran est <500px
en gros :

quand mon écran est <500px
$("#menu").on("click", function(){
		$("#menu ul").slideToggle();
	});

merci à vous
Modifié par Petipotam (14 Jul 2014 - 02:48)

une petite idée les amis ?

non le code s'applique sur les id "#menu" et "#menu ul" qui forment le menu principal et l' "ul" est juste en display:none dans le css quand la page est < à 500px
et le code javascript est présent dans le footer ...

$("#menu").on("click", function(){
		$("#menu ul").slideToggle();
	});

donc dans cette formule l'effet s'applique en permanence normal

l'idée c'est d'y ajouter une fonction pour que le javascript s'applique que quand la page est < à 500px

et là je suis dépassé haha

j'ai vu les matchmedia mais je ne comprend pas la mise en place

une idée ?

Raphaël a écris un article sur le sujet dernièrement:
http://blog.goetter.fr/articles/largeurs-javascript-css/

merci pour le lien

auriez-vous un exemple de mise en place avec mon code ?

Je ne suis malheureusement pas une experte en js.
Peut-être trouveras-tu une réponse dans la section javascript du forum.

Salut !

En jQuery c'est tout simple tu ajout juste if ($(window).width() < 501) {ICI ton script}

et voilà

Bonjour, merci pour ta réponse

le code final donnerait donc :

jQuery(document).ready(function($){

     if ($(window).width() < 501)
   	
	/* toggle nav */
	$("#menu").on("click", function(){
		$("#menu ul").slideToggle();
	});

});

Salut , non plutôt :

if ($(window).width() < 501) { // Debut du IF
jQuery(document).ready(function($){

/* toggle nav */
$("#menu").on("click", function(){
$("#menu ul").slideToggle();
});

});

}// fin du if qui doit tout englober