0

JavaScript を使用せずにスライド ナビゲーション バーを作成しています。

1 つのことを除いて、すべてがうまく機能しています。div が最終的な位置 (キーフレームの 100%) に到達すると、左の div が一番上の div をドキュメントの一番下に押し込みます。

position: absolute を試してみましたが、役に立ちませんでした。div の幅を 6% に設定し、上部の div の幅を 94% に設定したままにしてみましたが、ユーザーがブラウザーを縮小するとすぐに壊れます。

HTML:

<div id="left_bar"><p>This is sparta!</p></div>
<div class="top_bar">This is not Sparta!</div>

CSS:

/* LEFT SIDEBAR*/
#left_bar {
-webkit-animation:myFirst 3s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
font-size: .2px;
padding-left: 5px;
float: left
}


/* LEFT SIDEBAR ANIMATION*/
@-webkit-keyframes myFirst /* Safari and Chrome */{
    0% {
        background: orange;
        width: 6%;
        height: 0px;
        margin-top: 100%;
    }
    100% {
        background:orange;
        width: 6%;
        height: 100%;
        opacity: 0.7;
        font-size: 16px;
    }
}
/* TOP SIDEBAR*/
.top_bar {
background-color: black;
-webkit-animation:mySecond 3s;
-webkit-animation-fill-mode: forwards;
float: right;
}

/* TOP SIDEBAR ANIMATION*/
@-webkit-keyframes mySecond /* Safari and Chrome */{
    0% {
        background: orange;
        width: 0%;
        height: 8%;

    }
    100% {
        background:orange;
        width: 94%;
        height: 8%;
        opacity: 0.7;
    }
}

jsFiddle注: jsFiddle は、外観をまったく異なるものにしています。左側のサイドバーは高さの 100% を占めませんが、上部のサイドバーがページの 94% を占めると、上部のバーが左側のサイドバーの下にジャンプします。

4

1 に答える 1

1

問題は、あなたが持っているという事実によるものpadding-left:5px;です#left_bar。それを削除すると、問題が修正されます

別の十分な解決策はcalc、それらの1つの幅を同じ量だけ短くするために使用することです

@-webkit-keyframes mySecond {
    ...
    100% {
        width: calc(94% - 5px);
        ...
    }
}

デモはこちら

于 2013-11-08T15:50:07.153 に答える