Menu déroulant vertical

EDIT : dernier en date : le menu déroulant au clic.

Pour un menu vertical, la technique la plus simple à utiliser est celle du left: -999em.

Nous reprenons donc le même code html :

Code HTML


<ul id="menu-vertical">
	<li><a href="#">Lien menu 1</a>
		<ul>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
			<li><a href="#">lien sous menu 1</a></li>
		</ul>
	</li><!--
 --><li><a href="#">Lien menu 2</a>
		<ul>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
			<li><a href="#">Lien sous menu 2</a></li>
		</ul>
	</li>
</ul>

Le code CSS quant à lui est pratiquement le même. La petite différence se situe au niveau de la position des sous menus au survol.

première chose importante, et contrairement à un menu horizontal, il est nécessaire de mettre une largeur au menu (width). Cela permet de positionner correctement les sous menus.

Commençons avec le code qui ne change pas :

Code CSS


#menu-vertical, #menu-vertical ul {
  padding:0;
  margin:0;
  list-style:none;
  width: 180px; /* seule ligne rajoutée */
}

Ensuite dans un menu horizontal on utilise display: inline-block pour aligner les liens. Ici nul besoin puisque ce n’est pas ce qu’on souhaite. Donc laissons les li tranquille, ils se positionneront par défaut les uns en dessous des autres.
On mets simplement les li en position: relative pour que les menus se positionnent par rapports à eux :


#menu-vertical li {
  position: relative;
  background:#EFEFEF; /* juste pour cacher le texte de la page en-dessous */
}

On continue avec le code habituel sur les <a> :

Code CSS


#menu-vertical a {
  display:block;
  text-decoration: none;
  color: #000;
}

Ensuite le code pour cacher les sous menus :

Code CSS


#menu-vertical ul {
  position: absolute;
  left:-999em;
}

Et enfin nous arrivons à la toute petite partie qui est différente d’un menu horizontal :

Code CSS


#menu-vertical li:hover ul {
  top: 0;
  left: 180px;
}

Voilà, le petit truc est là. D’abord un top: 0 qui permet au sous menu de se placer en haut du lien du menu, et un left: 180px égal à la largeur du menu qui permet de décaler les sous menus vers la droite.
Sans ce petit left: 180px les sous menus se placeraient comme pour un menu horizontal, c’est à dire en dessous du lien du menu et cacherait les autres…
Bien sûr vous pouvez modifier cette valeur comme bon vous semble du moment que vous l’a modifié aux deux endroits.

Voilà ce que ça donne, encore une fois c’est du brut de pomme :

Voici une variante avec max-height que j’ai appliqué aux <li> des sous menu. Cette fois-ci le menu est de style « accordéon » pas forcément très ergonomique… :

Code HTML


<ul id="menu-accordeon">
   <li><a href="#">Lien menu 1</a>
      <ul>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
         <li><a href="#">lien sous menu 1</a></li>
      </ul>
   </li>
    <li><a href="#">Lien menu 2</a>
      <ul>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
         <li><a href="#">Lien sous menu 2</a></li>
      </ul>
   </li>
   <li><a href="#">Lien menu 3</a>
      <ul>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
         <li><a href="#">Lien sous menu 3</a></li>
      </ul>
   </li>
</ul>

Code CSS


#menu-accordeon {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
  width: 180px;
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: center;
}
#menu-accordeon li {
   background-color:#729EBF; 
   background-image:-webkit-linear-gradient(top, #729EBF 0%, #333A40 100%);
   background-image: linear-gradient(to bottom, #729EBF 0%, #333A40 100%);
   border-radius: 6px;
   margin-bottom:2px;
   box-shadow: 3px 3px 3px #999;
   border:solid 1px #333A40
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #444;
   box-shadow: none;
   border:none;
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #fff;
  padding: 8px 0;
  font-family: verdana;
  font-size:1.2em
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:1em
}
#menu-accordeon li:hover {
   background: #729EBF
}
#menu-accordeon li li:hover {
   background: #999;
}
#menu-accordeon ul li:last-child {
   border-radius: 0 0 6px 6px;
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}

