Discussion :

[pierrot10]

Bonjour à tous,
Je me bat pour trouver comment faire pour que la largeur d'un <ul> d'adapte en fonction des <li> qu'il contient.

En fait je pense que la meilleur facon de m'aider c'est d'avoir firefox avec firebug.

Mon menu est fait grace à fishmenu http://users.tpg.com.au/j_birch/plug...rfish/#sample4

Voci l'url de mon site
http://www.tricosachic.ch/category.php?id_category=15
et un extrait du code

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<ul class="sf-menu dhtml level1 sf-js-enabled">
<li class="">
<li class="">
<li class="">
<li class="sfHover sf-breadcrumb">
<a class="selected sf-with-ul" title="dxfg" href="http://www.tricosachic.ch/category.php?id_category=4">
<ul class="level2">
<li class="">
<li class="last selected ">
</ul>
</li>
<li class="">
<li class="last">
</ul>

Donc le css des <ul> et les <li> sont quasi défini avec fishmenu.

Cependant je souhaite l'adapter pour que les sous-menu du deuxième soit aussi horizontaux.

Cependant le <ul class="level2"> sadapte en fonction de son <li> parent et j'aimerais qui s'élargissent en fonction de ses <li> enfant

J'ai remarqué qui si dans mon <ul class="level2"> je luis mets une largeur de 250px, tous mes <li> enafants sont bien horizontaux.
Cependant je ne souhaite pas que <ul class="level2"> ait une largeur fixe, car je pourrai avoir 7-8-9-12 sous-menu. Donc forcément certain seront en buttée avec le 250px de largeur.

Comment puis-je définir <ul class="level2"> pour qu'il sadapte en fonction de ses <li> enfants?

Vous voyez?
Merci

[Rachel]

ceci fonctionne mais demande de connaitre un peu le javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<script>
var uls = document.getElementsByTagName('ul');
for(var i=0;i<uls.length;i++)
{
if(uls[i].getAttribute('class')=='level2')
 {
var lis = uls[i].getElementsByTagName('li');
var max = lis[0].innerHTML.length;
for(var j=1;j<lis.length;j++){if(lis[i].innerHTML.length>lis[i-1].innerHTML.length)max=lis[i].innerHTML.length;}
max = 9*max;
uls[i].style.width=max+'px';
 }
break;
}
 
</script>

on recherche la balise ul désirée et sa largeur sera celle de la balise li la plus grande !

si quelqu'un a une meilleur idée...

[pierrot10]

Hello,
je te remercie pour ta réponse,
C'est super cool, mais ca marche que partiellement.
Pour les deux premiers, c'est ok, mais les deux suivant, les sous-menu sont l'undessus l'autre.

Tu peux regardé ici ce que ca donne:
http://www.tricosachic.ch/

Merci pour tes lumières

[pierrot10]

En fait, je crois que le ul.level2, ne prend pas la largeur des li. Je vais encore chercher.
Peut etre que c'est aussi un problème de css

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
ul, li{
    display: inline-block;
}

[pierrot10]

Bonjour à tous,
je suis toujours bloqué avec mon problème,

le faite de mettre inline-block au ul et li ne résou pas mon problème.

En fait il faudrait que le ul du sous-menu qui contient les li, soit forcé à prendre la largeur de ses derniers qui sont en float:left