Mobirise-Drop Down Menü verschiedene Farben

[Thomas Saake]

Moin.
Kann man den Unterpunkten eines Menüs, egal welche Menüleiste man wählt, beim ausklappen unterschiedliche Hintergrundfarben geben?
Also ungefähr so:
Menüleiste an sich ist blau
Menüpunkt A - alle aufklappenden Unterpunkte sollen gelb sein.
Menüpunkt B - alle aufklappenden Unterpunkte sollen grün sein.
Menüpunkt C - alle aufklappenden Unterpunkte sollen rot sein.
usw.
Schön bunt. Ich weiß. 

[jonny]

Moin.

Man könnte den einzelnen Submenüs noch eine separate Styleanweisung mitgeben.
Z.B. <div class="dropdown-menu" style="background: #ff0000;">


 subnavi.jpg (Größe: 120,8 KB / Downloads: 37)


Viele Grüße
Christian

[Tommy Herrmann]

Moin,

ja - das kannst Du im Code-Editor doch sehr einfach anpassen. Siehe dieses Beispiel mit gelben Hintergrund:


 Dropdown.jpg (Größe: 250,63 KB / Downloads: 36)


Ich habe also diese Style-Anweisung:

style="background-color: yellow;"

dem entsprechenden <div> Container des Dropdown-Menüs hinzugefügt. Sie Screenshot, markierte Anweisung:


 DIV-Dropdown-Style.JPG (Größe: 215,85 KB / Downloads: 34)



P.S.:

ups - Christian wahr schneller

[Thomas Saake]

Moin.
Erstmal danke.
Ich bin einfach zu blöd. Kaum zu glauben. Das ist relativ einfach.
Verstanden habe ich es auch. Aber ich bekomme es nicht hin.
Warum? Frag mich nicht. 

Code:

  <div class="collapse navbar-collapse" id="navbarSupportedContent" mbr-if="showItems || showIcons || showButtons">
                <ul mbr-menu class="navbar-nav nav-dropdown" mbr-theme-style="display-4" mbr-if="showItems" mbr-class="{'nav-right': !showButtons,'navbar-nav-top-padding': isPublish && !showBrand && !showLogo}"><li class="nav-item dropdown"><a class="nav-link link text-white dropdown-toggle" href="#" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" data-toggle="dropdown-submenu" aria-expanded="false">Das Boot</a><div class="dropdown-menu"><a class="text-white dropdown-item text-primary" href="index.html#hainesfoto" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Haines 1070 Foto</a><a class="text-white dropdown-item text-primary" href="index.html#hainesausstattung" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text">Bootsüberblick</a></div></li><li class="nav-item dropdown"><a class="nav-link link text-white dropdown-toggle" href="#" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" aria-expanded="false" data-toggle="dropdown-submenu">Aufstellung</a><div class="dropdown-menu"><a class="text-white dropdown-item" href="#" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" aria-expanded="false">Kosten</a><a class="text-white dropdown-item" href="#" data-app-selector=".nav-link,.dropdown-item" data-app-placeholder="Type Text" aria-expanded="false">Seekiste</a></div></li>

Das ist der Code von einem Menüpunkt. Geht nur so. Ich hab's noch nicht online.

[Tommy Herrmann]

... ich kann das so auch nicht sozusagen "trocken" sehen

Es sieht so aus als hättest Du gar nichts gemacht, denn die Class für das "Dropdown" (Ausklappleiste) steht ja in Deinem Code noch so:

Code:

<div class="dropdown-menu">

... und wie ich Dir oben geschrieben hatte solltest Du diese so ändern:

Code:

<div class="dropdown-menu" style="background-color: yellow;">

... also diese Style-Anweisung noch mit dran schreiben (in meinem Beispiel in der Farbe Gelb - also "yellow")

[Thomas Saake]

Code:

<div class="dropdown-menu" style="background-color: yellow;">

Das hatte ich gemacht.
Ich den Teil nur wieder rausgenommen damit den Ursprungscode seht.
Den Code habe ich jetzt drin und nichts wird gelb.
Ich mache das Ding morgen mal online.

[Thomas Saake]

Moin.
Schaut bitte:
Ich habe nichts gemacht. Das erste Drop Down Menü soll z.B. gelb sein. Das zweite grün.

http://tsad17.de/Boot2021AKTP/

Bootaktp
1234567

[Tommy Herrmann]

Moin,

in der CSS dieses Templates ist die Hintergrundfarbe vom Dropdown der Navi per Default mit "wichtig" makiert, im Syntax dann so (mit !Ausrufezeichen davor):

!important

... daher hat Deine Style-Anweisung so nicht gewirkt.

Wichtige Style-Anweisungen haben Vorrang. Du musst also dann noch deinerseits diese Anweisung "!important" verwenden, um die per Default gesetzte zu überschreiben:

<div class="dropdown-menu" style="background-color: yellow !important;">

 important.jpg (Größe: 177,85 KB / Downloads: 25)


Dann müsstest Du aber auch die Class für die Schriftfarbe ändern, denn Weiß sieht man auf Gelb ja nur schlecht. Ich habe hier mal die Bootstrap class="text-black" anstelle der class="text-white" eingesetzt:

<a href="index.html#hainesfoto" class="text-black dropdown-item text-primary display-4">Haines 1070 Foto</a>

Bootstrap Farbklassen:

https://getbootstrap.com/docs/4.0/utilities/colors/

[Thomas Saake]

Das verdammte !important...
Ich hatte es beim CSS auf dem Schirm. Aber nicht im HTML.
Super. Jetzt funktionierts.
Danke.