Also bei so einem Menü muss man natürlich mehr als nur das CSS anpassen.
Wenn ich mir das Java-Script dazu anschaue... werd ich nicht besonders schlau daraus.
Ich hab's irghendwie verpennt mir diese Art des Syntax anzueignen. Sonst hätte ich das Script einfach an die Ausgabe des MenuManagers anpassen können.
Das Problem bei einem derartigen Menü ist, dass Du die inhaltliche Struktur vergessen kannst.
Die Menüpunkte sind bei dem von Dir genannten Besipiel laut Markup alle gleichberechtig in einer Ebene. Da gibt es keine wirkliche Hierarchie der Menüpunkte.
Der Menumanager versucht aber ein logisch strukturiertes Menü aus Deiner Seite aufzubauen:
Bsp:
1 Seite 1
1.1 Unterseite 1
1.2 Unterseite 2
...
2 Seite 2
2.1 Unterseite 1
2.2 Unterseite 1
...
Diese Hierarchie wird erreicht durch in sich verschachtelte Listen.
Eben wie ein ordentliches Inhaltsverzeichnis (und nichts anderes
ist ein Menü eigentlich).
Das JavaScript für Dein Slidemenu benötigt aber ein Menü, dass so aufgebaut ist:
Erste Menügruppe
1 Hauptlink
2 Unterlink 1
3 Unterlink 2
...
Zweite Menügruppe
1 Hauptlink
2 Unterlink 1
3 Unterlink 2
...
Das ist zwar nicht logisch, aber anders scheint es mit diesem JavaScript nicht zu funktionieren.
Demzufolge musst Du Deine Seite inhaltlich so gestalten, dass der Menumanager in der Lage ist, die Menüpunkte entsprechend zu gruppieren.
D.h. Du musst Deine Seite folgendermaßen aufbauen:
1 Gruppe 1 (=Seperator; per CSS so formatieren, dass er nicht sichtbar ist; bsp.: display:none)
1.1 Menüpunkt der das Untermenü aufklappt (=Sectionheader; ist nämlich kein Link, sondern nur JS-Trigger)
1.2 Menüpunkt 1 (=Content)
...
2 Gruppe 2 (=Sectionheader; dito)
2.1 Menüpunkt der das Untermenü aufklappt (=Sectionheader)
2.2 Menüpunkt 1 (=Content)
...
usw.
Außerdem benötigst Du folgendes Menü-Template (ich hab's noch nicht rundum testen können, aber die ersten Versuche haben funktioniert):
Code: Select all
{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}
{repeat string="<div>" times=$node->depth-$node->prevdepth}
{elseif $node->depth < $node->prevdepth}
{repeat string="</div>" times=$node->prevdepth-$node->depth}
</div>
{elseif $node->index > 0}
{/if}
{if $node->current == true}
<a class="currentpage">{$node->menutext}</a>
{elseif $node->parent == true && $node->type != 'separator' && $node->type != 'sectionhader'}
<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'}
<span>{$node->menutext}</span>
{elseif $node->type == 'separator'}
<span class="separator" style="list-style-type: none;"> <hr /></span>
{else}
<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}</div>
{/if}
Zusätzlich musst Du in Deinem Template das Javascript sdmenu.js einbinden.
Außerdem musst Du noch ein Stylesheet erstellen, das Beispiel-CSS einfügen (und ggf. anpassen) und mit Deinem Template verknüpfen.
(CSS und Javascript findest Du auf der von Dir als Beispiel genannten Seite)
Die ID des in dem sich Dein Menü befindet muss mit der ID auf die sich das JavaScript beruft übereinstimmen. (Vgl. Script im der Beispielseite.)
Außerdem muss das noch die CSS-Klasse "sdmenu" haben.
Das Menu rust Du dann im Template mit {menu template="dein template name" collapse="0"} auf.
Wichtig: Das alles funktioniert
nicht bei tiefer verschachtelten Inhalten.
Falls es Probleme gibt oder ich irgendwas vergessen habe, einfach nochmal melden.
.