Dokumentation contentXXL CMS Version 5.2

Hauptnavigation

Modul Navigation Seiten

Öffnen Sie das Menü des Sitemanagers und wählen unter dem Bereich 'Redakteuer' das Menü 'Module' (Bild 1). Hier finden Sie auf der linken Seite alle Module, die Ihnen zur Verfügung stehen. Suchen Sie den Punkt "Navigation Seiten" (Bild 2). Sollten Sie bereits Module angelegt haben, können Sie diese auch jederzeit hier editieren.

Anlegen eines neuen Moduls "Navigation Seiten"

Klicken Sie zum Neuanlegen auf den Modulnamen "Navigation Seiten" (Bild 3). Vergeben Sie einen sprechenden Namen z.B. Haupnavigation oder Topnavigation und Klicken rechts oben auf den Aktionsbutton 'Erstellen'.

 



Die wichtigsten Einstellungen in diesem Bereich sind (Bild 4)
 
  • Der Modultitel extern/intern (haben wir bereits beim Erstellen des Moduls angegeben)
  • Modultitel nicht anzeigen ja/nein (wenn Sie beispielsweise den Modultitel als Überschrift verwenden möchten, können Sie beim Templaten einfach den Platzhalter hierfür verwenden und über CSS formatieren).
  • Modultitel-Template: Hier bestimmen Sie das Ausehen des Modultitels
  • Modultemplate: Damit überhaupt etwas aus dem Modul sichtbar wird müssen mindestens folgende Platzhalter enthalten in diesem Template sein:
     
    • Klicken Sie auf den kleinen Stift recht, legen ein kleines neues Template an, vergeben unter 'Basisdaten' einen Namen (z.B. default) und setzten im Bereich 'Layout' die Platzhalter [moduletitle][content]
    • Damit haben Sie übrigens Ihr erstes kleines Template in contentXXL geschrieben
       
  • Speichern Sie Ihre Veränderungen regelmäßig zwischen!

 



In dieser Karteikarte werden die Haupteinstellung vorgenommen. Auch hier die wichtigsten in Kürze (Bild 5):
 
  • Einstiegs-Menü-ID (tabid): Hier geben Sie die tabid an, an welcher Stelle, die Navigationspunkte ausgelesen werden sollen. Beispielsweise könnte Ihre interne Navigationsstruktur wie folgt aussehen:
     
    • Home (1)
    • Das Unternehmen (2)
      • Über uns (3)
      • Unternehmenszahlen (4)
      • Geschäftsberichte (5)
    • Presse (6)
    • Kontakt (7)

Soll Ihre Navigation im Web erst ab dem Punkt 'Das Unternehmen' sichtbar beginnen, tragen Sie in der Tabid einfach die 2 ein. Alles andere übernimmt das System automatisch. Die Nummer finden Sie leicht entweder in der angelegten Seite in der Seiteneinstellung ganz oben, oder in der Webansicht des Sitemangagers (Bild 6).
 

