1

ナビゲーションバーがあり、特定の要素に対して、デフォルトの白い下線の代わりに、5 色を使用して線に色を付けたいのですが、これが可能かどうか疑問に思っていましたか?

構造は次のとおりです。

HTML

<div id="underlinemenu" class="clearfix">
    <ul>
        <li class="page_item page-item-67">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-69 current_page_item">
            <a href="#">The Blogs</a>
        </li>
        <li class="page_item page-item-60">
             <a href="#">Meet the Bloggers</a>
        </li>
        <li class="page_item page-item-2">
            <a href="#">Gallery</a>
        </li>
    </ul>
</div>​

CSS

#underlinemenu{
    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: -14px 0 -30px 0;
}


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

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

#underlinemenu ul li a:hover{
    color: #ffffff;
    padding-bottom: 16px;
    border-bottom: 3px solid #ffffff;
}

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

</p>

フィドル

http://jsfiddle.net/SMrYF/

カラーコード

#a3ad24
#4594cc
#c4262e
#d9709c
#ffa100

どんな助けでも大歓迎です。

アップデート

モックアップはこちらにあります: http://img59.imageshack.us/img59/2866/navbarf.jpg

4

4 に答える 4

2

-前の回答を省略-

わかりましたので、別の解決策を思いつきました。それぞれの下部にli幅 20% の 5 つの div を配置しました。醜い解決策のように思えますが、うまくいきます!

http://jsfiddle.net/VdMPL/6/

于 2012-08-13T15:07:34.673 に答える
1

また、CSS グラデーションを使用して、神聖でないことを行うこともできます。これは、Safari/Chrome でのみ動作するハッキングされたフィドルです: http://jsfiddle.net/ASLs3/1/

しかし、他の人が言ったように、おそらく背景画像を使用する必要があります。

于 2012-08-13T22:50:45.677 に答える
1

いくつかのオプション

  • 下枠ではなく背景画像を追加します (静止画像ファイルを使用)。
  • bg 画像に線形グラデーションを追加します (IE9 以前ではサポートされていません)。
  • スタイルを使用しborder-imageます (IE9 以前ではサポートされていません)。

ハイパーリンクの幅が固定されていない場合は、background-size(IE9 以前ではサポートされていません) を設定するか、各ハイパーリンクに img タグを追加して (静的に、または JS または jQuery を使用して)、幅 100%、高さを固定して拡大縮小することができます。

線形グラデーションを使用するには、10 個のグラデーション ポイント (各色に 2 つ) を定義する必要があります (3 つ以上のグラデーション ポイントを指定できると仮定します)。

于 2012-08-13T15:40:31.967 に答える
1

純粋な CSS2 オプション

擬似要素を使用します。に追加position: relative;します.current_page_item(またはli、これをホバーに使用する予定がある場合)。それで...

新しい回答 (IE のバグを解決)

次のコードを追加すると、この fiddleに表示される結果が得られます。疑似要素に独自の下部境界線を使用して、疑似要素の色ではなく色を作成させることで、元の回答とは異なりますbackground-color。これで IE の愚かさが解消されたようです。

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20%;
    bottom: -3px;
    left: 20%;
    border-bottom: 3px solid #4594cc;
}

.current_page_item:after {    
    left: 40%;
    border-bottom-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;    
    border-bottom-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;    
    border-bottom-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {   
    border-bottom-color: #ffffff;
}

元の回答（理解できないように見えるため、IEにバグがありましたheight: 3px）

hover次のコードを追加すると (現在のページにコードが必要かどうかはわかりませんが、必要に応じて含めました)、このフィドルに表示される結果が得られます。

.current_page_item:before,
.current_page_item:after,
.current_page_item a:before,
.current_page_item a:after {
    content: '';
    position: absolute;
    height: 3px;
    width: 20%;
    bottom: -3px;
    left: 20%;
    background-color: #4594cc;
}

.current_page_item:after {    
    left: 40%;
    background-color: #c4262e;
}
.current_page_item a:before {    
    left: 60%;
    background-color: #d9709c;
}
.current_page_item a:after {    
    left: 80%;
    background-color: #ffa100;
}

.current_page_item:hover {
    border-color: #ffffff;
}

.current_page_item:hover:before,
.current_page_item:hover:after,
.current_page_item:hover a:before,
.current_page_item:hover a:after {
    background-color: #ffffff;
}

注:3px IE には、との4px高さの違いを判断するのに十分なほどインテリジェントな問題があるように思われることに気付きました1px。

于 2012-08-13T16:45:59.450 に答える