0

ナビゲーションバーのフィドルを用意しました。

http://jsfiddle.net/88r9G/

現時点では、ホバーの下部境界はアクティブ状態よりも狭く、修正方法がわかりません。ここの教祖が助けになるかどうか疑問に思っていました。

HTML

<!-- Forgive the messy markup - wordpress output -->
<div class="wpbook_header">
    <div id="underlinemenu" class="clearfix">
       <ul>
           <li class="page_item page-item-67 current_page_item"><a id="load-home-page" href="#">Home</a></li>
           <li class="page_item page-item-69"><a id="load-blog-list" href="#">The Blogs</a></li>
           <li class="page_item page-item-60"><a id="load-authors-page" href="#">Meet the Bloggers</a></li>
           <li class="page_item page-item-2"><a id="load-gallery" href="#">Gallery</a></li>
           <li class="page_item page-item-271"><a id="load-faqs" href="#">FAQs</a></li>
           <li class="page_item page-item-168"><a id="load-compform" href="#">Competition</a></li>                        
       </ul>
   </div>
</div>​

CSS

#underlinemenu {
    font-family: arial, helvetica;
    padding: 0;
    margin: 0;
    padding-bottom: 30px;
    font-size: 14px;
}

#underlinemenu ul {
    float: left;
    font-weight: bold;
    width: 770px;
    height: 57px;
    background-color: #242129;
    margin: -1px 0 -30px 0;
}

#underlinemenu ul li {
    display: inline;
    float: left;
    color: white;
    padding: 21px 30px 0px 8px;
}

.current_page_item {
    color: white;
    padding: 21px 10px 15px 5px !important;
    margin: 0 30px 0 3px;
    border-bottom: 5px solid white;
}

#underlinemenu ul li a {
    color: white;
    font-weight: bold;
    text-decoration: none;
    padding: 5px;
}

#underlinemenu ul li a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

</ p>

また、これを溶岩ランプスタイルのメニュー（下の境界線がホバーされた要素の下にあるようにアニメーション化する）に変える方法について誰かがアドバイスを与えることができれば、それは素晴らしいことですが、そうでない場合は、後で質問するために保存できます。

4

4 に答える 4

2

現在、アクティブ アイテムの白い線を li に適用し、ホバー アイテムの緑の線を a に適用しています。あなたのliにパディングがあるため、aは彼の親と同じではありません.nadしたがって、下の境界線はそれほど広くありません. いくつかの解決策があります：

  • ボーダー下部のホバー効果を に適用しますli。別のセレクターでテキストの色を適用する必要があることに注意してください。これは、親から色を継承しないため、ホバーによってトリガーされないliためです。a
  • から左右のパディングを削除しliて、ネストされたaものを同じ幅にします。これが最善の解決策であることに注意してください。そうしないと、の端でホバー効果が発生し、liクリックしてもリンクがトリガーされません。また、タブレットなどでは、大きなリンクの方が優れています。また、アクティブな状態の境界aも同様に設定する必要があります。私はあなたのフィドルを更新して、私が何を意味するかを示しました: http://jsfiddle.net/88r9G/8/

効果に関しては、あなたが何を求めているのかよくわかりません。おそらく、何かを実演してみるか、実際に詳細な説明を付けて新しい質問を投稿することができます...

于 2012-08-23T14:49:01.620 に答える
1

緑と青の背景を持つブロック要素としてとを作成liしました。a各li要素が占める面積は、対応する要素が占める面積と同じaです。しかし、ホバーするとa要素の高さが変わります。

バリアントとして (DEMO を参照: http://jsfiddle.net/88r9G/7/ ):

#underlinemenu {
    margin: 0;
    padding: 0;
    font-size: 14px;
}

#underlinemenu ul {
    width: 770px;
    height: 57px;
}

#underlinemenu ul li {
    display: block;
    float: left;
    height: 57px;
    background-color: #408261;
}

#underlinemenu .current_page_item {
    background-color: white;
}

#underlinemenu .current_page_item a {
    height: 52px;
}

#underlinemenu ul li a {
    display: block;
    height: 57px;
    padding: 0px 10px 0px 10px;
    color: white;
    background-color: #242129;

}

#underlinemenu ul li a:hover {
    height: 52px;
    color: #408261;
}
​
于 2012-08-23T14:53:03.023 に答える
1

不要なスタイリングと思われるものの多くを削除しました -更新された JSFiddle ここを参照してください。特に注意すべき点:

  • すべてのパディング/マージンが 1 つの要素になりました。
  • li要素ではなく、ホバー時に要素の境界線を変更していますa。

アニメーションに関しては、最新のブラウザー向けに開発している場合は CSS3 アニメーションと変換を検討します。それ以外の場合は、JavaScript アニメーションが最善の策です。

于 2012-08-23T14:48:03.033 に答える
1

Css セレクターを使用した簡単な答え:

#underlinemenu ul li:not(.current_page_item) a:hover {
    color: #408261;
    padding-bottom: 15px;
    border-bottom: 5px solid #408261;
}

それが役に立てば幸い！

于 2012-08-23T15:18:09.457 に答える