CSS-Menü aus Online-Generatoren einbinden

[m266]

Hallo,

ich suche nun seit Stunden (auch im Forum) nach einer Lösung und komme nicht weiter.
Im Netz gibt es diverse CSS-Generatoren (Online und als Programm), welche schöne CSS-Menüs erzeugen. Dabei werden in der Regel drei Dateien erstellt:
-HTML
-CSS
-Bild(er)

Die weiteren Seiten/Unterseiten muss man angeben und diese werden als Link eingefügt.

Meine Frage nun:
Wie bekomme ich so ein CSS-Menü in mein Layout rein? Habe auch schon diverse Versuche mit dem MenüManager erfolglos unternommen. Muss zugeben, dass ich beim MM etwas im Nebel herumlaufe.

Für eure Hilfe wäre ich sehr dankbar.


Gruß m266

[excalibur77]

Hi,

musst Du wohl eines der Templates aus dem Menü - Manager anpassen oder, was umständlicher ist, die Vorgaben eines Templates auf Dein Stylesheet anwenden. Leider weiß ich nicht, wie Deine Navi aussehen soll und kann Dir auch kein Template empfehlen. Das Template cssmenu dürfte wohl in den meisten Fällen funzen. Findest Du in Modules / Menu Manager / Templates.

HG
exc

[m266]

Hallo,

am Template cssmenu habe ich schon rumgeschraubt. Das ist kein Problem.
Mir geht es darum, wie ich ein generiertes CSS-Menue einfügen kann. Soweit ich das erkenne, werden damit nur CSS für statische Seiten erzeugt. Ich möchte aber die automatische Generierung von CMSMS benutzen.

Gruß m266

[cyberman]

Poste doch mal einen Link zu deinem Lieblings-CSS-Online-Generator - dann kann man es sich mal besser anschauen .

Normalerweise sollte die mitgelieferten MM-Templates einen Großteil aller Menüs abdecken. Da brauchst du nix daran rumzuschrauben. Den Unterschied macht einzig und allein die CSS.

[m266]

Hallo,

hier ein Beispiel für eine CSS-Navigation:
http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

Wie so was in CMSMS umzusetzen ist, weiß ich leider nicht.


Gruß m266

[NaN]

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.

[m266]

Hallo NaN,

danke für deine Hilfe. Ich werde alles testen und wieder berichten. Wenn ich es richtig verstanden habe, ist diese Navigation nur für zwei Ebenen geeignet. Ist das so und was müsste ggf. für weitere Ebenen angepasst werden?


Gruß m266

[cyberman]

Habs mal mit einem etwas anderen MM-Template nachgebaut

http://test.cmsmadesimple.de/index.php? ... -optimizer

[m266]

Hallo Cyberman,

sieht gut aus. Lässt sich die Steuerleiste oben (Menu actions) auch ausblenden? Ohne CMSMS habe ich das auch schon hinbekommen, aber ich möchte wie schon erwähnt auch "fremde" Navi´s mit CSS einbinden.

Auf der Seite http://www.dynamicdrive.com/style/cssli ... ical-menu/ befindet sich ein Beispielmenü. Ich gehe davon aus, dass hier der Aufwand zur Integration und für weitere Ebenen nicht so groß ist. Kann man ein Standard-Template des MM benutzen und die im Link erwähnte Navi nachbauen?

Gruß m266

[NaN]

Habs mal mit einem etwas anderen MM-Template nachgebaut

@cyberman:
Wie hast Du es hinbekommen, dass der MM die Trigger und die zugehörigen Links ein einem anzeigt, ohne das Ganze einem Seperator (oder was auch immer) unterzuordnen?
Und wo hast Du das Template für das Menü?
Das Thema Slidemenüs und ähnliche Effekte in einem CMS einzubauen reizt mich schon seit Längerem.

Wenn ich es richtig verstanden habe, ist diese Navigation nur für zwei Ebenen geeignet. Ist das so und was müsste ggf. für weitere Ebenen angepasst werden?

@m266:
Hab mein Beispiel erstmal nur für zwei Ebenen ausgelegt.
Habs allerdings noch nicht für mehrere Ebenen getestet. Gut möglich, dass es trotzdem funktioniert.
Probiers doch einfach aus und verrate uns Dein Ergebnis
Ich weiß allerdings nicht, ob es bei mehreren Ebenen für den Benutzer noch so übersichtlich bleibt.
Außerdem wird es bei meinem Beispiel bei mehreren Ebenen auch im Backend recht unübersichtlich, weil jeder Menüpunkt, der ein Untermenü aus- oder zusammenklappen soll, ja kein Link auf eine Seite mit Inhalt, sondern nur ein "Javascript-Schalter" ist (der dann wieder nur ein Untermenü auf- bzw. zusammenklappt), dem dann wieder Mnüpunkte folgen...
Da bleibt die Frage, inwiefern eine inhaltliche Verschachtelung in mehrere Ebenen bei einem solchen Menü überhaupt sinnvoll bzw. nötig ist.

[cyberman]

Wie hast Du es hinbekommen, dass der MM die Trigger und die zugehörigen Links ein einem anzeigt, ohne das Ganze einem Seperator (oder was auch immer) unterzuordnen?

Es ist eine Unterordnung vorhanden - die dahinterliegende Struktur ist folgende

1. Online Tools (SectionHeader)
1.1 Image Optimizer (Content)
1.2 FavIdon Generator (Content)
usw.

Und wo hast Du das Template für das Menü?

Hier

Code: Select all

{if $count > 0}
{foreach from=$nodelist item=node}
{if $node->depth < $node->prevdepth}
{repeat string="</div>" times=$node->prevdepth-$node->depth}
{/if}

{if $node->current == true}
<a href="{$node->url}"> {$node->menutext} </a>

{elseif $node->type == 'sectionheader'}
<div><span>{$node->menutext}</span>

{else}
<a href="{$node->url}"> {$node->menutext} </a>

{/if}
{/foreach}

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

Ist zwar vllt. etwas unorthodox und zielorientiert, aber es funktioniert.

[cyberman]

Lässt sich die Steuerleiste oben (Menu actions) auch ausblenden?

Klar doch - schon erledigt .

Kann man ein Standard-Template des MM benutzen und die im Link erwähnte Navi nachbauen?

Guckst du hier

http://test.cmsmadesimple.de/index.php? ... script-kit

Hab im minimal_menu Template lediglich die Klasse clearfix gegen glossymenu ausgetauscht ...

[NaN]

Ist zwar vllt. etwas unorthodox und zielorientiert, aber es funktioniert.

Und sieht auch wesentlich übersichtlicher aus