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/

= MISE A JOUR DU SCRIPT EFFECTUEE EN MAI 2010, bugs rapportés corrigés =

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.

:, ,


» Flux RSS du blog

40 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.

  • Willzao
    octobre 28th, 2009 on 15:37

    Merci !!! ça va me servir !! c’est super de ta part

  • 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

  • Mr_SATAN
    janvier 27th, 2010 on 19:34

    Salut !

    Merci pour ce tuto ! Dans l’absolu ce menu me conviendrait parfaitement. Par contre j’ai repéré des bugs gênants que je n’arrive pas à corriger :

    — Lorsque les sous-menus se déroulent par dessus une animation Flash ils sont affiché au second plan par rapport à celui-ci. J’ai tenté de jouer sur les niveaux avec z-index mais rien à faire :/

    — Sur IE7, les sous menus sont plus larges que les menus alors que le css n’est pas censé leur attribuer une taille différente.

    Bizarre tout ça :) Quelqu’un aurait-il trouvé une astuce ?
    PS : j’utilise une version récente de jquery et désolé mais ma page de test n’est pas en ligne.

  • Mr_SATAN
    janvier 27th, 2010 on 20:05

    C’est encore moi ! J’ai trouvé la réponse à ma propre question ci-dessus :

    — Sur IE7, les sous menus sont plus larges que les menus alors que le css n’est pas censé leur attribuer une taille différente.

    Le changement de taille vient tout simplement du décalage de la liste. Attribuer le style suivant à la balise :
    margin-left:0;

  • Mr_SATAN
    janvier 27th, 2010 on 20:10

    Et bien décidément ! J’ai également trouvé la solution au problème de plans rencontré avec les animations Flash :

    — Lorsque les sous-menus se déroulent par dessus une animation Flash ils sont affiché au second plan par rapport à celui-ci. J’ai tenté de jouer sur les niveaux avec z-index mais rien à faire :/

    Il suffit d’attribuer l’option wmode=transparent à l’anim en question :)

    En espérant que mes recherches vous servent !

    NOTE AU MODÉRATEUR : désolé pour le triple post, c’est toujours comme ça, tu flanches des heures et quand tu te décides à poser la question tu trouves la réponses… Libre à toi de les publier ou pas :)

  • Rom's
    mai 14th, 2010 on 12:49

    Menu mis à jour ce jour en tenant compte des remarques et problèmes rencontrés.

  • Caroline
    juin 2nd, 2010 on 15:59

    Bonjour
    Comment fait-on pour épaissir la ligne de menu grise et décaler les sous menus vers le bas ?
    Je cherche par tous les moyens mais je ne sais pas sur quel paramètre agir…
    Merci beaucoup

  • Caroline
    juin 2nd, 2010 on 16:30

    Nan désolé en fait, j’ai trouvé, il suffisait d’agir sur le paramètre line-height
    ^^
    merci quand même

  • marcel
    novembre 15th, 2010 on 21:20

    Bonsoir,

    petite question histoire d’enrichir le menu…

    comment feriez vous pour garder les rubriques avec un style lorsque que vous survolez les sous-rubriques.

    par exemple : au survole des rubriques « Test 1″ et Test 2, elles prennent un style, mais le conserve lorsque que l’on sort de celles ci en descendant (vers les « sous éléments »).

    j’espère avoir été clair

    merci d’avance pour vos lumières…

    mise à part cet ajout, votre menu est parfait !

    :-)

  • Rom's
    novembre 16th, 2010 on 8:23

    Bonjour,

    onmouseover permet de définir un état au moment du survol
    avec JQuery (et même sans), il est possible de définir un style.
    Quelques lectures :
    http://api.jquery.com/category/css/
    http://api.jquery.com/css/

    Bonne continuation et merci pour le compliment !

  • filnug
    janvier 17th, 2011 on 13:24

    hello romain,

    J’ai un souci avec le menu déroulant.
    Lorsque je charge la page, le sous-menu est déroulé alors que j’aimerais qu’il n’apparaissent que lors du clic.

    sais-tu d’où pourrait provenir le problème?

    merci

  • filnug
    janvier 17th, 2011 on 13:39

    bon… je crois comme souvent je vais m’auto répondre vu qu’il ne s’agissait que d’un problème css.

    en gros, le 2ème ul, soit ul.menu doit avoir un display:none par défaut. Puis en hover (ul.menu:hover), un display:block…

    ça m’apprendra à brûler les étapes. désolé pour le dérangement

  • Rom's
    janvier 17th, 2011 on 13:42

    Quel navigateur filnug ? JS désactivé ou pas ? c’est curieux du fait du display:none; sur le .Menu …

  • littledarling
    mars 17th, 2011 on 12:58

    Bonjour,
    Au risque de paraître stupide, je n’arrive pas à modifier la couleur de la barre grise du menu (Test1; Test2). Lorsque je met et modifie background-color, ça ne fonctionne pas. Je me demande donc sur quel paramètre il faut agir. En effet, cela fonctionne pour les sous-menus.
    Merci pour ce tutoriel, simple d’utilisation (malgré mon problème).

  • Rom's
    mars 17th, 2011 on 15:19

    as-tu forcé le rechargement de ta feuille de style (ctrl+F5) et contrôlé le résultat avec firebug ?

  • littledarling
    mars 17th, 2011 on 16:38

    Merci beaucoup pour cette réponse très rapide. Je ne connaissais pas Firebug et grâce à ça, mon problème est résolu.
    Merci :)

  • Dobermann
    mai 27th, 2011 on 1:46

    Bonjour,

    merci pour ce menu,

    une question idiote je voulais savoir si il était possible de centrer le menu global sur une page si oui comment.
    Car j’ai essayer de plusieurs façon et je n’ai pas réussi.

  • Rom's
    juin 17th, 2011 on 10:54

    essaie la propriété CSS suivante :
    margin: 0 auto;

  • fs
    septembre 28th, 2011 on 11:56

    Bonjour Rom’s
    j’ai un souci avec un menu jquery horizontal, identique à ton exemple. Tout fonctionne parfaitement sauf évidemment sous IE ! Il n’affiche pas les sous-menus. Lorsque je copie-colle ton exemple dans IE pour voir si ça ne viendrait pas de mes fichiers je m’aperçois que c’est le cas aussi. Saurais-tu m’aider à débugger l’affaire ? D’avance merci.
    F

  • Rom's
    septembre 28th, 2011 on 15:03

    Bonjour fs, quelle version d’IE ?

    le top serait une URL que je pourrais voir.

    Sinon il faut vérifier :

    1. Le chemin des fichiers que tu appelles (essaie de mettre tous tes appels de fichier en absolu http://www.monsite/chemin/vers/fichier.js)

    2. Si tu as une version de JQuery pas trop ancienne (ou pas trop récente, essaie avec la version que je propose en téléchargement car si ça se trouve, mon code n’est plus compatible, mais c’est tellement simple que ça m’étonnerait)

    Tu as fait autre chose avec JQuery ?

  • Cedric
    septembre 29th, 2011 on 14:39

    Idem, je ne comprends pas le menu déroulant fonctionne sous Firefox, IE8 sans problème, mais sous IE9 les sous menus ne s’affichent pas. Le pire c’est que ta page d’exemple marche sous IE9 mais moi ma page html il refuse de faire apparaitre les sous menus !
    dans mon head je mets pourtant :

    et je copie colle ton code.
    Est ce que le fait que la div en question soit inclut dans d’autres div peut avoir un tel effet ?

    merci d’avance pour ta réponse

  • Rom's
    septembre 29th, 2011 on 14:42

    il me faut vraiment un exemple en ligne pour que je puisse t’aider..

  • Cedric
    septembre 29th, 2011 on 14:45

    Autant pour moi, ca ne fonctionnait pas en local….
    Merci pour ton script simple et efficace !

  • pitouche
    octobre 14th, 2011 on 3:24

    Hello,

    Tout d’abord, merci pour ce script simple et efficace.
    Seul soucis. Je suis sur Chrome et le menu s’affiche en dessous de mon animation flash malgré que j’ai mis la propriété de publication (du .fl) sur « transparent ».

  • Rom's
    octobre 14th, 2011 on 12:31

    Hello,
    toujours idem, il me faudrait une adresse (même temporaire) où voir ce script. Sans ça je ne peux pas faire grand chose.

Laisser un commentaire


6 + one =

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...