Discussion :

[SpaceFrog]

Je n'arrive jamais à bloquer la pile d'animations
un survol rapide en aller retour des rubrique lance la danse

le html

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
18
19
20
21
22
23
24
25
<ul id="topnav">
    <li><a href="#" >ACCUEIL</a></li>
    <li class="actif">
        <a href="#" >SOCI&Eacute;T&Eacute;</a>
        <div>
            <a href="#">PR&Eacute;SENTATION</a>
            <a href="#">NOS AGENCES</a>
            <a href="#" class="actif">REVUE&nbsp;DE&nbsp;PRESSE</a>
            <a href="#">RECRUTEMENT</a>
            <a href="#">AUTRES&nbsp;ACTIVIT&Eacute;S</a>
        </div>
    </li>
    <li>
        <a href="#">PRODUIT</a>
        <div>
            <a href="#">DISTRIBUER</a>
            <a href="#">DIFFUSER</a>
            <a href="#">PROT&Eacute;GER</a>
            <a href="#">VENTILER</a>
        </div>
    </li>
    <li><a href="#">LOGICIELS</a></li>
    <li><a href="#">R&Egrave;GLEMENTATION</a></li>
    <li><a href="#">CONTACT</a></li>
</ul>

le css

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
ul#topnav {
	margin: 0; padding: 0;
	float: left;
	width: 1024px;
	list-style: none;
	position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
	font-size: 13px;
	font-family:verdana;
	font-weight: bold;
	background: #003A62 url(Pics/topnav_stretch.gif) repeat-x;
}
ul#topnav li {
	float: left;
	margin: 0; padding: 0;
	border-right: 1px solid #f0f0f0; /*--Divider for each parent level links--*/
	overflow: visible;
	text-align: center;
	line-height: 12px;
 
}
ul#topnav li a {
	padding: 10px 20px;
	display: block;
	color: #f0f0f0;
	text-decoration: none;
	width: auto !important;
}
ul#topnav li:hover { background: #1376c9 url(Pics/topnav_active.gif) repeat-x; }
 
ul#topnav li div {
	float: left;
	padding: 0px 0 0 15px;
	position: absolute;
	left: inherit;
	top:32px;
	display: none; /*--Hide by default--*/
	width: 150px;
	background: #006BB7;
	color: #fff;
	font-size:11px;
	font-weight:bold;
	text-align: left;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
}
/*
ul#topnav li:hover div { display: block; } /*--Show subnav on hover--*/
#topnav li div a { display: block;
	padding: 10px 0;
	} /*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
#topnav li div a:hover {
	text-decoration: underline;
	}
 
/*li.actif {background : #0D9BFF;}
li div .actif {
	color:#B7E1FF !important;
	padding-left:10px !important;
*/
}

je jq:

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
18
19
20
21
22
23
24
25
26
27
<script type="text/javascript">
$(document).ready(function() {
 
	$("#topnav li").hover(function() { //Hover over event on list item
 
                $(this).css({ 'background' : 'url(Pics/topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
		$(this).children("div:eq(0)").slideToggle('slow'); //Show the subnav
	}, function() { //on hover out...
		$(this).css({ 'background' : $(this).attr('class'=='actif')?'#0D9BFF':''}); //Ditch the background
		$(this).children("div:eq(0)").hide(); //Hide the subnav
 
	});
 
        $("ul#topnav li div a").hover(function() {
             //$(this).css({'padding-left':'10px'});
            $(this).stop().animate({paddingLeft:'10'},500);  // animation ?
            },function() {
            $(this).stop().css({'padding-left':'0'});
            })
 
        $("#topnav li[class=actif]").css({ 'background' : '#1376c9 url(Pics/topnav_active.gif) repeat-x'})
 
 
});
 
 
	</script>

[Bovino]

Essaye avec

Code :

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

$(this).stop(true).animate({paddingLeft:'10'},500);

[SpaceFrog]

Pas mieux...
de plus ce n'est pas le coup du padding que me gène, mais plutot de animate qui enclenche le dropdown du menu.

[SpaceFrog]

Fini de danser ...

merci de m'avoir mis sur la voie Beef!!

Code :

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

1
2
3
4
5
6
7
8
		$("#topnav li").hover(function() { //Hover over event on list item
			$(this).stop(true,true).css({ 'background' : 'url(Pics/topnav_active.gif) repeat-x'}); //Add background color and image on hovered list item
			$(this).children("div:eq(0)").stop(true,true).slideToggle('slow'); //Show the subnav
		},function() { //on hover out...
 
			$(this).stop(true,true).css({ 'background' : $(this).attr('class'=='actif')?'#0D9BFF':''}); //Ditch the background
			$(this).children("div:eq(0)").stop(true,true).hide(); //Hide the subnav
       });

le stop doit aller sur le children[0] !!