Simple Menu => unterschiedliche Farbe für Menupunkte

[leerraum]

Hi,

ich hab folgendes Szenario:

In einem simplen Menu, sollen die ersten fünf Menupunkte (welches aber alles Kinder eines Menupunkts X sind), in einer jeweils unterschiedlichen, definierten Farbe angezeigt werden. Jeder der Menupunkte hat noch eine Hierarchieebene unter sich, also Kinder.

Beispiel:
Menupunkt 1 => Rot
Menupunkt 2 => Blau
Menupunkt 3 => Grün
...
Menupunkt 6 und folgende => Grau

Dem eingeklappten Menu kann ich Farben zuweisen, aber wenn ich das Menu ausklappe, dann wird nach dem geklickten Menupunkt nichts mehr farbig dargestellt. Für jede Farbe habe ich eine eigene CSS Klasse erstellt. Ich bin bis jetzt soweit gekommen:

Code: Select all

{* CSS classes used in this template:
.currentpage - The active/current page
.bullet_sectionheader - To style section header
hr.separator - To style the ruler for the separator *} 
{if $count > 0}
<ul class="clearfix">
{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->index < 1 && $node->depth==1}
<li><a class="element0" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index < 2 && $node->depth==1}
<li><a class="element1" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index < 3 && $node->depth==1}
<li><a class="element2" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index < 4 && $node->depth==1}
<li><a class="element3" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $node->index < 5 && $node->depth==1}
<li><a class="element4" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->current == true}

<li><a href="{$node->url}" class="currentpage"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->parent == true && $node->depth == 1 and $node->type != 'sectionheader' and $node->type != 'separator'}
<li class="activeparent"> <a href="{$node->url}" class="activeparent"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
{if $node->hierarchy != 1}
				</ul>
{/if}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
{if $node->type != 'sectionheader' and $node->hierarchy == 1}
				<ul class="submenu">
{/if}
<hr class="separator" />
<ul class="submenu">
{else}
{if $node->depth==1}
<li ><a style="color: #FFF;text-decoration: none;padding: 0 60px 0 6px;height: 16px;line-height: 16px;margin: 0 0 12px 0;background-color: #707173;" href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{else}
<li ><a href="{$node->url}"{if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{/if}

{/if}

{/foreach}

{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

Oder anders formuliert: die ersten fünf Menupunkte einer bestimmten Hierarchieebene sollen eine jeweils unterschiedliche Farbe haben
Hat da jemand einen Tipp wie man das realisieren kann?

Vielen Dank
leerraum

[nockenfell]

Die Unterpunkte solltest du alle über das CSS ansteuern können.

Code: Select all

a.element0 li li a {}
a.element1 li li a {}
a.element2 li li a {}

etc.

[leerraum]

eh, ja, ne, ist richtig, aber ich meinte es anders.

das problem ist:

Menupunkt 1
- Sub 1
- Sub 2
- Sub 3

Menupunkt 2

.element0 soll Menupunkt 1 zugewiesen werden, .element1 soll Menupunkt2 zugewiesen werden, etc. bis .element4. Die restlichen Menupunkte > 4 dürfen dann einheitlich aussehen. Der Index des MenuManager Moduls zählt aber die Subemenupunkte durch, und ist bei Menupunkt 2 schon auf 4 (oder 5, zählt der von Null aus?).
Die Submenupunkte bekommen dann jeweils ein Greyelement

Ich könnte das ganze auch über ne Alias abfrage machen, aber wenn dann jemand den Seiten Alias ändert, bricht die Sache zusammen. Eine weitere Möglichkeit wäre 2 Menutags im Template zu verbauen, und jedem ein extra Menutemplate zuzuweisen. Das ist aber irgendwie auch nicht grade eine schöne Lösung.

[nockenfell]

Alles klar.

Richte einen Zähler ein z.B. $i

Bei Hauptpunkten zählst du zu $i einen Zähler hinzu: ++$i;
Wenn $i 4 erreicht, bringst du nur noch den normalen Menüpunkt

Code: Select all

if $node->index < 1 && $node->depth==1}
{++$i}
{if $i == 0}<li><a class="element0" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $i == 1}<li><a class="element1" href="{$node->url}" {if $node->target ne ""} target="{$node->target}"{/if}> {$node->menutext} </a>
{elseif $i==2} .....

Der ganze Code ohne Gewähr. Ich habe bisher zuwenig Smarty Programmiert als das ich hier Sattelfest bin. Dies nur als Gedankenanstoss

[cyberman]

Du könntest auch die Hierarchie kombiniert mit einem Modifikator als Selektor verwenden ...

Code: Select all

$node->hierarchy|substr:1:1

Das sollte dir den Wert der root-Hierarchie ausgeben. Da braucht es keinen separaten Zähler .