[CSS] Drop down menu justifié

Hello la zone,

Je recherche pour un collègue un menu drop-down, si possible entièrement en CSS qui s’afficherait de manière justifiée. C’est à dire qu’en fonction du nombre d’éléments dans le menu (éléments chargés dynamiquement of course), les éléments du menu s’allongeraient ou se raccourciraient pour que l’ensemble fasse toujours la même taille.

J’ai fait une recherche google, mais je ne trouve rien de tout ça. Est-ce que quelqu’un a une idée?

Merci d’avance

Euh que le menu fasse toujours la même taille en largeur? Qu’est ce que tu fais si un élément du menu dispose d’un contenu texte trop grand pour la cellule? parce que si tu t’en fous, t’as la technique simple de: (considérant un menu a base de ul li)

ul#menu
{
width: 200px;
}

ul#menu li
{
display: block;
float: left;
text-align: center;
width: 20%; /* pour 5 éléments */
}

Avec un petit « overflow: hidden » non ? Histoire d’être sûr que ce qui dépasse ne fasse pas dégueuler le design. :slight_smile:

[quote="[PERE]Cil, post:2, topic: 49568"]
ul#menu
{
width: 200px;
}

ul#menu li
{
display: block;
float: left;
text-align: center;
width: 20%; /* pour 5 éléments */
}[/quote]

Ben tu as exactement touché du doigt le problème dans ton exemple… nous ne connaissons pas le nombre d’entrées dans le menu à l’avance, donc impossible d’utiliser le width: 20%…

C’est là toute la difficulté…

En CSS ce n’est pas possible (à part avec des tableaux :slight_smile: )
En javascript tu peux faire un truc du genre : largeur élément du menu = largeur totale/le nombre d’élément de ton menu.

Si j’ai bien compris, tu veux que le sous-menu (celui qui appraît au clique du menu) adapte sa taille en fonction du nombre d’éléments dans le menu.

Une solution serait de stocker le sous-menu dans le block contenant le menu. Comme ça il prend d’office la taille de son parant (le menu) et t’as plus besoin d’y réflechir ça s’adaptera automatiquement.

Ca doit pas être bien compliqué d’adapter un menu déroulant CSS existant pour qu’il fasse ça.

Niveau code ça donnerait un truc du genre :

[code]

  • MenuItem1
    • Sous-menu 1
    • Sous-menu 2
  • MenuItem2
[/code]

Non il veut ça : http://dizque.lacalabaza.net/temp/full-wid…r-with-css.html
Ca marche très bien, sauf dans IE :slight_smile:

Ah ok j’avais pas compris ça en effet (le drop-down m’a induit en erreur).

Là, du coup, j’avoue que je vois pas trop. :slight_smile:

Je vais faire mon cochon mais quand tu fais le rendu, tu connais le nombre d’éléments. pourquoi pas forcer le width en inline?