Komplett ausgeklappt? Ist diese Option gesetzt, wird die Navigation komplett ausgeklappt angezeigt, z.B. zur Implementierung einer Kategorie-basierten Sitemap (Taxonomie).

  • Header: Hier fängt der erste Codesnipe der Naviation an:
    • Klicken Sie wie gewohnt auf den kleinen rechten Stift, erzeugen ein neues Template für den Header, vergeben einen Templatenamen z.B. "Header Ebene 1" und tragen im Bereicht 'Layout' den Code <UL>[template_end]</UL> ein und speichern das Template ab.
    • Hinweis! Sollten Sie im Seitentemplate keine CSS-Klasse vor dem Navigationsmodul geschrieben haben, tragen Sie bitte hier die CSS-Klasse für das UL-Tag ein (<UL Class="ULNavigation">[template_end]</UL>
       
  • Footer: Hier werden wir die äußere Schleife des UL-Tags schließen:
     
    • Klicken Sie wie gewohnt auf den kleinen rechten Stift, erzeugen ein neues Template für den Header, vergeben einen Templatenamen z.B. "Footer Ebene 1" und tragen im Bereicht 'Layout' den Code <UL>[template_start]</UL> ein und speichern das Template ab.
    • Damit haben wir die äußere UL-Schleife ordentlich geschlossen
       
  • 1. Ebene: Da wir bei unserem Navigationsbeispiel im oberen Bereich nur eine Ebene anzeigen möchten, benötigen wir auch nur die erste Ebene des Navigationsmoduls. Wichtig!: Das Navigationsmodul lässt 10 Ebenen zu, die sich auf die im System angelegte Struktur bezieht. D.h.: Möchten Sie die zweite Ebene Ihrer Struktur für die Navigation auslesen, nehmen Sie Ihre Einstellungen in der 2. Ebene vor!
     
    • Klicken Sie wie gewohnt auf den kleinen rechten Stift, erzeugen ein neues Template für die Ebene 1, vergeben einen Templatenamen z.B. "Navigationseintrag Ebene 1" und tragen im Bereicht 'Layout' den Code <li><A  href="[url]">[title]</A></li> ein und speichern das Template ab.
    • [url] und [title] sind die Platzhalter, die das System automatisch mit korrekten Link und Navigationnamen versieht
    • die li-Tags können Sie wie gewohnt über CSS designen und die Klasse hier im 1. Ebene-Template hinzufügen: <li class="LINavigation"><A  href="[url]">[title]</A></li>
    • Die LIs werden automatisch durchlaufen bis die Strukturebene für die sichtbaren Navigationsnamen beendet ist.
    • Vorteil: Sie brauchen sich ab jetzt keine großen Gedanken mehr um Ihre Navigation machen. Sobald Sie neue Seiten in der Struktur anlegen, wird die Navigation automatisch vom System her on the fly neu berechnet.
       
  • 1. Ebene aktuelle Seite: Gehen Sie gewohnt vor und erstellen ein kleines Template für diese Besonderheit. Dieses Template wird aufgerufen, wenn ein Navigationspunkt geklickt wird und aktiv ist. Es macht beispielsweise daher Sinn eine CSS-Klasse 'active' hinzuzufügen, um diese Besonderheit darzustellen:
     
    • <li><a class="active">[title]</a></li>
    • In diesem Beispiel haben wir im Gegensatz zum Template 1. Ebene auf den Platzhalter [url] verzichtet, da es selten Sinn macht auf einen bereits aktivierten Navigationspunkt zu klicken, und eine CSS-Klasse 'active' hinzugefügt, die zum Beispiel den angeklickten Navigationspunkt 'fett' darstellt.
       
  • 1. Ebene Trennstring: Benötigen Sie noch einen Navigationstrenner z.B. | dann erzeugen Sie wie gewohnt ein kleines Template, das nichts anderes bewirkt, als nach dem Durchlauf der LI-Tags und vor dem /UL dieses Template noch auszuführen.

 



Ergänzen und Ändern Sie Ihr Seitentemplate mit den in fett markierten Stellen wie folgt:
 

<%@ Control %>
< %@ Import Namespace="AspNetPortal" %>
< script runat="server">
  Sub Page_Init(Byval sender As Object,ByVal e as EventArgs)
         'Module plazieren
         contentxxlhelper.addmoduletopane(4, topnavigation.Controls)   ' Seitenhauptnavigation
         contentxxlhelper.insertcontrol("~/portaldata/1/modules/headertop.ascx", page.findcontrol("headcontrols").controls) ' Scripts für den Headbereich
  End Sub
< /script>

Kurze Erklärung zum Codesnipe:

  • contentxxlhelper.addmoduletopane: Aufruf um ein Modul zu platzieren
  • 4: Modulnummer
  • Seitennavigation: ID-Name für das HTML, damit das Sytem weiß, wo dasNavigations- Modul eingeladen werden soll

Mit diesen ergänzenden Einstellungen weiß das System nun, dass Sie ein Modul mit der Modul-ID 4 laden wollen. Jetzt müssen wir noch die Stelle im HTML vorbereiten, wo das Modul platziert werden soll. Ändern Sie dazu Ihren Code wie folgt ab:

<div class="mainNav" id="topnavigation" runat="server">Alles was hier zwischen steht löschen!</div>

  1. Löschen Sie alles was zwischen den beiden divs steht. In der Regel sind das die ULs und LIs für die Navagition   
  2. Ergänzen Sie im DIV  id="topnavigation" (das ist der selbe Name, den wir für das Laden des Moduls mitgegeben haben)
  3. Ergänzen Sie den DIV um die Funktion runat="server"