2

幅が等しい 5 ページの「リンク」を持つナビゲーション バーを設計しました。これらにカーソルを合わせると、そのページに関連するその他のリンクを含むドロップダウンが表示されます。ナビゲーション jsFiddle を参照してください。これは完全に機能します。

問題

サイトにナビゲーション バーを配置すると、意図したとおりに動作しません。ドロップダウン アニメーションは非常に遅く、ページの端に白いバーがランダムに表示されます (Windows 7 Ultimate、Chrome 24、その他の OS およびブラウザーはテストされていません)。こちらのサイトをご覧ください。

白いバー

奇妙な白い棒

マークアップの例

<nav id="nav">
    <ul id="nav1">
        <li> 
        <span>Games</span>
            <div>   
                <span><a href="">All Games</a></span>
                <span><a href="">Free Games</a></span>
                ...
            </div>
        </li>
        ...
    </ul>
</nav>

アニメーション CSS

#nav1 > li > div {
    position: absolute;
    margin: 5px 0 5px -45px;
    top: 0;
    left: 50%;
    max-height: 30px;
    width: 90px;
    opacity: 0;
    overflow: hidden;
    -webkit-transition: 
        width 500ms, 
        max-height 500ms, 
        opacity 200ms ease 400ms, 
        margin-left 500ms;
}
#nav1 > li:hover > div {
    max-height: 200px;
    width: 200px;
    opacity: 1;
    margin-left: -100px;
    -webkit-transition: 
        width 500ms, 
        max-height 1s ease 500ms,
        opacity 200ms, 
        margin-left 500ms;
}

私が試したこと

1 時間かけて問題を探してもうまくいかなかったので、サイト全体の jsFiddle を作成して、問題を特定できるかどうかを確認することにしました。驚いたことに、それは jsFiddleでうまく動作します。

編集：さらにテストした後、幅または高さの遷移が#nav1 > li > div完了すると問題が発生すると判断しました。それはまた、間違いなくトランジションに関連しています。これが役立つかどうかはわかりません。

私の質問

誰かが問題について何らかの洞察を提供できれば、それは大歓迎です。問題の原因が何であるか、またはそれを修正する方法がまったくわかりません。

注:現在、ナビゲーションは Chrome でのみアニメーション化されています。

4

1 に答える 1

0

問題は：

#mainbar

それを取り除き、問題が解決しないかどうかを確認してください。しかし、それだけではありません。これには、DOMの幅全体が含まれます。

width:100%;

また、ページの一部のみを占める#wapperelよりも高いz-indexを持っています。#mainbar elは、＃wrapperがない側の領域をオーバーレイしています。しかし、そこには（スタイル的に）何もないので、ブラウザbgのデフォルトの白を取得します。したがって、側面の白いバー。

私が間違っていると思うなら、

#mainbar{width:700px;}

白いバーが新しいカバーされていない領域に拡大しているのがわかります。：P

簡単な解決策：

#wrapper{z-index:0;}

それはそれを解決するはずです。

于 2013-02-25T06:51:19.197 に答える