Menu a trois niveau en jQuery, bug d'affichage
Bonjour,
Après avec lu un bouquin de noob sur jQuery, je m'essai a mes premiers créations.
J'ai réalisé un menu, dont je suis absolument certain de la structure html et jquery, pourtant l'affichage deconne au niveau du slide.
Je l'ai donc refait depuis 0, complétement épuré des trucs inutile.
Mon professeur de javascript n'a pas pour le moment su me dire pourquoi mon menu déconne.
Le premier menu est de type inline.
Au clic sur un li j'affiche un sous menu avec slideToggle (fonctionne bien).
Au mouse over du li du second menu, je slidedown un autre menu.
A la sortie de la souris il doit remonté.
Pouvez vous jetez un coup d'oeil à ce petit bout de code et m'aider a comprendre ce que je fais de mal.
Merci d'avance
le jQuery
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| $(document).ready(function()
{
// Je masque le sous menu 1 & 2
$('ul:eq(1)').css('display','none');
$('ul:eq(2)').css('display','none');
// Au clique d'un element du menu, j'affiche le sous menu 1
$('ul:eq(0) > li').click(function(){
$(this).children('ul').slideToggle();
});
// Au survol d'un element du sous menu 1, j'affiche le sousmenu2
$('ul:eq(1)>li').mouseover(function(){
$(this).children('ul').slideDown();
});
// A la sortie d'un element du sous menu 1, je masque le sousmenu2
$('ul:eq(1)>li').mouseout(function(){
$(this).children('ul').slideUp();
});
}); |
le style css
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| ul{
list-style-type:none;
padding:0px 0px 0px 15px;
}
li{
width:100px;
display:block;
}
a{
width:100px;
}
#firstul{
position:relative;
}
#firstul > li{
display: inline-block;
}
#firstul ul{
position:absolute;
} |
le contenu du body
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <ul id='firstul'>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a>
<ul>
<li><a href="#">Sous Menu 1</a></li>
<li><a href="#">Sous Menu 1</a>
<ul>
<li><a href="#">Sous Menu 2</a></li>
<li><a href="#">Sous Menu 2</a></li>
<li><a href="#">Sous Menu 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Lien</a></li>
</ul> |
Voila il y a rien d'autre dans ma page (73 lignes en tout).
merci d'avance pour votre aide !
