Datenschutz Impressum

NOF-Schule | Forum

zur Schule NOF-NetObjects-Tutorials von Tommy Herrmann

Die Foren sind geschlossen. Für Fragen zu MR, NOF & mehr steht Tommys Forum zur Verfügung. Ich danke für die langjährige Treue und Mitarbeit! Eure Administratorin.

Mobirise-Drop Down Menü verschiedene Farben
#1
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ß.  :D
Alle Beiträge dieses Benutzers finden
#2
Moin.

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


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


Viele Grüße
Christian
Alle Beiträge dieses Benutzers finden
#3
Moin,

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


.jpg  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:


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



P.S.:

ups - Christian wahr schneller thumbs up
Alle Beiträge dieses Benutzers finden
#4
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.  Huh

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.
Alle Beiträge dieses Benutzers finden
#5
... ich kann das so auch nicht sozusagen "trocken" sehen :confused:

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")
Alle Beiträge dieses Benutzers finden
#6
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.
Alle Beiträge dieses Benutzers finden
#7
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
Alle Beiträge dieses Benutzers finden
#8
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:

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


.jpg  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:

Zitat:<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/
Alle Beiträge dieses Benutzers finden
#9
thumbs up
Das verdammte !important...
Ich hatte es beim CSS auf dem Schirm. Aber nicht im HTML.
Super. Jetzt funktionierts.
Danke.
Alle Beiträge dieses Benutzers finden


Möglicherweise verwandte Themen…
Thema Verfasser Antworten Ansichten Letzter Beitrag
  Umstieg auf Mobirise 5 nof15us 67 3.946 16.12.2020, 10:53
Letzter Beitrag: Tommy Herrmann
  NOF 12 und Mobirise kombinieren Petergun 14 515 11.12.2020, 07:50
Letzter Beitrag: Petergun
  Mobirise-MP3 Player einbinden. Soundcloud? Thomas Saake 11 475 08.12.2020, 17:16
Letzter Beitrag: Thomas Saake
  Mobirise-Text unter Logo Menüleiste Thomas Saake 14 533 03.12.2020, 17:22
Letzter Beitrag: Thomas Saake
  Mobirise-Noch ein Problem mit Hamburger Menü auf Handy Thomas Saake 23 726 30.11.2020, 16:54
Letzter Beitrag: Thomas Saake
  Probleme mit Menü auf Handy kfz-fotograf 5 223 27.11.2020, 12:44
Letzter Beitrag: Tommy Herrmann
  Mobirise-PopUp Modal Text statt Kreuz zum schließen Thomas Saake 3 231 26.11.2020, 15:43
Letzter Beitrag: Thomas Saake
  Mobirise-Timeline Abstand verringern Thomas Saake 2 160 26.11.2020, 14:10
Letzter Beitrag: Thomas Saake
  2 verschiedene Durchlaufende Hintergründe schräg funsport 8 272 26.11.2020, 13:35
Letzter Beitrag: Tommy Herrmann
  Position Icons - Mobirise 5.2.0. Markus78 9 424 16.11.2020, 19:03
Letzter Beitrag: Tommy Herrmann



Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste
nach oben An den Anfang der Seite scrollen
NetObjects Fusion Infos, Downloads und Updates Diese Website wird durch Bot-Trap vor Spam geschützt!