MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

Silpancho · 06. Juni 2013 03:02

Hallo, ich bin neu hier auf dieser Seite, und auch ziemlich neu mit CMSMS.

Ich hab ein Problem, und zwar möchte ich ein mehrfarbiges Menü im MenuManager umsetzen, was
ja per ausschliesslich CSS mit eigenen Klassen gut möglich ist, weil man im HTML nachher jeden
<li> mit einer eigenen Klasse versehen kann (zb. <li class="rot"), oder gar ein Hintergrundbild anhängen
kann und für jeden li wirklich was eigenes zaubern kann..

jetzt hab ich aber gemerkt, dass wenn ich MenuManager ins Spiel bringe und die Navigation dynamisch generieren lassen
möchte, leider meine Hintergrundbilder weg sind und nur noch transparenz zu sehen ist..
hier der Link zur Navi, wie sie aussehen sollte:
Navi

Meine Frage ist: lässt sich so was überhaupt mit dem MenuManager umsetzen? wenn ja, wie? meine Kenntnisse begrenzen sich hauptsächlich auf CSS/HTML und ich hab keinen Schimmer wie ich das per MenuManager bewerkstelligen soll.
Wie kann man denn jeden Menüpunkt einzeln ansprechen und jedem eine eigene Farbe geben?

Falls irgendwer eine Ahnung hat, wär ich froh um jeden Hinweis.
Sonst bleibt mir wohl nur die Möglichkeit, das Menu über das Seiten-Template statisch einzufügen.

Liebe Grüsse smile
Silpancho

nockenfell · 06. Juni 2013 06:10

Wilkommen im Forum smile

Dazu gibt es verschiedene Möglichkeiten. Eine Möglichkeit ist, dass du das Menü dynamisch durchummerierst. Statt den Klassen "rot", "grün", "blau", etc. nutzt zu z.B. "p1", "p2", "p3, etc.:

MenüManager Template

Hier klicken, um den Code zum Kopieren zu markieren

{* CSS classes used in this template:
.activeparent - The top level parent when a child is the active/current page
li.active0n h3 - n is the depth/level of the node. To style the active page for each level separately. The active page is not clickable.
.clearfix - Used for the unclickable h3 to use the entire width of the li, just like the anchors. See the Tools stylesheet in the default CMSMS installation.
li.sectionheader h3 - To style section header
li.separator - To style the ruler for the separator *} 

