Discussion :

[pierrot10]

Bonjour à tous,

Il y a un peu plus d'une année j'avais fais ceci
http://www.le-lacustre.ch/ (Ce site va etre fermé)
Si vous dimimuer le navigateur vous allez voir que les item du menu s'empile dans un dropdown menu.

J'avais utilisé une librairie dont je ne retrouve plus trace.
Les fichier que j'inclus sont

Code HTML :

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

1
2
3
 
<script src="js/tutorial.js"></script>
<link href="/manager/templates/lacustre/css/tutorial.css" rel="stylesheet">

Le problème est que je n'arrive pas à l'implémenter dans mon nouveau site sauf si j'utilise bootstrap 3.3.5.
Dans ce nouveau site http://www.shiatsu-energie-geneve.ch/new/ j'utilise bootstrap 4.0.5 et jquery3.3.1.
En plus même avec la derniere version de jquery, ca bug.

L'autre truc, il faut que le menu du nouveau site, soit comme il l'est actuellement, soit qu'il prenne toute l'espace de la largeur. Ce qui n'est pas le cas de l'ancien site.

Etant donné que j'ai déja passé un temps de fou a essayer de faire marché tutorial.js sur mon nouveau site, j'ai décidé de laisser tombé cette librairie et je me retourne vers vous, pour savoir si vous connaitriez une solution qui fonctionne avec les dernières versions de Bootstrap et Jquery?

Il faudrait que des que le navigateur à une largeur de 361+ 221px (il y a des chiffres qui s'affichent quand on change la largeur du navigateur), les éléments du menu commence a s'empiler dans un dropdown menu, à droite

Y-a-til une solution existante?
Ou pourriez-vous me pister pour accomplir ceci?

Milles merci!!

[Invité]

Bonjour,

• Bootstrap 4 - Navbar
• Bootstrap 4 - Exemples

1- Il faut respecter la syntaxe spécifique Bootstrap 4, et l'imbrication des menus/sous-menus.
(mais à priori, tu n'as pas de sous-menus : ça simplifie)

Au cas où tu ajouterais des sous-menus :
Tu peux aussi lire cette discussion récente.

2- Quant à l'alignement, on en a parlé dans ton autre discussion.

[pierrot10]

Bonjour Jeraux,

Merci pour ta réponse.
Alors j'avoue avoir très mal commencé ce site!!
Je viens de reviser le code du menu en fonction de
https://getbootstrap.com/docs/4.2/components/navbar/
et c'est chose faite.
http://www.shiatsu-energie-geneve.ch/new/#
(je dois encore regardé à ce que le premier et dernier élément du menu collent sur les bors respectifs. Mais je verrai ceci avec ma graphiste. Peut etre qu'elle accepetera ceci.

Par contre, pour le sujet de cette discussion, je n'arrive toujours pas à faire que les les éléments s'empilent dans le boutton (navbar-toggler) l'un après l'autre au fure et à mesure que le browser diminiue. (Je pense que c'est plus une solution Jquery que CSS, raison pour laquelle je suis venu sur ce forum).

[Invité]

1- Ceci devrait convenir :

Code css :

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

1
2
3
4
5
6
7
@media screen and (min-width:992px) {
  /* étalement des menus */
  .navbar-collapse ul.navbar-nav {
    justify-content:space-between;
    width:100%;
  }
}

2-

...que les éléments s'empilent dans le boutton (navbar-toggler) l'un après l'autre au fure et à mesure que le browser diminiue....

Ca, ce n'est pas prévu dans Bootstrap !
Le "burger" apparait sous les 992px, avec TOUS les menus dedans.

Conseil: ÉVITE de (trop) perturber les habitudes des internautes.

[Invité]

Je viens de trouver dans la doc Bootstrap 4 : Justify content

Au lieu code code CSS que j'ai donné, il suffit d'ajouter au <div> entourant le menu <ul> (à tester *) :

Code html :

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

<div class="d-flex justify-content-md-between">

A voir si il te faut justify-content-between, ou justify-content-md-between, ou...

[EDIT] J'ai testé ici, mais ça n'a pas fonctionné...
Alors qu'avec mon code, oui.

[pierrot10]

Merci beaucoup jeraux, t'es top.
Je vais regardé ceci un peu plus tard, car je suis sur deux job

[pierrot10]

Merci jeraux,

J'ai eu 5mn pour essayer tes propositions mais malheureusement sans succès

ÉVITE de (trop) perturber les habitudes des internautes.

Oui oui, je partage aussi cet avis.

Le truc c'est que ma graphiste a certain souhait et je trouve aussi que cette manière a ce que les éléments du menu se "rangent" dans le burger menu est sympa
http://www.le-lacustre.ch/
C'est moi qui est fais ce site, mais comme je l'ai dit la livriaire js que j'avais utilisé be fonctionne plus avec les dernieres versions de Bootstrap et Jquery, du moins, j'ai malheureusement pas réussi à l'implémenter (meme si c'est moi qui st fait ce site (haïe)). Je ne retrouve plus aussi cette librairie (aïe) .

Bref, qui a repartir sur une nouvealle solution Jquery, me convient mieux.

[pierrot10]

J'ai pas le temps de tester ceci maintenant, pour ceux a qui ça intéresse, ici il y a des idées
https://kyusuf.com/post/completely-css-progressively-collapsing-navigation/
https://css-tricks.com/the-priority-navigation-pattern/

Si il y a d'autres solutions testées, passez l'info!

[Invité]

Au fait, moi c'est jreaux62 (pour J. Réaux du 62 )
Pas jeraux...

...cette manière a ce que les éléments du menu se "rangent" dans le burger menu est sympa...

NON, c'est nul.

En effet, sur ma tablette qui fait 1024 x 768px, la rubrique "Contact" est masquée (dans le burger).
Si je la tourne (largeur 768px), alors ce sont les rubriques "La paillotte du lac", "Galerie" et "Contact" qui sont masquées.

Il ne me viendrait JAMAIS A L'IDEE * de cliquer sur le burger !! alors que les autres rubriques sont, elles, AFFICHÉES et BIEN VISIBLES.
(* comme BEAUCOUP de personnes !!)
Ces rubriques sont alors "perdues", "invisibles"...


NE JAMAIS OUBLIER :

"Loin des yeux,... loin du clic."

[pierrot10]

Merci jreaux62 pour ton point vue et ton aide.
Bonjour au Pas-de-Calais!!