Anzeige
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 stephan tschiesche
  • 18.09.2018 - 14:18

im teil für vertikale menus wird im CSS die ID = #left angesprochen und definiert

das muss im teil über vertikale menus in ID = #header geändert werden. ein hinweis dazu wäre für alle, die nicht selbst drauf kommen, hilfreich!

super tutorial, absolutely!

Portrait von poeppelmann24
Portrait von Beck4993
  • 08.04.2015 - 14:50

Hallo, erst einmal vielen Dank für das sehr gute Tutorial.
Nur das Submenü wird bei mir unter dem nächsten Menüpunkt angezeigt, zudem ist in dem ersten Submenüpunkt immer ein "Fleck".
Hat zufällig jemand eine Idee woran das liegen könnte.

Vielen Dank

Portrait von nurbs81
  • 28.01.2015 - 11:16

Besten Dank. für das gute Tutorial.

Portrait von jackie_o
  • 11.11.2014 - 16:34

Hallo, vielen Dank für das Tutorial. Ich konnte es gut nachvollziehen.
Ein kleines aber wichtiges Teil fehlt mir allerdings...
Beim hover auf dem Hauptmenü erscheint das Submenü, aber wenn ich die Mouse zum Submenü bewegen will verschwindet es. Wo könnte mein Fehler liegen?
Viele Grüße, Jackie

Portrait von jackie_o
  • 11.11.2014 - 17:26

beim #header .mod_navigation .level_2 fehlte der z-index im tutorial

Portrait von Martingiga
  • 04.10.2014 - 15:01

Vielen Dank fürs Tutorial

Portrait von MicroSmurf
  • 03.03.2014 - 13:47

Sehr schön. Vielen Dank.

Portrait von Kundentest
  • 03.03.2014 - 10:03

Herzlichen Dank für das Tutorial.

Portrait von BOPsWelt
  • 02.03.2014 - 14:04

Vielen Dank für die klasse Tutorial- Serie!

Portrait von Steve007
  • 02.03.2014 - 13:30

Vielen Dank für diesen weiteren Teil Deiner tollen Reihe über Contao.

Portrait von schaubi
  • 02.03.2014 - 13:22

Herzlichen Dank für die ausführliche Fortführung der Reihe

Portrait von rocking_sid
  • 02.03.2014 - 12:26

Vielen Dank für dieses lehrreiche Tutorial!

Portrait von pummuk
  • 02.03.2014 - 12:02

vielen dank..............................

Portrait von dunkelblond
  • 02.02.2014 - 21:58

Vielen Dank für den weiteren Teil.

Portrait von arko2013
  • 17.12.2013 - 10:21

Vielen Dank für das sinnvolle und informative Tutorial!

Portrait von Kundentest
  • 17.12.2013 - 09:55

Herzlichen Dank für das Video.

Portrait von MicroSmurf
  • 17.12.2013 - 08:56

Sehr informativ. Vielen Dank.

Portrait von Ken_Barrow
  • 17.12.2013 - 07:49

Vielen Dank für den weiteren Teil!

Portrait von teste123
  • 17.12.2013 - 06:35

Herzlichen Dank für das Video.

x
×
×