{if $count > 0}
<ul>
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<ul>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</li></ul>" times=$node->prevdepth-$node->depth}
</li>
{elseif $node->index > 0}</li>
{/if}
{if $node->type == 'sectionheader'}
<li class="sectionheader"><span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{elseif $node->depth == '1'}
<li class="p{$node->hierarchy}"><a href="{$node->url}" class="p{$node->hierarchy} {if $node->current}current{/if}"><span>{$node->menutext}</span></a>
{else}
<li><a href="{$node->url}" {if $node->current}class="current"{/if}><span>{$node->menutext}</span></a>
{/if}
{/foreach}
{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Eine andere Variante ist, im Menü die Extra-Felder der Seite auszuwerten und da die jeweilige Klasse zu hinterlegen. Dies ist die flexiblere, jedoch auch aufwändigere Methode, da in diesem Fall bei jeder Seite etwas hinterlegt werden muss (manuelles Anpassen).

Silpancho · 06. Juni 2013 15:15

hei nockenfell, besten Dank für deine rasche Antwort! Toller Support!
Die Klassen mit p1, p2 usw. zu bezeichnen, hat mit den Hauptmenü-Links auch super geklappt! Dankeschön!

Wie könnte ich denn jetzt die Untermenüs ansprechen?

Edith sagt: die spricht man mit 'p1 ul li a' an, war schon etwas voreilig mit meiner Fragerei hmm
Danke nockenfell

einen Gruss in den schönen Aargau!! wink
Silpancho

Beitrag geändert von Silpancho (06. Juni 2013 15:28)

antibart · 06. Juni 2013 15:40

Ich habe das mal so realisiert, dass ich im Menütemplate hinter die Klasse einfach ein _{§page_alias} eingefügt habe.

Silpancho · 18. August 2014 05:09

hei hei ich bins mal wieder.

Ich bin grad mal wieder hinter dieser Seite mit dem farbigen Menü dahinter und habe grosse Probleme damit..

Die Seite sollte momentan zweisprachig umgesetzt werden, wobei ich das mit der Seiten-Struktur löse (also 1. es 1.1 ... 1.2... 1.2.1 .... 2. de 2.1 .... usw usf, wie im Thread von Nogga beschrieben). Das Umstellen wär auch kein Problem, aber das Menü mackt jetzt ganz schön rum. Irgendwie werden die Formatierungen der Klassen .p1, .p2 (wie von Nockenfell weiter oben beschrieben) usw nicht mehr "gefunden" und es bleiben nur die Formatierungen des Menüs an sich.

Eine Manipulation des Menütemplates fruchtete nicht, aber auch nicht das Ausprobieren wohl aller möglichen ul-li-a-Kombinationen im Styleshee an den Klassen .p1-.p6...
Und um den Betrieb der Seite nicht zu gefährden hab ich alles wieder wie vorhin eingestellt, aber das löst mein Problem natürlich noch nicht.

Hat jemand eine Idee wie ich die Formatierungen wieder hinkriege, da alle Menüpunkte eine Stufe nach unten gerutscht sind? Vielleicht im Template oder vielleicht beim Ansprechen der Klassen im Stylesheet?

Ich hoffe mein Problem verständlich geschildert zu haben und hoffe auf rasche Hilfe. Vielleicht von Nockenfell selbst?
Besten Dank im voraus

NaN · 18. August 2014 09:12

Die Idee mit den p1 ... p[n]-Klassen hat einen Haken:

Hier klicken, um den Code zum Kopieren zu markieren

{elseif $node->depth == '1'}
<li class="p{$node->hierarchy}">

Es wird auf die Hierarchie des jeweiligen Menüpunktes zugegriffen.
Das mag funktionieren, solange die Menüpunkte in der ersten Ebene liegen.
Wenn Du jetzt aber alle Menüpunkte eine Hierarchie-Ebene weiter setzt, dann würde aus der ursprünglichen Klasse "p1" -> "p1.1" werden. Das wird allerdings mit dieser if-Abfrage ($node->depth == 1) abgefangen. Dadurch bekommen die Menüpunkte, die du eigentlich im CSS ansprechen willst, überhaupt keine p[n]-Klasse.

Ändere mal die Abfrage nach $node->depth == 1 auf $node->depth == 2.
Dann erhalten sie die Klasse(n)
p1.1, p1.2, p1.3 ... p1.n (für Spanisch)
p2.1, p2.2, p2.3 ... p2.n (für Deutsch)
etc.
Dann kannst Du im Stylesheet so darauf zugreifen:

Hier klicken, um den Code zum Kopieren zu markieren

ul li[class$=".1"]
ul li[class$=".2"]
ul li[class$=".3"]
...
ul li[class$=".n"]

nockenfell · 18. August 2014 09:32

Eine andere, schönere Variante sind die nth-Child Möglichkeiten von Stylesheets.
Siehe z.B. http://bit.ly/1AqOrmG

http://css-tricks.com/how-nth-child-works/

Janl · 18. August 2014 12:14

Mal eine Idee.
Als Seitenspezifische Smarty ein assign von eine variabele die dann als class in Menümanager genutzt wird.
Habe leider momentan zu wenig Zeit es zu probieren.

mfg
Jan

Leider geht nicht

Beitrag geändert von Janl (18. August 2014 17:24)

NaN · 18. August 2014 14:00

nth-Child

Bah.
Viel zu einfach wink

nockenfell · 18. August 2014 15:52

NaN schrieb:

nth-Child
Bah.
Viel zu einfach

big_smile

Silpancho · 18. August 2014 16:21

hei das ging ja schnell! Schon toll wenn man auf eine Profi-Community zählen kann, die dann auch noch allzeit bereit steht!
*Daumenhoch*

Ich werd die Lösungsvorschläge dann zu nächtlicher Stunde mal ausprobieren und gebe dann Bescheid wies lief.

Mit $node->depth == '2' hab ich auch rumprobiert, doch wie ich die Klassen anspreche wusste ich nicht, danke NaN.

falls das dann nicht hilft probiere ich noch die "einfache" Variante cool

Merci villmal
Silpancho

Forum für CMS/made simple

#1 06. Juni 2013 03:02

MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#2 06. Juni 2013 06:10

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#3 06. Juni 2013 15:15

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#4 06. Juni 2013 15:40

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#5 18. August 2014 05:09

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#6 18. August 2014 09:12

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#7 18. August 2014 09:32

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#8 18. August 2014 12:14

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#9 18. August 2014 14:00

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#10 18. August 2014 15:52

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

#11 18. August 2014 16:21

Re: MenuManager: mehrfarbiges Dropdown-Menu umsetzen?

Fußzeile des Forums