Discussion :

[MoiStéphane]

Bonjour

J ai une div id="centre" en overflow:hidden qui contient une dropdown. Le pb est que bien évidemment le contenu de la dropdown ne s affiche pas puisque elle est contenue dans ma div centre .
J ai essayé de jouer avec les z-index de -1000 à 1000 mais je n y parviens pas.
Votre aide serait la bienvenue.
d'avance merci

mon code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div id="centre">
	<div >lorem...</div>
	<span class="dropdown ">
	     <span class="dropbtn ">Fr&nbsp;&nbsp;<i class="arrow arrow-down"></i></span>
	     <div class="dropdown-content">
	     <a href="#">Fr</a>
	     <a href="#">En</a>
	     </div>
	</span>
</div>

mon css

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
div#centre {
  padding: 1px 20px;
  overflow: hidden;
  line-height: 70px;
}
 
.dropbtn {
  border: none;
  cursor: pointer;
}
 
.dropdown {
  position: relative;
  display: inline-block;
}
 
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: -10px;
  background-color: #f9f9f9;
  box-shadow: 0em 0.5em 1em 0em rgba(0, 0, 0, 0.2);
}

[NoSmoking]

Bonjour,

J ai une div id="centre" en overflow:hidden qui contient une dropdown.

je ne vois pas trop l’intérêt !

[MoiStéphane]

c est le centre d une barre de navigation.
à gauche le logo
à droite le bouton pour ouvrir le menu
au centre les liens du menu qui disparaissent au fur et à mesure de la réduction de taille de l écran.
quand une rubrique disparait, le bouton menu apparait. pour que les liens ne s affichent plus dans la div centrale j ai besoin de la mettre en overfolw:hidden à moins que tu ne me conseilles une autre pratique.
ainsi je fais un test au moment du resize et si le lien n est plus visible à l ecran, j affiche le bouton

[NoSmoking]

Pour être honnête je ne suis pas sûr de tout bien saisir et je me pose la question de pourquoi ne pas utiliser les « media queries » ?

[MoiStéphane]

J utilise les media « media queries » mais je ne peux pas en faire un pour chaque intitulé du menu.
En procedant ainsi, quand on reduit progressivement la fenetre les intitulés disparaissent et la div ne s allonge pas en hauteur.

Mais tu as peut être raison, je ne m y prends peut être pas correctement. Je vais essayer de jouer avec les z-index autrement, en mettant ma barre de navigation avec un index < à celui de ma page ce qui ferait le le menu disparaitrait derrière sans pour autant être bloqué par le hidden overflow, je vais essayer....

[NoSmoking]

J'entrevois un peu mieux ce que tu cherches à faire même si je ne pense pas que cela une bonne solution à priori.

Si tu est curieux tu devrais peut-être regarder du côté de clip-path: polygon() allié à un white-space: nowrap pour éviter les retours à la ligne.

[MoiStéphane]

Merci pour tes conseils

J ai continué à chercher et la solution est là : https://stackoverflow.com/questions/...or-scrolled-ov

[NoSmoking]

... et la solution est là ...

en fait j'étais out par rapport à ce que tu voulais faire .

Ergonomiquement parlant je ne trouve pas cela très intuitif et que dire de l’accessibilité.

[MoiStéphane]

Je sais j ai la capacité de m expliquer comme une patate...
et pour l accessibilité, j avoue ne jamais y avoir pensé.. mais si tu as une autre solution à proposer, je suis preneur ;-)

[NoSmoking]

mais si tu as une autre solution à proposer, je suis preneur

Un menu classique, qui passe éventuellement sur deux lignes en cas de rétrécissement et/ou qui disparaît sur les écrans de faible largeur, via la « media queries » en laissant apparaître un bouton « type hamburger ».

Mais les solutions sont nombreuses et très largement disponibles, il y en a pour tout les goûts !