Astuces de Webmaster

Menu Horizontal Déroulant | jQuery

par Rom's le 10 nov 2007 (Développement Web)

Voici un menu déroulant horizontal fait avec jQuery. La source modifiée : http://webexpose.org/2006/12/28/jquery-pop-up-menu-tutorial/

L’exemple à visualiser est ici : Exemple Menu Déroulant Horizontal

L’exemple à télécharger est ici : Fichiers Compressés Exemple Menu Horizontal Déroulant

La documentation est ici : Documentation Visual jQuery 1.1.2 vous trouverez notamment des effets différents pour l’ouverture du menu, etc.

Attention si vous changez le mode d’effet (dans le fichier menu.js) vers les slideUp et slideDown, j’ai remarqué un bug tout de même sur Firefox : Lorsque vous sortez du menu par le haut et que vous y rentrez avant que l’effet ne soit terminé, il se met à clignoter.. Curieux. J’ai préféré le fadeIn et fadeOut à cause de cela.

:, ,

16 Commentaires pour cet article

  • papou
    mai 10th, 2008 on 12:10

    bonjour,
    merci pour ce menu accordéon qui marche très bien mais est-il possible que les sous menu se déroule vers le haut ??? et si oui comment ?

    merci d’avance

    papou

  • Jean-Sien
    juillet 14th, 2008 on 23:29

    Merci !

  • NeoXtra
    septembre 2nd, 2008 on 15:38

    Merci, c’est exactement ce que je recherchais à une exception près…

    En effet, lorsque j’insère ce menu en haut de mon site, et que je déroule un menu, le reste de mon site descend en même temps que le menu.

    Comment faut-il s’y prendre, il y a forcément une solution à ce problème.

    Merci pour toute l’aide que vous pourrez m’apporter.

  • Charly
    octobre 4th, 2008 on 13:50

    Neoxtra pour celà il suffit que tu mettes la partie à dérouler en position:absolute;

  • Azza
    février 12th, 2009 on 19:24

    Bonjour, c’est tout a fait ce que je cherchais, seulement j’ai un petit ennui. Comme NeoXtra, mon menu fait descendre le bas de mon site quand il se déroule. J’ai cherché ce que dit Charly, mais je ne vois pas où mettre en position:absolute;
    Je suis debutante en jquery… :p

    De plus, mon menu est collé à gauche de ma page, et non centré sur le reste du site, comme je le voudrais…

    Merci d’avance pour votre aide.

  • Rom's
    février 12th, 2009 on 22:16

    Bonjour,

    est-ce que vous avez un exemple visible qu’on voit ce qu’on peut faire ?

  • Rom's
    février 13th, 2009 on 21:43

    Merci Azza mais je suis l’auteur en fait et je te demandais si je pouvais visualiser TON problème pour en voir l’origine.. :)

  • Azza
    février 20th, 2009 on 11:15

    @Rom’s
    oh pardon! XD
    Non mais c’est bon j’ai réglé le problème grâce à un de mes collègues de bureau qui est devellopeur jquery ^^

  • Cloud27
    février 26th, 2009 on 11:55

    Bonjour tout le monde.

    Je suis débutant dans le monde de l’ajax et encore plus dans jQuery et j’ai un petit soucie dans les animation avec slideUp et slideDown.

    Le soucie est dans IE7 lorsque je ferme (slideUp) une div à la fin de mon animation j’ai un effet de clignotement, en faite la div se ré-ouvre et se re-ferme en 1 seconde.

    Est ce que ça vous est déjà arrivé???

    Merci.

    Bonne journée.

  • Benjamin
    mars 25th, 2009 on 15:49

    Salut,

    Merci pour ce petit code précieux.
    J’ai un problème, sur FF ok le menu apparait, sur IE… rien du tout ! Pourtant dans le code html de la page le menu y figure, mais à l’affichage rien.

    Autre problème : lorsque les sous éléments apparaissent, le contenu du site est décallé. J’ai tenté de mettre position:absolute; à .Menu mais les sous élements aparaissent les uns a coté des autres (et plus l’un sous l’autre).

    Merci pour votre aide.

  • Tarti
    mai 12th, 2009 on 19:20

    Bon alors je voudrai revenir au bug de neoxtra et bien confirmer qu’il faut mettre “position:absolute;”

    Dans style.css:

    #Nav {
    position:absolute;
    padding: 0;
    list-style: none;
    }

    Je l’ai fait et sa marche nikel ;)

  • boulet
    mai 19th, 2009 on 1:41

    Bonjour et merci pour ce tuto. J utilise egalement jquery ui pour mon site, mais malheuresement les versions ne sont pas compatibles. soit le menu apparait, et dans ce cas, mes tabs jquery ui n apairaissent pas, soit le contraire. quelqu un aurait une idee ? par avance merci

  • boulet
    mai 19th, 2009 on 9:50

    je vais esssayer d etre plus precis car en relisant moi meme mon message, j ai eu du mal a comprendre ! :-)

    Lorsque j utilise la derniere version de jquery, le menu s affiche bien, mais ne se referme plus ! Le menu reste, et la selection d un menu d une autre liste entraine l ouverture de cette deuxieme liste, tout en laissant la premiere ouverte. Et si je passe a une version plus ancienne, toutes les fonctions de jquery ui ne sont pas exploitables.

    Quelqu un saurait comment modifier le code jquery du menu pour rendre compatible avec la derniere version de jquery et jquery UI ? merci par avance et bonne journee

  • patricklbs
    mai 21st, 2009 on 11:10

    Il aurait été sympa de donner des explications sur le code comme sur le site d’origine ? Merci quand même.

  • Camyo
    décembre 14th, 2009 on 11:58

    Bonjour,
    J’utilise aussi une version plus ressente de la bibliothèque jquery, du coup, quand le menu est déplié, in ne se repli plus …

    Étant assez nul en javascript, si quelqu’un a une solution,
    Merci d’avance

Laisser un commentaire

Vous cherchiez ?

Recherche rapide :

Vous ne trouvez toujours pas ? Laissez un petit commentaire sur un article, qu'on puisse regarder ça de plus près !

Quelques amis !

A visiter...

Archives

Tous les articles, chronologiquement...