web-dev-qa-db-ja.com

bootstrap 3ナビゲーションバーのドロップダウンボックスの色

bootstrap 3.でフラットUIテーマを使用しています。3。フラットUIテーマのナビゲーションバーが正しく機能せず、githubに投稿されている同様の問題が多く発生しています。そのため、デフォルトをそのまま使用することにしました。 BS3 navbarを使用して、独自のコードを（別のstackoverflowスレッドを使用して）記述し、メニューを希望どおりにスタイル設定します。これをLESSでオーバーライドCSSとして実行しています。

問題は、次の変更方法がわからないことです。

  • ドロップダウンボックスの色
  • ドロップダウンボックスのリンクの色
  • ドロップダウンボックスリンクホバー色

これが私が使用しているCSSです：

/* navbar */
.navbar-default {
   font-size: floor(@component-font-size-base * 1.067); // ~16px
   border-radius: @border-radius-large;
   border: none;
   background-color: @brand-primary !important;
}
/* title */
.navbar-default .navbar-brand {
    color: #5E5E5E;
}
/* link */
.navbar-default .navbar-nav > li > a {
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover {
    color: @clouds;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  // Changes color of main button that is currently active.
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: @clouds;
    background-color: @brand-secondary;  //  Changes color of main menu button once clicked.
}
/* caret */
.navbar-default .navbar-nav > li > a .caret {
    border-top-color: @clouds;
    border-bottom-color: @clouds;
    color: @clouds;
}
.navbar-default .navbar-nav > li > a:hover .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}

これにより、正しいカラーバー、バーリンク、キャレット、およびバーホバー効果が生成されます。しかし、サブメニューのあるボタンをクリックすると、サブメニューはデフォルトのBSグレーのままです。ドロップダウンサブメニューの背景色、リンクの色などを変更するために、どのクラスが欠けていますか？

Bootstrap navbar sub menu

ありがとう

csstwitter-bootstrap-3background-colornavbarsubmenu
11
Jamie Collingwood

これは、ドロップダウンメニューのスタイル/色を変更するためのCSSです。

  .navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
  }

デモ： http://bootply.com/93475

16
Zim

私もこれを追加します：

.navbar-default .dropdown-menu {
     background-color: #3344ff;
     color:#ffffff;
}

スケリーが彼の応答で言ったことに加えて：

.navbar-default .navbar-nav .open .dropdown-menu>li>a, .navbar-default .navbar-nav .open .dropdown-menu {
    background-color: #3344ff;
    color:#ffffff;
}

これは、後者がドロップダウンが開いているときにのみ背景色を変更するためです。ただし、元に戻すと、背景色はデフォルトに戻ります。ドロップダウンを切り替えるだけではこれを目撃することはできませんが、たとえば下のjQueryを使用してホバーしてドロップダウンの遷移を遅らせると、私が何を意味するかがわかります。

$(document).ready(function () {
    $('.navbar-default .navbar-nav > li.dropdown').hover(function () {
        $('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
        $(this).addClass('open');
    }, function () {
        $('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
        $(this).removeClass('open');
    });
});

jsFiddle 上記のCSSを使用トグルドロップダウンをホバードロップダウンと比較できます。どちらも機能します。

jsFiddle 上記のCSSなし。トグルドロップダウンは機能しているようですが、マウスをホバーしてマウスを離すと元に戻ります。

4
Justin

FireFoxまたはChromeを使用している場合、それらの開発者ツールを使用して、ドロップダウンボックスに適用されているCSSを確認できますか？

たとえば、Chrome=で行うことは、ドロップダウンボックスの背景を右クリックして[要素を検査]を選択することです。次に、正しい要素が選択されていることを確認します。これにより、右側のパネルの要素に適用されているCSSスタイルを確認します（私のバージョンのChrome 30.0.1599.101 mには、スタイル、計算済み、イベントリスナー、DOMブレークポイント、およびプロパティのタブがあります） ）

2
rom99

BS3メニュージェネレーターを使用して、必要なCSSコードを作成しました。変更が必要なタグを探し出すよりもはるかに簡単でした。

0
Jamie Collingwood