27304 sujets

CSS et mise en forme, CSS3

Bonjour,
désolé mais je ne viens pas bout de ce menu:
lorsque je lances ce HTML, tout est bien et, si je diminue à la main ma fenêtre en largeur à 750 pixels le menu disparaît , et apparaît mon bouton à cliquer ... Je peux cliquer plusieurs fois cela fait bien apparaître et disparaître le menu c'est parfait.
Si le menu affiché je glisse à nouveau ma fenêtre pour l’agrandir,
de toute façon le bouton à cliquer disparaît , c'est toujours parfait.
**Par contre si je fais cela alors que le menu était affiché tout semble bien marcher, par contre s'il était caché, il ne réapparaît pas ???
Auriez vous une idée de ce que j'ai loupé, Merci d'avance.

<!DOCTYPE html><html lang='fr'><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Menu teste</title>

<script>
function AfficherCacherMenu(texte)  {
     var test = document.getElementById(texte).style.display;
     if (test == "flex")  { document.getElementById(texte).style.display = "none"; }
   else {document.getElementById(texte).style.display = "flex";}
}
</script>

<style>
body { 	background-color:#ffffff;font-family:"Times New Roman", Times, serif;color:#000000; font-size:20px;margin:0;border:0;}
.wrapper {
  display: grid;
  grid-template-rows: auto auto 1fr; 
  grid-template-areas: 
    "bandeau"
    "ToutMenu"
    "footer";
  min-height: 100vh;
}
.bandeau {
  grid-area: bandeau;
}
.ToutMenu {
  grid-area: ToutMenu;
}
.footer  {
  grid-area: footer;
}

p.lcentre {text-align:center;}
#right {float:right; width:30px;
    height:30px; display:none;}
div.menu { display: flex;flex-wrap: wrap;margin: 0;padding: 0;  max-width:1400px; justify-content:center;}
a.menu {  padding:5px 10px;margin:0 5px;text-decoration:none;color:#000000;border:solid 1px #000000; border-radius:30px;text-align:center;}
a.menu hover { border: solid 1px #ffaaaa;color: #ffaaaa;cursor:pointer;}

@media (max-width:750px) 
 {
   #right {display:block;}
   div.menu {display: none;	flex-direction: column;  width: 300px;}
   a.menu  {color:#000000;width:300px;}
}
</style>
</head><body>
<div class='wrapper'>
<div class="ToutMenu">
  <a href="#" id="right" onclick="AfficherCacherMenu('menu');" >
    <img  src="http://www.fox-infographie.com/zzz/menuclic.png" alt="Menu" /></a>
 <div class="menu" id="menu" style="display='flex';">
    <a href="#" class="menu" >Nous rejoindre</a>
    <a href="#" class="menu" >Recherche</a>
    <a href="#" class="menu" >Le Blog</a>
    <a href="#" class="menu" >Notre Métier</a>
    <a href="#" class="menu" >Photos</a>
    <a href="#" class="menu" >Coups de Coeur</a>
    <a href="#" class="menu" >Evènements</a>
   </div>
</div> 
  <div class="footer">
  </div>
  </div>
  </body></html>


Je vous l'ai remis ici https://codepen.io/jplyne/pen/mdJPKyV
Modifié par Jean-Pierre-Bruneau (29 Aug 2020 - 01:31)
Modérateur
bonjour,

Une meilleure méthode serait d'attribuer/retirer une class et de la déclarer uniquement dans ta médiaquerie en display:none; de telle sorte qu'elle ne soit active que pour les petits écran.

Les styles injecté via js prennent le pas sur tout les autres (même en ligne) .la seule façon de l'outrepasser est via js , par exemple sur un onresize et matchmedia pour repasser en display:flex;

cdt,
;)
Modifié par gcyrillus (27 Aug 2020 - 16:47)
Merci pour ta réponse, mais dur-dur car ta réponse casse mon projet !
Je craignait cette suprématie même sur le php je l'ai vu via les cookies qui sont exploitable de suite, alors que ce n'est quau rechargement de la page qu'un cookies php est exploitable !
Merci d'avoir regardé. (aurais-tu un exemple codé pour parer cela Smiley confused
Modérateur
Voici un exemple sans toucher au HTML :


window.onload = AfficherCacherMenu("menu");

function AfficherCacherMenu(texte) {
  var test = document.getElementById(texte);
  var className = test.className;
  if (~className.indexOf("hide")) {
    test.classList.remove("hide");
  } else {
    test.classList.add("hide");
  }
}

au chargement de la page, la class hide est ajouté a #menu ce qui aura pour effet de caché le menu si ta mediaquerie est vrai.
@media (max-width:750px) 
 {
      div.menu.hide {display: none;}
  }
}

https://codepen.io/gc-nomade/pen/JjXNvXj

edit et disclaimer : je ne suis pas programmeur et ce n'est peut-être pas la meilleur approche en js , mais cela démontre l'idée Smiley cligne
Modifié par gcyrillus (27 Aug 2020 - 19:38)
Meilleure solution
Mille mercis je vois ce que tu dit et je passes en résolu, mille mercis à toi !
VERIFIE ça marche tu es super !!!!!!!! Smiley cligne
Modifié par Jean-Pierre-Bruneau (27 Aug 2020 - 20:52)