我尝试使用 jQuery 创建的弹性菜单有问题。它在 Safari 中看起来(几乎)不错(当鼠标悬停时,菜单右侧有一点晃动)。但在 Chrome 和 Firefox 中,最后一个菜单(联系人)有时会跳到下一行。我对 jQuery 很陌生,我无法看到问题...
你可以在这个小提琴中看到它的作用
这是我的代码:
jQuery
$(document).ready(function(){
var bouton = $('#menu li a'),
vitesse = 300;
bouton.hover(function(){
var leParent = $(this).parent();
leParent.stop().animate({ width: "40%" }, vitesse )
.siblings().stop().animate({ width: "20%" }, vitesse );
});
bouton.mouseout(function(){
var leParent = $(this).parent();
leParent.stop().animate({ width: "25%" }, vitesse )
.siblings().stop().animate({ width: "25%" }, vitesse );
});
});
HTML
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li><a href="#">Produits</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
CSS
html, body{margin:0;
padding:0;}
#menu{
padding:0;
width:80%;
margin:10px auto;
list-style-type:none;
}
#menu li{
margin:0;
padding:0;
width:25%;
float:left;
text-align:center;
background-color:#C03;
}
#menu li a{
border-left:1px solid white;
padding:10px 0;
color:#FFF;
text-decoration:none;
display:block;
}