[gelöst] Menu-Manager: Image als Listenpunkt anfügen

antibart · 12. September 2011 09:57

Hallo Gemeinde,

Ohne css3 sind teiltransparent schattierte, abgerundete, überlappende Menüs eine kleine Herausforderung.

Ich habe hier ein hover-Menü mit all diesen Eigenschaften, welches in der statischen Version schon alles so macht, wie es soll.

Damit das Untermenu auf zweitem Level mit abgerundeten Ecken endet, habe ich in der statischen Version einfach einen zusätzlichen Listenpunkt mit einem Image ans Ende der Liste angefügt.

So sieht dann die Ausgabe aus:

<ul>
<li><a href="..">Leistungen
<ul>
<li>Inhalte</li>
<li>Angebote</li>
<li>Projekte</li>
<li> <img src="images/runde-ecken.jpg" /></li>
</ul>
</li>
..usw
</ul>

Nun muss ich das Menütemplate dazu bringen, das gleiche automatisch zu erledigen. Meine Smarty-Kenntnisse bewegen sich nach wie vor gern mal auf einer Trail-and-Error-Ebene..

Hier mein Template (ist glaube ich noch so ziemlich das Standard-Minimal-Template):

---------------------------------------------

{* 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->current == true}
<li><a class="currentpage" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->menutext}</a>{elseif $node->parent == true}<li class="activeparent"><a class="activeparent" href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>{$node->menutext}</a>
{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}
{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> |
{else}
<li><a href="{$node->url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>{$node->menutext}</a>{/if}{/foreach}{repeat string="</li></ul>" times=$node->depth-1}</li>
</ul>
{/if}

-------------------------------------------------

Beitrag geändert von antibart (13. September 2011 06:56)

nicmare · 12. September 2011 11:28

warum arbeitest du nicht einfach mit first und last? dann kannste dir dsa bild im quelltext sparen. ist eh nicht gerade elegant:

Hier klicken, um den Code zum Kopieren zu markieren

{foreach from=$nodelist item=node name=foo}
…
<li class="{if $smarty.foreach.foo.first} first{elseif $smarty.foreach.foo.last} last{/if}>

antibart · 12. September 2011 12:10

Hi - erstmal vielen Dank ...

nicmare schrieb:

warum arbeitest du nicht einfach mit first und last?

Einfache Antwort: weil ich zu doof bin. wink

Ich kenne wohl diesen alten Thread mit first and last. Das ist schon mal ne Hilfe, aber für meinen Status noch zu ungenau:

Ich habe mit deinem Codeschnipsel rumprobiert. Ich glaube zunächst, er müsste eher so aussehen:

Hier klicken, um den Code zum Kopieren zu markieren

<li class="{if $smarty.foreach.foo.first}first {elseif $smarty.foreach.foo.last}last{/if}">

Dann :Das Attribut "name"... ist das zwingend notwendig?

Wo genau würdest Du ihn für meine Anwendung platzieren? Bislang kommt einiges Chaos zustande eine class "first" wird zwar eingefügt (beim gerade aktiven Link), last aber nicht.

Beitrag geändert von antibart (12. September 2011 12:10)

NaN · 12. September 2011 12:23

antibart schrieb:

Dann :Das Attribut "name"... ist das zwingend notwendig?

Ja, weil das ganze sonst nicht funktioniert.

Wo genau würdest Du ihn für meine Anwendung platzieren? Bislang kommt einiges Chaos zustande eine class "first" wird zwar eingefügt (beim gerade aktiven Link), last aber nicht.

Na überall dort, wo ein Listenpunkt ausgegeben wird.
Also bei allen Listenpunkten die Du im Menü-Template finden kannst.

antibart · 12. September 2011 13:53

Ok - ich habe es einfach in jeden Listenpunkt des Templates eingefügt.

Das funktioniert zwar - aber nur im vertikalen Hauptmenü. Dort brauche ich die Klassen nicht.

Ich brauche es im Submenü. Es handelt sich hierbei ja - wie man an der Grafik sehen kann - um eine verschachtelte Liste (und ein hover-Aufklapp-Menü)

Beitrag geändert von antibart (12. September 2011 14:05)

NaN · 12. September 2011 14:18

Ach ja, verdammt.
Ganz vergessen, dass das so nicht für verschachtelte Listen geht, weil die Elemente ja im Template alle hintereinander weg linear abgearbeitet werden. Der müsste bei jedem Untermenü wieder von vorne anfangen zu zählen. Mit first/last wird das hier nicht gehen. Du müsstest an dieser Stelle prüfen, ob beim nächsten Element $node->depth kleiner ist als beim aktuellen. Dann weißt Du dass das aktuelle Element das letzte in seiner Hierarchie sein muss. Da wirst Du aber um einen Zähler nicht herum kommen.
Bsp.:

Hier klicken, um den Code zum Kopieren zu markieren

{foreach from=$nodelist item="node"}
{counter assign="next_item_index"}

...

<li class="{if (isset($nodelist[$next_item_index]) && $nodelist[$next_item_index]->depth < $node->depth) || !isset($nodelist[$next_item_index])}last{elseif $node->prevdepth > 0 && $node->prevdepth < $node->depth}first{/if}">

Klappt aber auch wieder nicht, wenn es mehr als zwei Ebenen sind. Weil, wenn das letzte Element in einer Hierarchie noch untergeordnete Seiten hat, wird es nie die Klasse 'last' erhalten. Man kann aber auch nicht pauschal prüfen, ob $node->depth des nächsten Elements kleiner oder größer ist, weil dann alle Menüpunkte die Unterpunkte haben, die Klasse 'last' erhalten würden. Ist schwierig, das rein mit Smarty zu lösen.

antibart · 12. September 2011 14:32

Schwirrr ...

Im Moment noch ein Syntax-Error:

string(151) "Smarty error: [in module_db_tpl:MenuManager;hover line 20]: syntax error: unbalanced parenthesis in if statement (Smarty_Compiler.class.php, line 1277)"
Parse error: syntax error, unexpected ':' in /homepages/.../tmp/templates_c/efe27d4d7d477cf315175e18807fef90^%%17^177^177736FC%%module_db_tpl%3AMenuManager%3Bhover.php on line 24

Beitrag geändert von antibart (12. September 2011 14:32)

NaN · 12. September 2011 14:35

Da fehlt ein {/if} oder ist eins zu viel.

NaN · 12. September 2011 14:36

Nee, da fehlt ne klammer. sory mein fehler. habs korrigiert

antibart · 12. September 2011 14:51

NaN schrieb:

Nee, da fehlt ne klammer. sory mein fehler. habs korrigiert

Jou .. hatte es schon gefunden. Dennoch danke.

Ist noch nicht das Wahre, wie du schon sagst. Es werden keinerlei first/last-Klassen erzeugt.

War mein ursprünglicher Gedanke, dem Submenü über das Menütemplate einen Listenpunkt mit Image "anzuhängen", wirklich so unelegant? Es wird zugegeben eine Zeile mehr html-Code produziert - dafür weniger css-code.

Einen Zähler bräuchte aber sicher auch dafür.

Hat es einen Grund, warum für diese Lösung kein name-Attribut nötig ist?

Beitrag geändert von antibart (12. September 2011 16:27)

otter24 · 12. September 2011 17:36

Moin
sonst schau dir mal das NCleanBlue Template an im Menutemplate wirst du sehen das dort ein Listenpunkt mit einer Klasse vor den schließenden UL tag rein geschrieben wurde. das sieht so aus.

Hier klicken, um den Code zum Kopieren zu markieren

{repeat string='</li><li class="separator once" style="list-style-type: none;">&nbsp;</li></ul>' times=$node->depth-1}

Gruß

nicmare · 12. September 2011 18:52

lass das first und last doch in jedem item auftauchen. mit css kannst du es doch dann ansprechen:
ul li {
…}
ul ul li.first {
background:url(…)};
ul ul li first ul li {
background:none};

einfach ein wenig kreativ sein… ;-)

