CSS / JS / Jquery – Éléments Flex pour des tailles d’écran réactives

J’ai un site avec 3 éléments dans ma navigation que je veux restr sur une ligne.

  • Le premier est le menu principal qui contient les liens du site principal et devrait être situé à gauche de la barre de navigation.
  • La seconde est l’information de contact qui devrait être centrée dans la barre de navigation.
  • Le troisième est le menu d’authentification, qui contient des liens de connexion / compte, etc.
#nav{ height:50px; width:100%; position:relative; display:flex; } ul{ display:inline-block; height:50px; line-height:50px; list-style:none; } li{ display:inline-block; } #main_menu{ flex:3; text-align:left; } #header_numbers{ flex:4; text-align:center; } #auth_menu{ flex:3; text-align:right; } 
  

Si l’écran devient trop petit, les différents menus tomberont sur une autre ligne, mais ce que je veux, c’est masquer celui qui est au centre avec les informations de contact et n’avoir que les deux menus à droite et à gauche pour que tout rest sur une seule ligne.

Je ne sais pas s’il existe un moyen d’y parvenir uniquement avec CSS sauf si je @media only screen and (max-width: 500px) une requête telle que @media only screen and (max-width: 500px) mais je préférerais simplement limiter ces requêtes au minimum pour les ordinateurs de bureau / mobiles. plutôt que d’avoir des requêtes supplémentaires de tailles différentes uniquement pour un élément spécifique.

Toute aide ou aide à ce sujet serait grandement appréciée.

Si vous ne souhaitez pas utiliser les requêtes multimédia, vous pouvez utiliser Javascript / jQuery, mais je pense que vous avez intérêt à utiliser des requêtes multimédia pour cela.

Cependant, ceci est une solution jQuery si vous préférez que:

Placez un gestionnaire d’événements sur la fenêtre pour load et resize événements qui vérifient si la fenêtre avec est égale ou identique à 500. Si cette condition est vraie, masquez l’élément #header_numbers , s’il est faux, affichez-le.

 $(window).on('load resize', function(){ if($(window).width() <= 500) { $('#header_numbers').hide(); } else { $('#header_numbers').show(); } /* Alternative notation use what you prefer $(window).width() <= 500 ? $('#header_numbers').hide() : $('#header_numbers').show(); */ }); 
 #nav{ height:50px; width:100%; position:relative; display:flex; } ul{ display:inline-block; height:50px; line-height:50px; list-style:none; } li{ display:inline-block; } #main_menu{ flex:3; text-align:left; } #header_numbers{ flex:4; text-align:center; } #auth_menu{ flex:3; text-align:right; } 
   

Vous devez de toute façon définir la propriété display sur none , sinon, il est impossible, sans interrogation du média, de masquer quoi que ce soit sur une taille d’écran différente (dans votre cas, une taille d’écran plus petite).

Vous pouvez utiliser : –

 @media only screen and (max-width: 540px) { #header_numbers{ display: none; } } 

Vous décrivez les fonctionnalités des requêtes de média CSS, mais vous ne voulez pas les utiliser 🙂

Vous pouvez toujours utiliser JS, mais il est moins performant que les requêtes multimédia

 const maxWidth = 500; document.addEventListener("DOMContentLoaded", () => { checkWidth(); }); window.addEventListener('resize', () => { checkWidth(); }); function checkWidth() { if(window.innerWidth < maxWidth) { // ...do somthing with the element } } 

Comme je le sais, media-query est le seul moyen d’appliquer un style en fonction de la taille de l’écran en css

Par exemple, #header_numbers sera #header_numbers lorsque la fenêtre du navigateur aura #header_numbers large ou moins:

 @media only screen and (max-width: 600px) { #header_numbers{ display: none; } }