"Einfaches" CSS-Menü mit dem MenuManager erstellen! Topic is solved

[der_marc]

Hallo zusammen!

Ich bin vor ein paar Tagen bei der Suche nach einem einfachen CMS hier bei CMSMS gelandet und nach dem ersten ausprobieren muss ich wirklich sagen, dass sich das entgegen TYPO3 wirklich als Urlaub darstellt

Trotzdem habe ich ein Problem, ein einfaches Menü umzusetzen, dass dann hinterher mit CSS formatiert wird. Bei der Dokumentation bin ich nicht wirklich fündig geworden, wie ich ein ganz simples Menü mit einer Ebene und Icons erstellen kann.

Ich würde mich freuen, wenn mir jemand beim Umsetzen folgendes HTML-Codes helfen könnte:

Code: Select all

<ul>
	<li><a href="index.php?page=home"><img src="asset/home.png" />Start</a></li>
	<li><a href="index.php?page=schule"><img src="asset/schule.png" />Schule</a></li>
	<li><a href="index.php?page=aktivitaeten"><img src="asset/aktivitaeten.png" />Aktivitäten</a></li>
	<li><a href="index.php?page=schuelerforum"><img src="asset/schuelerforum.png" />Schülerforum</a></li>
	<li><a href="index.php?page=gaestebuch"><img src="asset/gaestebuch.png" />Gästebuch</a></li>
	<li><a href="index.php?page=kontakt"><img src="asset/kontakt.png" />Kontakt</a></li>
	<li class="last"><a href="index.php?page=foerderverein"><img src="asset/foerderverein.png" />Förderverein</a></li>
</ul>

Besonderheiten (wenn man sie so nennen möchte) sind einmal die Icons die mit eingebunden werden sollen, je nach Menüpunkt halt ein anderes, welches (vermutlich der Einfachheit halber) den Namen der Seite trägt. Und zum anderen müsste das letzte LI im Menü die Klasse "last" zugewiesen bekommen.

Ich habe leider wie gesagt nichts gefunden, was ich irgendwie für mich verwerten konnte. Hat jemand einen Tipp für mich? Das wäre echt prima!


Beste Grüße aus dem Ruhrgebiet!


Marc.

[cyberman]

Hallo Marc,

willkommen bei CMS made simple.

Trotzdem habe ich ein Problem, ein einfaches Menü umzusetzen, dass dann hinterher mit CSS formatiert wird.

Eigentlich sollte sich das mit dem MenüManager-Template "simple-navigation.tpl" umsetzen lassen, wie du evtl. schon in der CMSms-Musterinstallation gesehen hast.

Bei der Dokumentation bin ich nicht wirklich fündig geworden, wie ich ein ganz simples Menü mit einer Ebene und Icons erstellen kann.

Für diese spezielle Frage gibts auch noch keine Doku in deutsch  .

Hat jemand einen Tipp für mich? Das wäre echt prima!

Guckst du hier

http://wiki.cmsmadesimple.org/index.php ... with_icons

[der_marc]

Huch, da stand doch gerade noch mehr Text mit Codebeispiel in Deiner Antwort!?

Hallo Marc,

willkommen bei CMS made simple.

Herzlichen Dank! Hab ja vorab schon gelesen, dass sich eine sehr freundliche Community um CMS made simple gebildet hat, was sich hiermit bestätigt!


Das Codebeispiel was hier vorhin zu lesen war funktioniert schon mal prächtig! Den Alias-Tag kannte ich noch nicht, aber der macht die Grafikeinbindung wirklich einfach und unkompliziert.
Allerdings wird mit Deinem Beispiel, welches ich gleich nochmal etwas abgewandelt hier hinzufüge das letzte LI noch nicht mit der Klasse "last" gerendert...

Soweit ich weiß ist das Smarty-Code, in dem die Menüs geschrieben werden, oder? Damit kenn ich mich leider gar nicht aus... :-/ Jedenfalls hier nochmal das aktuelle Menü-Template, welches schon die Grafiken vernünftig einbindet:

Code: Select all

{* 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 id="currentpage" {if $count eq 1}class="last"{/if}><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}><img src="uploads/asset/{$node->alias}.png" />{$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}><img src="uploads/asset/{$node->alias}.png" />{$node->menutext}</a>

{elseif $node->type == 'sectionheader'}
<li class="sectionheader">{$node->menutext}

{elseif $node->type == 'separator'}
<li class="separator" style="list-style-type: none;"> <hr />
{else}
<li {if $count eq 1}class="last"{/if}><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}><img src="uploads/asset/{$node->alias}.png" />{$node->menutext}</a>

{/if}

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

[cyberman]

Allerdings wird mit Deinem Beispiel, welches ich gleich nochmal etwas abgewandelt hier hinzufüge das letzte LI noch nicht mit der Klasse "last" gerendert...

Hmm, bin auch nicht der Smarty-Freak  - man könnte jedoch die Variable "Beschreibung/Titelattribut" (bei der Seitenerstellung im Menü Optionen) als Namensgeber für die CSS-Klasse "mißbrauchen". Allerdings wird dieses Feld dadurch für alles andere unbrauchbar.

Schreib dort nur auf der letzten Seite "last" ein und ändere den Code wie folgt:

{* 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}

{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}
{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}

{if $node->current == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} class="{$node->titleattribute}"{/if}>alias}.png" />{$node->menutext}

{elseif $node->parent == true}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} title="{$node->titleattribute}"{/if}>alias}.png" />{$node->menutext}

{elseif $node->type == 'sectionheader'}
{$node->menutext}

{elseif $node->type == 'separator'}

{else}
url}"{if $node->accesskey != ''} accesskey="{$node->accesskey}"{/if}{if $node->tabindex != ''} tabindex="{$node->tabindex}"{/if}{if $node->titleattribute != ''} class="{$node->titleattribute}"{/if}{if $node->target != ''} target="{$node->target}"{/if}>alias}.png" />{$node->menutext}

{/if}

{/foreach}
{repeat string="" times=$node->depth-1}

{/if}

Soweit ich weiß ist das Smarty-Code, in dem die Menüs geschrieben werden, oder?

Yep.