webentwicklung-frage-antwort-db.com.de

farbe der Bootstrap 3-Navigationsleiste

Ich verwende ein flaches UI-Theme mit Bootstrap 3. Die flache UI-Theme-Navbar funktioniert nicht richtig und viele haben ähnliche Probleme, die auf github gepostet wurden. Also entschied ich mich, einfach die Standard-BS3-Navbar zu verwenden und meinen eigenen Code (mit Hilfe eines anderen stackoverflow-Threads) zu schreiben, um das Menü so zu gestalten, wie ich es gerne hätte. Ich mache dies in weniger als Override-CSS.

Das Problem ist, dass ich nicht herausfinden kann, wie ich Folgendes ändern kann.

  • dropdown-Feldfarbe
  • die Farbe der Dropdown-Box
  • dropdown-Box-Link-Hover-Farbe

Hier ist die CSS, die ich verwende:

/* 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;
}

Dadurch werden die richtigen Farbbalken, Balkenlinks, Einfügemarken und Bar-Hover-Effekte erzeugt. Wenn ich jedoch auf eine Schaltfläche mit einem Untermenü klicke, wird das Untermenü immer noch im Standard-BS-Grau angezeigt. Welche Klassen fehlen mir, um die Hintergrundfarbe, die Verbindungsfarbe usw. des Untermenüs zu ändern?

Bootstrap navbar sub menu

Vielen Dank

10

Dies ist das CSS, um den Stil und die Farbe des Dropdown-Menüs zu ändern.

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

Demo: http://bootply.com/93475

15
Zim

Ich würde auch folgendes hinzufügen:

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

Zusätzlich zu dem, was Skelly in seiner Antwort sagte:

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

Dies ist darauf zurückzuführen, dass bei letzterem nur die Hintergrundfarbe geändert wird, wenn die Dropdown-Liste geöffnet ist. Sobald die Hintergrundfarbe jedoch wiederhergestellt ist, wird die Hintergrundfarbe wieder auf den Standardwert zurückgesetzt. Sie können dies nicht durch einfaches Umschalten der Dropdown-Liste miterleben. Wenn Sie jedoch den Übergang der Dropdown-Liste verzögern möchten, z. B. durch Verwendung von jQuery unten, können Sie sehen, was ich meine.

$(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 mit der obigen CSS Sie können das Toggle-Dropdown mit dem Hover-Dropdown vergleichen. Sie arbeiten beide.

jsFiddle ohne obige CSS. Das Toggle-Dropdown-Menü scheint zu funktionieren, aber sobald Sie die Maus bewegen und die Maus wegbewegen, wird sie wieder hergestellt.

3
Justin

Wenn Sie FireFox oder Chrome verwenden, können Sie die entsprechenden Entwicklertools verwenden, um zu überprüfen, welche CSS-Werte auf das Dropdown-Feld angewendet werden. 

Zum Beispiel würde ich in Chrome mit der rechten Maustaste auf den Hintergrund der Dropdown-Box klicken und "Element prüfen" auswählen. Dann prüfen Sie, ob Sie das richtige Element ausgewählt haben. Dann sollten Sie in der Lage sein, zu überprüfen, welche CSS-Stile auf das Element im Bedienfeld auf der rechten Seite angewendet werden (es enthält Registerkarten für Stile, Berechnet, Ereignis-Listener, DOM-Haltepunkte und Eigenschaften in meiner Version von Chrome 30.0.1599.101).

2
rom99

Ich habe einen BS3-Menü-Generator verwendet, um den benötigten CSS-Code zu erstellen. War viel einfacher als zu versuchen, die Tags aufzuspüren, die ich ändern musste.

0