Tutorialbeschreibung

Contao (Teil 20): Ein horizontales Menü aufbauen

Contao (Teil 20): Ein horizontales Menü aufbauen

Nachdem im vorherigen Video-Training ein vertikales Menü erstellt wurde, geht es jetzt – und das verwundert sicherlich wenig – um das Anlegen eines horizontalen Menüs. Ein solches Menü ist ideal, um es im oberen Fensterbereich anzuzeigen. Dort hinein packt man dann üblicherweise Hyperlinks wie Impressum, Kontakt usw. Im zweiten Teil dieses Tutorials geht es dann darum, wie sich ein sogenanntes Split-Menü umsetzen lässt. Dabei werden die Hauptmenüpunkte im Kopfbereich der Seite angezeigt. Klickt man einen dieser Einträge an, sind dessen Untereinträge beispielsweise in der linken Fensterspalte zu sehen. Auf diese Weise lassen sich komplexe Menüstrukturen aufbrechen und übersichtlich den Besuchern präsentieren.

... übrigens findest du die komplette Serie hier: CMS Contao – Video-Tutorial für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Der Einfachheit halber gehe ich an dieser Stelle davon aus, dass das Menü, das momentan links auf der Seite angezeigt wird, in den Kopfbereich der Seite wandert.

Bilder



Um dieses Menü geht es also. Die Einstellungen des betreffenden Moduls können zunächst unverändert bleiben. Ändert also nichts am Startlevel, Stoplevel usw.

 
Um das Modul in den Kopfbereich der Seite zu verschieben, ruft man Layout>Themes>Die Seitenlayouts des Themes>ID xx bearbeiten auf und öffnet das entsprechende Layout zum Bearbeiten über das Stiftsymbol. Entscheidend ist der Bereich Frontend-Module. Ändert hier den Wert der Hauptnavigation von Linke Spalte in Kopfzeile.

Bilder



 
Nachdem die Änderungen gespeichert wurden, liefert ein Blick ins Frontend der Seite ein erstes Ergebnis.

Bilder



 
Momentan wird das Menü allerdings noch nicht horizontal angezeigt. Um das zu ändern, muss man ins Stylesheet der Seite eingreifen. Eine entsprechende Anwendung könnte folgendermaßen aussehen:
#header .mod_navigation {
margin-top:30px;
}
#header .mod_navigation ul{
float:left;
list-style-type:none;
width:auto
padding::0;
margin:0;
}
#header .mod_navigation li{
float:left;
width:auto
margin:0;
}
#header .mod_navigation a,
#header .mod_navigation span{
display:block;
margin-right: 20px;
}

 
Ein erneuter Blick ins Frontend der Seite liefert das gewünschte Ergebnis.

Bilder



 
Die Einträge der obersten Ebene werden also schon mal wie gewünscht angezeigt. Wie sieht es aber mit den Untereinträgen von Tutorials aus? Das könnt ihr euch ansehen, wenn ihr auf Tutorials klickt.

Bilder



 
Daraus soll nun ein typisches Drop-down-Menü werden. Dabei werden die Untereinträge von Tutorials automatisch eingeblendet, sobald man mit dem Mauszeiger über Tutorials fährt. Dafür muss zunächst etwas in den Moduleinstellungen der Hauptnavigation geändert werden. Die entsprechenden Einstellungen dazu nimmt man unter Themes>Die Frontend-Module des Themes>ID xx bearbeiten vor. Klickt in der sich öffnenden Übersicht bei Hauptnavigation [Navigationsmenü] auf das Stiftsymbol. Entscheidend ist das Feld Stoplevel.

Bilder



Diesem Feld muss man den Wert 0 zuweisen. Übernehmt das mit Speichern und schließen. Wenn ihr jetzt das Frontend der Seite aufruft, ist Tutorials direkt mitsamt seinen Untereinträgen zu sehen.

 
Das ist natürlich noch nicht das gewünschte Endergebnis. Tatsächlich sollen die Untereinträge ja erst zu sehen sein, wenn man mit dem Mauszeiger über Tutorials fährt. Damit das funktioniert, muss etwas an der CSS-Syntax gefeilt werden.

Zunächst einmal muss man dafür sorgen, dass die Untereinträge nicht mehr sichtbar sind. Das lässt sich folgendermaßen bewerkstelligen:
#header .mod_navigation .level_2{
position:absolute;
left:-30000px;
top:left:-30000px;
overflow:hidden;
display:inline;
width:0;
height:0;
}

