ナビゲーションバーの個々のアイテムを伸ばす方法を教えてください。

私の移動バーでは、色を伸ばしたり色を変えたりする要素だけに乗りたがっていますが、ナビゲーションバー全体が伸びているようです。私は、アニメーションをトリガするために何をすべきかを変更しようとしましたが、何も動作していないようです。私の誤りを特定して訂正できますか？ナビゲーションバーの個々のアイテムを伸ばす方法を教えてください。

@keyframes mouse { 
 
    0% { 
 
    background-color: #35B1C2; 
 
    height: 40px 
 
    } 
 
    100% { 
 
    background-color: #2F9EBD; 
 
    height: 60px 
 
    } 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #35B1C2; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
li:hover { 
 
    animation-fill-mode: forwards; 
 
    animation-duration: 0.5s; 
 
    animation-name: mouse; 
 
} 
 

 
li { 
 
    border-right: 1px solid #bbb; 
 
} 
 

 
li:last-child { 
 
    border-right: none; 
 
}

<ul> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="aboutme.html">About Me</a></li> 
 
    <li><a href="projects.html">Projects</a></li> 
 
</ul>

出典

2017-04-07 Vaibhav Shrivathsa

あなたはoverflow:hiddenを削除し、あなたのul要素に

overflow:visible; 
height:45px; /* The height of your navbar */

を追加することができます。

出典

2017-04-07 03:03:09 Parag

ありがとう！私は今私の間違いを見ます：P。私は元々ストレッチアニメーションの意図なしにnavbarを作ったので、削除するのを忘れました。 –

これを試してみてください：

ul, li a:hover { 
    font-size: 30px; 
    color: red; 
}

出典

2017-04-07 02:53:41

右、それは動作しますが、直接あなたのコードを使用しますが、私のルールセットとルール・セットを交換する際、以下のホバー

参照スニペットに見える：オーバーフローをも適用しますページが読み込まれると、アニメーションが（全体のナビゲーションバーのために）トリガされ、その後、ナビゲーションバーが奇妙になります（リンクは上に乗ったときにハイライトしません）。私はこれがアニメーションそのものの問題と関係していると思います。 –

実際にコードにエラーはありません。何が起こるかは、ulボックスにliボックスが含まれていることです。したがって、liボックスに移動し、liボックスの高さが40pxから60pxに増加すると、そのボックスを含むulボックスもまた、liボックスを含む必要があるために広がります。

だから、その問題を回避するだけです。 ulボックスを使用しないことをお勧めしますが、実際にはそれが本当に必要ではないことがわかっているので、効率的だと思うだけです（ボックスの内側にナビゲーションバーを入れておく必要がありますdivまたはheader）。

出典

2017-04-07 03:06:30

ナビゲーションバーの高さを設定していません。したがって、ホバーの高さが変化すると、ナビゲーションバーは内容に合わせて高さを調整します。アニメーションを使うのではなく、私は単純な移行でこれを行います。ナビゲーションバーに最小高さを追加し、ulタグに遷移プロパティを適用します。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
    ul { 
 
     list-style-type: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     overflow: hidden; 
 
     background-color: #35B1C2; 
 
     min-height: 50px; 
 
    } 
 
    
 
    li { 
 
     float: left; 
 
    } 
 
    
 
    li a { 
 
     display: block; 
 
     color: white; 
 
     text-align: center; 
 
     padding: 14px 16px; 
 
     text-decoration: none; 
 
    } 
 
    
 
    li :hover { 
 
     background-color: #2F9EBD; 
 
     height: 60px; 
 
     transition: all 1s; 
 
    } 
 
    
 
    ul:hover { 
 
     overflow: visible; 
 
    } 
 
    
 
    li { 
 
     border-right: 1px solid #bbb; 
 
     transition: all 1s; 
 
    } 
 
    
 
    li:last-child { 
 
     border-right: none; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <ul> 
 
    <li><a href="index.html">Home</a></li> 
 
    <li><a href="aboutme.html">About Me</a></li> 
 
    <li><a href="projects.html">Projects</a></li> 
 
    </ul> 
 

 
</body> 
 

 
</html>

出典

2017-04-07 03:09:55 repzero

ナビゲーションバーの個々のアイテムを伸ばす方法を教えてください。

答えて

関連する問題