146 commentaires sur “Menu déroulant vertical”

  5. Bonjour,
    Je tenais à vous remercier pour le partage de ces menus.
    Je suis en train de les paramétrer afin de les installer sur mon site.
    Je trouve ces menus vraiment super, jolis et très légers.
    Merci encore.
    Je vous souhaite de bonnes fêtes de fin d’année…

    PS
    Est-il possible de faire dérouler automatiquement tous les sous-menus au survol de la souris, afin que les visiteurs voient toutes les différentes sous rubriques d’un coup d’œil ?

    • Salut David,
      merci de ton message encourageant ^^
      Pour répondre à ta question, oui, tu peux faire ouvrir tous les sous menus d’un coup.
      Il suffit de mettre le :hover sur l’ul de menu.
      Donc au lieu de :
      #menu-deroulant li:hover ul {
      left: auto;
      }
      tu mets :
      #menu-deroulant:hover ul {
      left: auto;
      }
      ça devrait fonctionner.
      Recontacte moi si ce n’est pas le cas. Au besoin contacte moi sur openclassrooms (pseudo : ronamazona).
      Bonnes fêtes à toi aussi et à tout les visiteurs de FrogWeb.

  7. Bonjour
    pour le premier exemple de menu
    au menu : #menu_vertical ul
    j’ai ajouté un border-radius: 0 10px 10px 0;
    mais au survol, l’ombrage prend tout le bloc alors que j’aimerai qu’il prenne en compte les arrondis
    savez vous comment faire ?

  8. Salut, j’aimerais savoir comment changer la couleur des  »liens sous menu 1 » si possible et aussi s’il est possible de laisser le  »lien menu 1 » verticalement et que lorsque je met ma souris les  »liens sous menu 1 » reste vertical mais a coller a droite des  »lien menu 1 » comme ton exemple ci haut que tu qualifie de brut de pomme 🙂

    Merci infiniment!!

  10. Bonjour,

    Déjà merci pour ce tuto, il est top. Les deux menus marchent parfaitement (sur Chrome en tout cas.) Par contre, j’avoue ne pas avoir compris comment déterminer le sens de défilement du menu accordéon : j’aimerai faire en sorte qu’au survol sur l’onglet « menu », l’ouverture se fasse du bas vers le haut et non du haut vers le bas. Est-ce possible ?

    Merci d’avance,
    Marion.

    • Salut Marion,
      merci pour ton appréciation ^^

      Si je comprends bien ce que tu cherche c’est quand tu survole le dernier lien du menu, par exemple, au lieu que celui-ci descende, ce sont les autres liens du menu qui remontent ?
      Ce n’est pas simple à faire mais je peux étudier ça ^^
      J’avais fait un menu pour quelqu’un qui me l’avait demander ici, ce n’est pas exactement la même chose mais le principe est là.
      L’idée c’est de faire remonter le menu mais c’est justement ce qui est embêtant car il faut que tout les hauteurs soient fixes.
      menu-deroulant-haut
      je vais voir ce que je peux faire…

        • En fait c’est surtout cette phrase que je comprends mal : « Il faut définir des height fixes aux sous menus pour pouvoir définir à la même valeur le top négatif. » Est-ce que ça veut dire que pour chaque rubrique du menu il faut lui donner une height en particulier pour après définir la même valeur en négatif pour top ?

          Ca donnerait :
          #menu-accordeon li li {
          height: 10px;
          top: -10px;
          z-index: 0;
          overflow: hidden;
          transition: all .5s;
          border-radius:0;
          background: #444;
          box-shadow: none;
          border:none;
          margin:0;
          }

          • marion,
            c’est sur l’ul des sous menus qu’il faut appliquer le height et le top au :hover des liens du menu :
            #menu-accordeon li:hover ul{
            height:120px;
            top:-120px;
            }

  11. Bonjour et merci pour ce tuto fort sympathique qui m’a permis de faire déjà de jolis effets pour la base du menu de mon futur site internet… En revanche je ne parviens pas à faire en sorte qu’un sous menu de sous menu apparaît lorsque la souris glisse sur un lien du sous menu… La je galère… Merci pour ton aide

    • Salut jérôme,
      pour rajouter un sous-sous menu il y a pas pas mal de modifications à faire, tant au niveau html que CSS.
      Comme ici ça ne sera pas facile d’échan,ger du code, je te propose de me contacter sur openclassrooms (tu as les infos sur la page d’accueil).
      On verra ensuite comment on s’organise (code en direct sur OCR, lien vers ton site, etc)

  12. Bonjour, j’ai essayer de modifier le menu accordéon de manière à ce que les menus soient alignés verticalement :
    Menu1 Menu2 Menu3
    au lieu de
    Menu1
    Menu2
    Menu3
    Mais impossible d’y arriver. Si quelqu’un à une idée, je suis preneur.

  15. Tout d’abord un grand merci pour le script et le tuto.
    Je suis après l’adapter pour relooker le site d’une amie.
    Par contre je bugg sur un truc tout bête j’en suis certaine… Comment fais t’on pour que le « bouton » menu et sous menu soit plus étroit dans la hauteur ?
    Je voudrais en fait que mon menu tienne moins de place en hauteur…

    • Bonjour Ann,

      la hauteur est définie par le padding sur les balises a.
      Tu as juste à le modifier dans ce code, c’est le 8px :
      #menu-demo2 a{
      text-decoration:none;
      display:block;
      padding:8px 32px;
      color:#fff;
      font-family:arial;
      }
      #menu-demo2 ul a{
      padding:8px 0;
      }

      Tu peux également encore diminuer la hauteur en mettant un font-size: 11px ou 0.7em par exemple dans le même code.

      Merci pour ton merci ^^

    • Salut,
      en CSS pure ça va pas mal compliquer les choses et je ne suis pas certain d’ailleurs que ce soit possible.
      Il faut regarder du côté javascript pour ça.
      En effet, qu’il soit ouvert à l’accueil de la page ne pose pas de problème en CSS, mais il faut qu’il se referme quand on survole les autres.
      Et ça on ne peut pas (il faudrait remonter dans le flux).

  19. Bonsoir,
    Je suis actuellement entrain de travailler sur un site et j’ai un menu qui s’adapte en fonction de la largeur de l’écran.
    Donc les onglets seront de plus en plus long si la fenêtre est de plus en plus longue.

    Mon problème viens du fait que je souhaiterais faire des sous-onglets qui possèdent la même largeur que son onglet. Je ne vois pas trop quoi faire étant donné que width se base sur la largeur de la fenêtre du navigateur et non pas de son « conteneur le plus proche »

    En espérant que tu puisse me mettre sur la bonne voix,
    Cordialement,

    • Salut,
      je vois bien toutes les modifications qu’il faut faire pour arriver au résultat que tu souhaites.
      Comme il y en a pas mal, le mieux c’est que tu me contactes sur openclassrooms (pseudo : ronamazona).
      ça sera plus facile pour que je t’explique et échanger du code.
      Quelque chose que tu pourrais déjà rectifier parce que ça va te poser des problèmes, tu as deux fois le même code pour ul.navGlobal à deux endroits différents, dans ton code html et dans ta CSS.
      Tu ferais bien de supprimer le code CSS dans le html.
      Autre chose, ton doctype n’est pas valide. il faut mettre DOCTYPE html et pas DOCTYPE tout seul.

  20. Merci beaucoup pour ce tuto, j’utilise la première méthode mais j’ai des soucis : il me manque juste quelque chose : j’aimerai qu’il soit responsive et qu’il prenne toute la hauteur de l’écran à gauche. Dès que je mets des %, le menu ne marche plus (les sous menus s’affichent par dessus les autres menus). Une solution ? Merci.

  21. Bonjour,

    Je suis en formation de Miage Developpeuse Web. J’ai suivi les codes que j’ai fait sous lInux. J’ai la liste avec des menus et sous-menus, mais quand au déroulement et action du menu rien ne se passe. est-ce normal ?

    Merci.

    Karima

  23. Bonjour !
    Merci pour ce tuto !:)

    Je voudrais savoir/confirmer des choses :
    – le « liens sous menu 1 » -> c’est le nom de la sous-catégorie
    – le « # » -> c’est pour mettre le lien de la sous-catégorie ?
    – Comment on modifie la catégorie ?

    Bonne fin d’après-midi,
    lolita

  26. Une autre question concernant le menu accordéon:

    Le mien est dans une div float align left, c’est-à-dire à côté d’une autre div.
    Comment faire pour ne pas bousculer la div d’à côté? Peut-on forcer le menu accordéon à s’ouvrir par-dessus? ou bien peut-on forcer la div d’à côté à descendre?

    D’avance merci

    Sté (maintenant StéDV sur openclassrooms)

  28. Bonjour FrogWeb,

    Premièrement merci et bravo pour ton site. Je beaucoup cherché un menu vertical simple et efficace, le tiens est exactement ce que je cherchais.

    J’ai cependant un problème à ajouter un 2e sous menu. J’ai utilisé la même indentation en html pour rajouter le 2e menu et le même code css que celui que tu propose. Le 2e sous menu se cache comme il fait mais il s’affiche au survol de la souris comme le 1er sous menu. Je n’arrive pas à l’afficher seulement au survol du 1er sous menu. Je n’arrive pas à trouver la bonne combinaison en hover ex (#navig li:hover ul ) pour afficher le 2e sous menu au survol du 1er sous menu. Tout le reste fonctionne très bien.

    Merci pour ton aide.

  29. Merci pour ce super tuto. J’ai essayé de rajouter un troisième niveau de menu mais je n’arrive pas à le cacher et qu’il apparaissent lorsque je suis au deuxième niveau.
    J’ai rajouter une balise UL pour le troisième niveau et j’ai essayer dans le code CSS de rajouter :

    #menu-vertical ul ul {
    position: absolute;
    left:-999em;
    }

    Mais cela ne suffit visiblement pas. Merci de votre aide.

  30. Bonjour,
    merci beaucoup pour l’aide avec ce code.
    En ce qui concerne mon menu les boutons ne sont pas de même taille, et de ce fait parfois deux boutons se mettent sur une même ligne.. J’aimerai savoir ce qu’il faudrait que je rajoute dans mon CSS pour que les boutons soient de même taille ou restent bien l’un en dessous de l’autre mais en position centrée .. ?
    Merci d’avance pour votre aide.

    • Salut,
      il va falloir que tu me donnes le lien de ton site pour que je regarde.
      Pour l’instant je ne vois pas bien le problème. Ils ne sont pas de la même taille en largeur ou en hauteur ?
      Bien que je ne vois pas bien ce qui pourrait les mettre sur une même ligne.
      Si ton menu n’est pas en ligne ou si tu ne souhaites pas mettre le lien ici, je t’invite à me contacter sur http://openclassrooms.com. Pseudo : ronamazona.

    • Salut,
      merci pour ton message.
      Tu dois utiliser « position: fixed » sur #menu-demo2.
      Mais ça va casser la page ça ne va plus centrer ton menu et le contenu suivant va passer sous ton menu.
      Il faut donc rajouter left: 0 et right: 0 sur #menu-demo2 et mettre un margin-top sur le contenu suivant (une table il me semble).

  34. Bonjour Ronamazona, et merci pour ta réponse rapide.

    en suivant tes indications, tout marche trés bien comme je voulais,
    mais j’ai un dernier souci:

    Lorsque je veux ajouter plus de cinq sous-menu, ils n’apparaissent plus,
    il s’agit sans doute d’un réglage de hauteur mais je n’ai pas trouvé tout seul…

    MERCI BEAUCOUP POUR TON AIDE

  37. Superbe menu

    J’ai une question
    J’ai crée un menu pour mettre les livres que mes membres ont lu avec le lien vers les auteurs de ces livres
    Mais le deuxième sous menu commence a être long
    Serait-il possible de rajouter quelque chose dans le code pour avoir que 5 lignes dans le deuxième sous menu ainsi que dans le troisième sous menu
    Voila l’adresse d’une image du menu déployé

    http://i38.servimg.com/u/f38/11/94/15/08/menu10.jpg

  40. Bonjour,
    …et merci pour ces scripts ! J’ai essayé d’adapter l’accordéon à mon menu et ça marchait au poil… sauf sur IE (grrrr)
    Je me suis donc rabattu sur le menu vertical « simple » mais j’ai des problèmes de largeur .
    Mon menu est appelé par un include dans chaque page partagée comme ça :

    #contenu {
    height: 100%;
    margin-left: 20%;
    overflow: auto;
    color: #000000;
    }
    #menu {
    position: absolute;
    left:0;
    /*width: 371px;
    height: 594px;*/
    color: #000000;
    width: 20%;
    height: 100%;
    }
    Je ne dispose pas d’une grande largeur et je voudrais que le sous-menu s’ouvre en « mordant » un peu le menu… sans que les caractères se confondent ! En fait, un sous-menu dans une boîte à fond couleur (et cadre?) comme une pop-up ?
    Que faudrait-il modifier ? J’ai essayé pas mal de bckground sans succès…
    Merci à l’avance
    alain

    • Salut,

      il faut changer la couleur de background des li du sous menu.
      Pour que ça morde un peu il faut mettre un left négatif sur l’ul de sous menu.
      Si ça ne réponds pas à ton problème, contacte moi sur openclassroom en me mettant ton code html/css de tout le menu.

  41. Bonjour,
    Je suis en pleine prise de tête sur un menu déroulant vertical au clic (et responsive) en css uniquement pour mon site. Toutes mes recherches sur google finissent par retomber sur ce site (excellent au passage).
    J’ai essayé plusieurs ébauches, rien de concluant au final.

    J’ai donc essayé de m’inscrire sur openclassroom, mais depuis ce midi je n’obtiens que des erreur 500, puis on me dit que mon adresse est déjà utilisé, bref la loose^^

    Je me permets donc de te contacter ici. Serais-tu prêt à me filer un coup de main ? Si, oui, comment nous contacter ?

    Merci d’avance 🙂

  43. Allô! Ton site est vrm pratique merci bcp:) J’aimerais savoir pourquoi je ne suis pas capable d’acceder à mes sous-catégorie…. lorsque je clique sur un catégorie les choix de sous catégorie apparaisse et lorsque je déplace ma souris pour cliquer sur le lien, la sous catégorie disparait avant …
    Merci bcp encore

    • Salut,
      il peux y avoir plusieurs raisons.
      Par exemple un élément en absolute par dessus le sous menu, un espace entre le menu et le sous menu à cause d’une bordure ou un top trop grand.
      Inspecte ta page avec firebug pour voir si il n’y a pas quelque chose par dessus.
      Si ton site est en ligne donnes moi le lien que je regarde.
      Sinon mets ton code quelque part sur le web.

    • Salut,
      c’est une bonne question ^^
      T’expliquer pourquoi serait un peu long parce qu’il faudrait t’expliquer le comportement par défaut des éléments inline, block et inline-block (entre autres).
      Pour ça je t’invites à lire cet article :
      Article sur le site Alsacréations

      Mais en quelques mots voici l’explication de l’utilisation dans le menu.

      Pour le inline-block c’est tout simplement pour aligner les li sans perdre pour autant les avantages du block qui est leurs display par défaut (plus exactement un li a un display list-item en html5).

      Pour les a, les mettre en block est utile pour pouvoir leurs mettre des dimensions comme un width, un height et, dans le cas présent, un padding.

      Sans ce padding et ce display:block les a seraient afficher avec leur display par défaut, qui est inline, et seul le texte du a serait cliquable.

      Pour tester, enlève le display:block des a. Tu verras que les padding-top et bottom ne fonctionnent plus (seul padding-left et right fonctionneront).
      Ou encore Enlève le display:block et rajoutes un height et un width, et tu verras qu’il ne se passe rien.

  46. Bonjour et encore merci pour ton site qui est vraiment très complet et très enrichissant!
    J’utilise ton code de menu déroulant vertical et il fonctionne à merveille mais j’aimerais savoir quelle valeur modifier pour que le déroulement soit plus lent de manière a faciliter le clic sur le bon lien…

    Merci d’avance!

  49. Salut,

    J’utilise ton menu accordéon que je trouve très joli et qui va parfaitement avec la charte graphique de mon site ( c’est un site intranet pour mon boulot). Cependant, mes collègues m’ont fait remonter le peu d’ergonomie de ce système. C’est vrai que c’est joli mais pas super pratique.
    Comment peux-t-on faire pour que les sous menus s’ouvrent latéralement ( comme sur ton exemple « basique » ) mais en gardon le même effet et les même couleurs que le menu accordéon?
    J’ai essayé de faire un mix des deux codes mais le résultat était plutôt…pas top!
    Merci pour tes précieux conseils !

    • Salut,
      oui, je l’indique dans le texte, ce n’est pas très ergonomique…
      Si tu te débrouilles un peu tu dois pouvoir mixer les deux.
      Sinon je te ferait ça, parce que ils sont quand même bien différents.
      Sur le premier ça fonctionne avec les li, tandis que sur l’autre tout repose sur les ul.
      Contactes moi sur openclassrooms, c’est plus facile pour échanger du code.

    • Bonjour,
      c’est impossible à faire en html/css et également sur un site statique.
      Le fait de cliquer fait afficher une autre page et donc un rafraichissement du menu qui redeviendra à son état initial.
      Il existe certainement une solution en JS ou PHP, en vérifiant l’url de la page et en mettant le sous menu correspondant en « ouvert ».
      Mais ça dépasse mes compétences.
      Utiliser du PHP ou du JS pour le faire rentrerait en conflit avec le code html/css de base.
      Il vaudrait peut-être mieux que tu partes sur un menu entièrement JS pour ouvrir/fermer les sous menu.

    • J’ai réalisé ce principe pour un gros projet en cours de réalisation, j’ai effectivement utiliser PHP et jQuery…
      Pour te mettre sur la bonne voie, j’ai utilisé le système de sessions php, et j’ai donc mis en session tous les menus / sous-menus déroulés (avec des appels ajax), et au chargement de la page appelée, j’ajoute la classe « extended » à chaque menu / sous-menu en session pour l’étendre…

      En espérant t’avoir aidé,
      Dwaaren

  52. Bonjour

    Je voudrais savoir quelles sont vos conditions d’utilisation de votre menu horizontal déroulant.

    Je suis débutant et je me suis inspiré de votre code CSS pour mon site en l’adaptant; j’ai appris beaucoup grâce à vous et je vous en suis très reconnaissant; il fonctionne très bien sur tous les navigateurs même IE !!

    Avant de mettre ce menu déroulant sur les pages de mon site, je vous en demande l’autorisation et de me préciser si j’ai le droit de le faire.

    Merci.

    Cordialement.

    Bernard Loiseleur

    • Salut,
      aucune condition, aucune restriction, tu peux utiliser les codes du site, que ce soit menu ou autre, autant de fois que tu veux et sur n’importe quel site, qu’il soit personnel ou commercial.
      C’est gratuit ^^
      Merci de ton message.

  53. Salut et merci pour ce tuto !! 🙂

    Je débute en css et je galère pas mal notamment avec les menu déroulant. En fait mon but serait d’avoir les sous-menus qui s’affichent verticalement comme dans ton exemple, et d’ajouter des sous-sous-menus qui verticalement mais de façon décalée.
    Si y a un tuto quelque part pour ça, désolé de t’avoir embêté, j’irai voir de suite 🙂

    • Salut,
      dans un tableau ? quelle drôle d’idée ^^
      Apparemment tu cherche à mettre du code dans ton commentaire mais tu n’y arrive pas.
      Contactes moi sur openclassrooms et profites-en pour me mettre plus d’infos, liens vers ton site, ta page, du code.

    • Salut,
      un sous sous menus en html c’est assez simple, c’est une ul dans une ul dans une ul.
      Côté CSS ça va se compliquer un peu plus.
      Déjà le faire en accordéon ne sera pas la bonne idée.
      Le mieux serait de le faire avec le sous menu qui s’ouvre en vertical et le sous sous menu qui s’ouvre sur la droite du sous menu.
      Si j’ai un peu de temps demain je ferait un petit truc vite fait que je mettrait en lien sur la page du menu déroulant vertical.
      A moins que je retrouve ça dans mes codes ^^

      PS : merci de ton commentaire ^^

  59. Bonjour, tes menus (le vertical et l’horizontal) sont splendides ! Malheureusement, je souhaiterais les utiliser dans une page appelée depuis un . Et Bizarrement, la version menu horizontal fonctionne quand elle est intégrée à une page appelée depuis une autre page via un iframe, alors que pour le menu vertical cela ne fonctionne pas ( le menu s’affiche parfaitement avec ses attributs css, mais lors du hover, les sous menus n’apparaissent pas). Et manque de bol, c’est le menu vertical que j’aimerais utiliser…

    A tout hasard, aurais tu une idée ? Je peux bien sur envoyer le code si le pbe t’intéresse, sinon envoyer une solution si j’en trouve une, mais c’est pas fait….

    Cordialement.

  61. Salut,

    j’ai laissé une question tout à l’heure, elle n’a pas l’air d’être dans le forum, pas grave.
    En résumé, je trouvais tes menus H et V formidables et je cherchais à comprendre pourquoi seul l’Horizontal fonctionnait si intégré à une page appelée via un IFRAME.
    J’ai résolu mon problème = il suffit de supprimer le @media du test @media et largeur1024
    et ça fonctionne parfaitement (sous mozilla et IE) . Trop cool, merci !!

  62. Salut !

    Déjà, merci pour ces tutos de qualité 😉

    Ensuite j’aurais une petite question:
    – Comment faire pour que, de ton menu accordéon, les sous titres apparaissent sur la droite de la fenêtre ?
    En fait, il s’agit de faire un menu déroulant horizontal à partir de ton menu accordéon (c’est car je manque de place sur l’écran, trop de menu à traiter…)

    C’est à traiter dans le CSS mais comment ?

  63. Bonjour Frogweb,
    J’ai trouvé ton menu très séduisant
    Je l’ai transformé en menu horizontal avec déroulement vertical
    Cependant, je suis limité en html et CSS
    Je m’y suis mis à 60 ans et j’en ai 69 !

    Comment faire pour que le menu se déroule en superposition sur ma page et non en venant décaler ma page

    Bien cordialement
    Polux78

    • Salut,

      j’ai supprimé le code que tu as mis pour plus de clarté.
      Si ton sous menu décale tout c’est parce qu’il faut le mettre en position:absolute.
      En prenant bien soin de mettre les li parents en position:relative.

      Si ça pose d’autres problèmes et comme mettre du code ici n’est pas l’idéal, le mieux c’est que tu m’envoies ton code dans un fichier zip.
      Je te contacte directement par mel.

  64. Bonjour Frogweb,
    Merci pour votre menu géniale!! Je n’ai pas l’argent pour prendre les service d’un webmaster alors j’ai décidé de créer mon site web tout seul….donc je suis pas un pro!!
    J’aurai voulu savoir comment mettre un lien vers une autre page dans « lien sous menu »?
    Merci!!

    • Salut,
      ce que tu demandes est vraiment la base, d’ailleurs le mot html vient de là (hypertext markup language).
      Je vais y répondre mais je te conseille fortement de suivre un bon tuto, comme sur openclassrooms.
      Parce que sinon tu vas te poser 1000 questions ^^
      Pour faire un lien vers une autre page il faut mettre l’adresse de la page (l’url) entre les guillemets dans le href= » ».
      Après il existe deux sortes de liens, relatif et absolu. Mais ça tu verras plus tard…
      Bon courage à toi en tous cas.

  67. Bonjour,
    J’ai installé le menu accordéon sur mon site (en test pour l’instant), j’ai un soucis sur le fait que lorsque le dernier bouton/menu se déroule il est caché partiellement par des icônes cliquables qui sont juste sous le menu.
    Est-il possible de faire que lorsque le dernier bouton/menu se déroule il recouvre mes icônes et qu’il soit ainsi complètement visible?
    Merci par avance pour qui me donnera une solution.

  69. Bonjour,
    Je vous remercie beaucoup pour ce tutoriel. J’aurais une question mais
    j’ai vu que vous n’avez pas répondu aux précédents messages mais je tente quand même ma chance:
    Serait-il possible de mettre un délai de par exemple 10 secondes avant que le menu se re-enroule quand on enlève son curseur de ce menu ? Merci 😀

  71. Bonjour, avec un menu vertical, je souhaiterai mettre un texte à droite du menu et qui ne bouge pas quand le menu se déroule .
    Je n’ arrive pas non plus , a fixer le texte sous le menu et faire passer le  » déroulé  » du menu sur mon texte qui ce situe sous le menu , une sorte de  » z-index: « .
    Quelqu’un pourrait m’aider s’il vous plait . Merci beaucoup

  72. Bonjour,
    Pour ma part je rencontre un petit problème. Lorsque je suis en survol tout fonctionne comme je le souhaite, hormis que je sais pour quelle raison je n’arrive que à changer la taille de la police et non la police en elle-même…
    Mon vrai problème se passe lorsque je ne suis pas en survol.
    Dans ce cas une barre de la couleur du sous menu reste afficher sous le menu. on dirait que c’est trois petites barres (mon sous menu comporte trois catégories) qui ne se cache pas complètement lorsque que j’éloigne la souris.
    Quelqu’un aurait-il une idée d’où peut venir mon problème ?
    Je vous remercie
    Laura

Laisser un commentaire