Menu réactif masqué sur le redimensionnement de la fenêtre

J’ai un jsfiddle ici – http://jsfiddle.net/2r3Ap/

et une démo ici – http://www.ttmt.org.uk/forum/

C’est un menu réactif simple. Lorsque la fenêtre est redimensionnée, le menu horizontal est déplacé vers un menu vertical et masqué. Le bouton rouge contrôle ensuite le menu de navigation en défilant de haut en bas. Lorsque la fenêtre est redimensionnée plus grande, le menu horizontal devrait apparaître à nouveau.

Je pensais qu’il serait facile de recréer beaucoup de ces objects.

Mon problème est:

Si la fenêtre est redimensionnée plus petite et que le menu vertical est ouvert et fermé avec le bouton puis la fenêtre est agrandie, la navigation rest masquée.

J’ai besoin que le menu horizontal apparaisse lorsque la fenêtre est redimensionnée plus grande lorsque le menu vertical est ouvert ou fermé.

      Title of the document    *{ margin:0; padding:0; } header{ max-width:600px; margin:0 auto; background:#aaa; overflow:auto; padding:30px 50px 0 50px; border-left:10px solid #fff; border-right:10px solid #fff; } button{ width:30px; height:30px; background:red; display:none; border:none; } nav{ margin:10px 0 0 0; } nav li{ display:inline; } nav li a{ float:left; display:inline-block; padding:5px; background:yellow; margin:0 5px 0 0 ; } nav li a:hover{ background:#fff; } @media only screen and (max-width:400px){ button{ display:block; } nav{ display:none; } nav li{ display:block; } nav li a{ float:none; display:block; padding:5px; background:yellow; margin:0 5px 0 0 ; } }         One
 Two
 Three
 Four
 
 
 
 
  $(function(){ $('button').click(function(){ $('nav').slideToggle(); }) })

@ jimjimmy1995 a la solution la plus simple, mais une autre façon de procéder consiste à utiliser la méthode .resize() de jQuery:

 $(function () { var $window = $(window), $nav = $('nav'), $button = $('button'); $button.on('click', function () { $nav.slideToggle(); }); $window.on('resize', function () { if ($window.width() > 400) { $nav.show(); } }); });

Voir la démonstration de jsFiddle

Le problème est qu’il ne sait pas qu’il devrait afficher la barre de navigation lorsque l’écran est suffisamment grand. Ajoutez simplement display: block aux styles de nav dehors de la requête multimédia.

 nav{ margin:10px 0 0 0; display: block; }

jsFiddle

En règle générale: tout ce que vous définissez dans une requête multimédia doit avoir une valeur ‘par défaut’ en dehors de celle-ci.

Une autre façon, moins coûteuse en ressources, consiste à utiliser une fonction de rappel sur la méthode slideToggle . La fonction de rappel dira: “Une fois l’animation terminée, supprimez la propriété d’ display ligne et ajoutez une classe à l’élément.”

Le nouvel appel à slideToggle ressemblera à ceci:

 $(function(){ $('button').click(function(){ $('nav').slideToggle(400, function(){ $('nav').toggleClass('mobile-down').css('display', ''); }); }); });

Et le CSS:

 .mobile-down { display: block; }

Voici un violon modifié .

Pour une explication supplémentaire, je viens de terminer une question à réponse automatique avant de trouver ceci.