antibart · 13. September 2011 06:49

nicmare schrieb:

lass das first und last doch in jedem item auftauchen. mit css kannst du es doch dann ansprechen:

... das ginge eventuell - würde dann allerdings meiner Vorstellung von Eleganz widersprechen. Der css-code für das Menü nimmt durch den hover-klappaufundzu bereits 2/3 des Gesamtcodes in Anspruch.

ABER:

otter24 schrieb:

schau dir mal das NCleanBlue Template

GE-NI-AL der Tipp, mein Lieber. Haargenau das habe ich gesucht.

Wie oft bei CMSMS lag die Lösung bereits fertig gebastelt in einem Template nur 20px weiter unten. Gut, dass es noch Förster gibt, die ihren Wald und die Bäume kennen.

Allen anderen dennoch vielen Dank für die Anteilnahme. Zusätzliche Klassen wie "first/last" im 1. Level könnten mir später in diesem Projekt durchaus auch noch nützlich werden - wenn nämlich der erste oder der letzte obere Menüpunkt irgendwann Unterpunkte bekommen sollte, brauche ich dort wieder andere Styles (wg des "Schattenendes" und der runden Abschlusskanten). Insofern waren die Hinweise durchaus sinnvoll.

Beitrag geändert von antibart (13. September 2011 13:55)

Forum für CMS/made simple

#1 12. September 2011 09:57

[gelöst] Menu-Manager: Image als Listenpunkt anfügen

#2 12. September 2011 11:28

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#3 12. September 2011 12:10

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#4 12. September 2011 12:23

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#5 12. September 2011 13:53

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#6 12. September 2011 14:18

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#7 12. September 2011 14:32

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#8 12. September 2011 14:35

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#9 12. September 2011 14:36

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#10 12. September 2011 14:51

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#11 12. September 2011 17:36

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#12 12. September 2011 18:52

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

#13 13. September 2011 06:49

Re: [gelöst] Menu-Manager: Image als Listenpunkt anfügen

Fußzeile des Forums