26988 sujets

CSS et mise en forme, CSS3

J'ai du mettre dans la barre de menu deux menus identiques pourquoi ?
au départ j'avais cela;


<menu class="menu">
<div class="LeMenu" id="LeMenu">
  <header>
   <nav>
    <a href='fr_fi_email.php'  class='Bouton-Menu'> NOUS JOINDRE  </a>
    <a href='outil_cherche.php'  class='Bouton-Menu'> RECHERCHE  </a>
    <a href='fr_fi_blog.php'  class='Bouton-Menu'>LE BLOG  </a>
    <a href='fr_fi_metier.php'  class='Bouton-Menu'>  NOTRE METIER </a>
    <a href='wphoto.php'  class='Bouton-Menu'> PHOTOS  </a>
    <a href='fr_fi_lien.php'  class='Bouton-Menu'>  COUPS DE COEUR </a>
    <a href='fr_fi_evenement.php'  class='Bouton-Menu'> EVENEMENT  </a>
   </nav>
  </header>
 </div>
</menu>

avec ce fonctionnement en CSS plus le bouton vas et vient javascript


div.LeMenu { height :auto;width :auto; max-width :1900px; margin :auto; text-align :center;display:block;}
a.Bouton-Menu { padding: 5px;}
a.Bouton-MenuA { padding: 5px;}
nav {  display:flex;  justify-content:center;  flex-wrap:wrap;}
nav a {  margin: auto; }
.Bouton-Menu {
	display: inline-block;vertical-align: baseline;	margin: 0 20px;	outline: none;	cursor: pointer;
	text-align: center;	text-decoration: none;	font: 20px Arial, Helvetica, sans-serif;padding: .5em 2em .55em;
	border-radius: 30px;
    color: #ffffff;	border: solid 1px #ffffff;	background: #577bac;
}
.Bouton-Menu:hover {	
    text-decoration: none; background: #577bac; color: #ffaaaa;	border: solid 1px #ffaaaa;
}
.Bouton-MenuA {
	display: inline-block;vertical-align: baseline;	margin: 0 20px;	outline: none;	cursor: pointer;
	text-align: center;	text-decoration: none;	font: 20px Arial, Helvetica, sans-serif;padding: .5em 2em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);
		border-radius: 30px;
    color: #ffaaaa;	border: solid 1px #ffaaaa;	background: #577bac;
}
@media (min-width: 750px) and (max-width: 1300px) {
nav {  display:flex;  justify-content:center;  flex-wrap:wrap;}
nav a {  margin: auto; }
div.LeMenu { top:0px;height :auto;width :auto; max-width :1900px; margin :auto; text-align :center;display:block; }
div.Cmd-Menu { position :fixed; top :4px; right :4px; overflow :hidden; z-index :50;display:none;  }
}

@media (max-width:750px){
nav {    flex-direction: column;    width : 90%;  }
div.LeMenu { top:0px;height :auto;width :auto; max-width :90%; margin :auto; text-align :center;}
div.Cmd-Menu { position :fixed; top :4px; right :4px; overflow :hidden; z-index :50;display:block;display:none;}
}


et donc en 650px le bouton javascrit est apparu


function AfficherCacher(texte,quoi)  {
  if(quoi=="") {   
    var test = document.getElementById(texte).style.display;
    if (test == "block")  { document.getElementById(texte).style.display = "none"; }
    else  {  document.getElementById(texte).style.display = "block"; }
    }
  if(quoi!="") {
    document.getElementById(texte).style.display = quoi;   /* block ou none */
    }    
}


<div class='Cmd-Menu' id='Cmd-Menu'>
<img  src='zzz/menuclic.png' alt='Menu' onclick='AfficherCacher(\"LeMenu\",\"\");return false;'>  
</div>

Avec cette disposition, choses que ne voient pas les visiteurs ...
si j'inspecte et demande l'afichage portable le menu disparait , parfait et le bouton menu est la.
1) si je reviens en vision normale le menu réaparait (parfait)
2) si avant de revenir je clic mon bouton le menu apparait et si je reclic il disparait
Alors revenant a la vision grand écran, le menu ne réaparait pas.

Je suis donc dans l'obligation d'avoir dans la barre menu deux fois le même menu
l'un dédié au grand écran, l'autre aux portables Un Bug ??
Vous avez une idée ??
Administrateur
Hello,

En effet, il existe pas mal d'exemples de ce genre là sur Codepen.

Personnellement, mais c'est un détail, je ne suis pas super fan de devoir gérer les tailles d'écrans du côté JS *et* du côté CSS (je préfère que tout soit fait côté CSS).

Sinon, si tu veux d'autres exemples à titre comparatif, tu en trouveras ici : http://goetter.fr/nav/ Smiley cligne
Modifié par Raphael (12 Feb 2020 - 14:52)
Meilleure solution
et comme merci, j'ai découvert qu'au lieu de la description du bouton en CSS on le met dans le HTML &#9776; trop bien ça Smiley cligne

j'ai donc mis

<label for="toggle-nav" class="nav-button">&#9776;</label>

et retiré de [class^="nav-button"]

    height: 3.5rem; width: 3.5rem;
    background-color: transparent;
    background-image: linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333),
      linear-gradient(to right, #333, #333);
    background-position: center top, center, center bottom;
    background-repeat: no-repeat;
    background-size: 3.5rem .9rem;
    -webkit-tap-highlight-color:rgba(0,0,0,0);

C'est trop bien ce caractère &#9776;
Administrateur
Jean-Pierre-Bruneau a écrit :

C'est trop bien ce caractère &amp;#9776;

Oui... s'il correspond exactement à ce que tu souhaites (mais les graphistes sont parfois pointilleux sur ce genre de détails Smiley cligne )