0

アニメーション ナビゲーション バーを作成しました。

コードは次のとおりです。

#nav ul li a:hover{
    color: #000033;
    background-color:#bcbceb;
    width: 200px;
    border-radius: 0 1em 1em 0;       
    transition-property: width, color, background-color;
    transition-duration: 0.5s, 0.5s, 0.5s;
    transition-timing-function: linear, ease-in, ease in; 
    -moz-transition-property: width, color, background-color;
    -moz-transition-duration:  0.5s, 0.5s, 0.5s;
    -moz-transition-timing-function: linear, ease-in, ease in; 
    -webkit-transition-property: width, color, background-color;
    -webkit-transition-duration:  0.5s, 0.5s, 0.5s;
    -webkit-transition-timing-function: linear, ease-in, ease in; 
}

これはページの左側にあります。各ナビゲーション リンクが右に移動すると、固定位置にあるのではなく、右にあるコンテンツが右に移動します。position:fixed; を試しました。しかし、うまくいかないようです。

ここにHTMLがあります

<ul>
    <li><h3><a href="index.html">Home</a></h3></li>
    <li><h3><a href="construction.html">Construction</a></h3></li>
    <li><h3><a href="it.html">I T Dept</a></h3></li>
    <li><h3><a href="web.html">Websites</a></h3></li>
    <li><h3><a href="cf.html">Company Forms</a></h3></li>
    <li><h3><a href="smf.html">Site Management Forms</a></h3></li>
    <li><h3><a href="phonebook.html">Phone Book</a></h3></li>
</ul>​

jsFiddle

#content 
{
    position: absolute;
    border: 1px solid #000033;
    padding:50px;
    display: block;
}
4

1 に答える 1

0

div属性にposition：relativeを追加してから、位置を追加してみてください。top：10pxまたはleft 10pxは、配置する場所に応じて、「bottom」属性を使用して配置することもできます。

于 2012-12-10T13:11:20.067 に答える