IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Comment faire pour que mon menu s'empile dans un dropdown menu quand mon navigateur diminue


Sujet :

jQuery

  1. #1
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut Comment faire pour que mon menu s'empile dans un dropdown menu quand mon navigateur diminue
    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!!

  2. #2
    Invité
    Invité(e)
    Par défaut
    Bonjour,


    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.
    Dernière modification par Invité ; 26/04/2019 à 09h41.

  3. #3
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    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).

  4. #4
    Invité
    Invité(e)
    Par défaut
    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-
    Citation Envoyé par pierrot10 Voir le message
    ...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.

  5. #5
    Invité
    Invité(e)
    Par défaut
    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.

  6. #6
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    Merci beaucoup jeraux, t'es top.
    Je vais regardé ceci un peu plus tard, car je suis sur deux job

  7. #7
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    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.

  8. #8
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    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!

  9. #9
    Invité
    Invité(e)
    Par défaut
    Au fait, moi c'est jreaux62 (pour J. Réaux du 62 )
    Pas jeraux...

    Citation Envoyé par pierrot10 Voir le message
    ...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."
    Dernière modification par Invité ; 26/04/2019 à 14h45.

  10. #10
    Membre expérimenté
    Profil pro
    Inscrit en
    Mai 2005
    Messages
    3 166
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Mai 2005
    Messages : 3 166
    Par défaut
    Merci jreaux62 pour ton point vue et ton aide.
    Bonjour au Pas-de-Calais!!

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. comment faire pour que mon parseur XML n'échappe pas les carctères tels que ">" par exemple ?
    Par _LittleFlea_ dans le forum Format d'échange (XML, JSON...)
    Réponses: 4
    Dernier message: 16/10/2009, 16h25
  2. Comment faire pour que mon formulaire soir exécuté quand je tape Entrée
    Par pierrot10 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 11
    Dernier message: 17/06/2009, 23h04
  3. Réponses: 2
    Dernier message: 22/04/2009, 20h47
  4. Comment faire pour que mon image devienne un lien
    Par pierrot10 dans le forum Général JavaScript
    Réponses: 38
    Dernier message: 25/06/2007, 20h49
  5. Réponses: 3
    Dernier message: 24/04/2007, 19h45

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo