0

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;
}
4

1 に答える 1

0

フローティング要素をアニメーション化しています。コンテナー内に収まらない場合は、下に表示されます。

アニメーション中はある程度の余裕を残す必要があります。

これを行う：

#menu {
     text-align: center;
}

中心にします。

削除する：

#menu li {
    float: left;
}

そして追加：

#menu li {
    display: inline-block;
}

要素の幅を 24% に、縮小したボタンのサイズを 19% に変更します。

最後に、li 要素間のスペースをすべて削除してください。

<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>

これで動作するはずです。

http://jsfiddle.net/jRMZM/2/

ウィンドウのサイズ変更イベントハンドラーでいつでもパーセンテージを自分で計算し、パーセンテージ計算で Math.floor() を実行するようにしてください。

編集: http://jsfiddle.net/zWCf8/3/

于 2013-05-23T13:50:42.463 に答える