CMS Made Simple Demonstrationsseite

Einfache Navigation oben + Unternavigation links + 1 Spalte

Mit dem MenüManager können Sie Ihre Navigation ganz einfach in zwei Teile auftrennen. Auf dieser Seite wird die oberste Ebene der Seitenhierarchie horizontal angezeigt. In Abhängigkeit davon werden die jeweils untergeordneten Menü-Einträge links vertikal angezeigt.

Der {menu} Tag

Der {menu} Tag wurde zwei Mal in das Template dieser Seite eingefügt. Das erste Mal für die Hauptnavigation, die nur die oberste Hierarchie-Ebene anzeigen soll. Der Aufruf dafür lautet wie folgt: {menu template='simple navigation' number_of_levels='1'}.

In der untergeordneten Navigation soll nur die zweite Hierarchie-Ebene und tiefer angezeigt werden, jeweils in Abhängigkeit davon, was in der ersten Ebene ausgewählt wurde. Auch die Links der dritten Hierarchie-Ebene werden nur dann angezeigt, wenn die übergeordnete Seite der zweiten Ebene geklickt wurde. Ansonsten bleibt die dritten Ebene verborgen. Dieses Verhalten wird über den Parameter collapse gesteuert.

Der Aufruf für die untergeordnete Navigation lautet wie folgt: {menu template='simple navigation' start_level='2' collapse='1'}.

Die dem Menü zugewiesenen Stylesheets

Da die Hauptnavigation und die untergeordnete Navigation unterschiedlich gestaltet werden müssen (eine horizontal, die andere vertikal), wurden diesem Seiten-Template zwei Navigations-Stylesheets zugewiesen. Mit Navigation: Simple - Horizontal wird das horizontale Menü gestaltet, Navigation: Simple - Vertical ist für das Aussehen der Unternavigation links verantwortlich.

Beide verwenden das gleiche MenüManager-Template

Wie Sie sehen konnten, verwenden beide Teile der Navigation das gleiche MenüManager-Template. Der Grund dafür ist einfach - der ausgegebene Code ist der selbe. Allein durch CSS wird den beiden Teilen ein unterschiedliches Aussehen verliehen.

Das untergeordnete Menü rechts vom Inhalt anzeigen

Sie können die Unternavigation ganz einfach auf der rechten Seite anzeigen lassen. Suchen Sie im Stylesheet Layout: Top menu + 2 columns im Element div#sidebar nach der Eigenschaft float: left;. Ändern Sie diese in float: right; und das Menü wird nun anstatt dessen rechts vom Inhalt angezeigt.