Lässt man sich jetzt das Frontend der Seite anzeigen, sind die Untereinträge von Tutorials schon mal verschwunden. Im nächsten Schritt müsst ihr für die Anzeige der Untereinträge sorgen, wenn mit dem Mauszeiger über Tutorials gefahren wird. Das lässt sich folgendermaßen umsetzen:
#header .mod_navigation li:hover .level_2{
left:auto;
top:auto;
overflow:auto;
display:block;
width:auto;
height:auto;
mind-width:80px;
}

 
Ein Blick ins Frontend der Seite zeigt, dass die Einträge jetzt tatsächlich angezeigt werden, wenn man mit dem Mauszeiger auf Tutorials zeigt.

Bilder



 
Die Einträge selbst stehen derzeit allerdings nebeneinander, was so natürlich völlig in Ordnung ist. Oftmals möchte man die Untereinträge aber tatsächlich auch untereinander anzeigen. Auch das lässt sich umsetzen.
#header .mod_navigation .level_2 li{
clear:both;
}

Und auch jetzt liefert das Frontend der Seite das gewünschte Ergebnis.

Bilder



 

Menüs kombinieren

Ihr wisst nun, wie sich vertikale und wie sich horizontale Menüs erstellen lassen. Was bislang allerdings noch nicht gezeigt wurde, ist die Kombination aus beiden Menüvarianten. So etwas ist jedoch eine ganz typische Anforderung an eine Navigationsstruktur. Stellt euch also vor, ihr habt im Kopfbereich der Seite das bekannte Menü horizontal eingebunden. Klickt man jetzt dort auf Tutorials, sollen die Untereinträge dieses Menüpunkts in der linken Fensterseite angezeigt werden.

Solche Anwendungen lassen sich in vielen anderen CM-Systemen oftmals nur über Umwege (wenn überhaupt) umsetzen. In Contao hingegen ist so etwas vergleichsweise einfach zu realisieren.

Ich gehe an dieser Stelle davon aus, dass im Kopfbereich der Seite das altbekannte Menü mit dem Menüeintrag Tutorials eingebunden ist.

Das Menü für die linke Spalte, in dem letztendlich die Untereinträge von Tutorials angezeigt werden, muss erstellt und konfiguriert werden. Ruft dazu Themes>Die Frontend-Module des Themes>ID xx bearbeiten auf und klickt auf Neues Modul.

Dem Modul könnte man als Titel Untermenü zuweisen. Entscheidend sind nun wieder die Felder Startlevel und Stoplevel. Tragt hier jeweils eine 1 ein. Hardlimit wird nicht aktiviert.

 
Übernehmt die Einstellungen mit Speichern und schließen. Ruft dann Themes>Die Seitenlayouts des Theme ID xx bearbeiten auf und klickt bei dem betreffenden Layout auf das Stiftsymbol. Entscheidend ist in dem sich öffnenden Dialogfenster der Bereich Eingebundene Module. Dupliziert dort einen der vorhandenen Einträge, indem ihr auf eines der Plussymbole klickt. Dem kopierten Eintrag weist man die Werte Untermenü und Linke Spalte zu.

Bilder



Auch das wird wieder mit Speichern und schließen übernommen.

 
Passt nun noch die Einstellungen des Menüs an, das im Kopfbereich der Seite zu sehen ist. Die entsprechenden Optionen findet ihr unter Themes>Die Frontend-Module des Themes>ID xx anpassen. Klickt bei Hauptnavigation [Navigationsmenü] auf das Stiftsymbol.

Entscheidend ist das Feld Stoplevel. Tragt hier eine 1 ein. Nachdem die Änderungen gespeichert wurden, liefert ein Blick ins Frontend der Seite das gewünschte Ergebnis. Das Untermenü kann dann natürlich wieder mittels CSS gestaltet werden.
<nav class="mod_navigation block">
<a href="index.php/tutorials.html#skipNavigation16" class="invisible">Navigation überspringen</a>
<ul class="level_1">
 <li class="first"><a href="index.php/web.html" title="Web" class="first">Web</a></li>
 <li><a href="index.php/id-3d.html" title="3D">3D</a></li>
 <li class="last"><a href="index.php/id-2d.html" title="2D" class="last">2D</a></li>
 </ul>
 <a id="skipNavigation16" class="invisible">&nbsp;</a>
</nav>

Ihr solltet in jedem Fall die Punkte der Aufzählungsliste entfernen, die standardmäßig angezeigt werden. Im einfachsten Fall sähe die Syntax folgendermaßen aus:
#left .mod_navigation li{
list-style-type:none;
}

Auf diese Weise könnt ihr Schritt für Schritt das Split-Menü weiter gestalten.


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von samtron
  • 17.12.2013 - 06:34

hallo vielen Dank
MfG

Portrait von Steve007
  • 17.12.2013 - 06:18

Vielen Dank für diesen weiteren Teil.

x
×
×