Main Menu mit Dropdown- eigenes Contao Theme erstellen
Herzlich willkommen zurück zum kostenlosen Tutorial zur Erstellung eines eigenen Themes in Contao. Dieses Mal beschäftigen wir uns mit der Navigation. Dabei zeige ich dir zwei verschiedene Arten der Main-Navigation: sowohl über ein Drop-Down, als auch eine Menüsteuerung, bei der die Submenüpunkte erst sichtbar werden, wenn wir den Übermenüpunkt aufrufen. Darüber hinaus schauen wir uns die mobile Navigation an. Wundere dich nicht: diese Themen werden auf mehrere Videos aufgesplittet, da es sonst viel zu lang werden würde.
Modul für die Navigation anlegen
Unabhängig davon, ob du deine Navigation mit einem Drop-Down gestalten möchtest, oder die Submenüpunkte erst bei einem Klick auf den Überpunkt erscheinen sollen, navigierst du zuerst auf Layout » Themes und klickst dann auf die Zahnräder » Module bearbeiten. Hier siehst du eine Auflistung aller Frontend-Module. Erstelle ein Modul mit einem Klick auf “Neu” und wähle den Modultyp “Navigationsmenü”, sowie einen passenden Titel. Etwa Hauptmenü, Mainmenu, o.A. Füge unter den Experteneinstellungen noch die Klasse “main-menu” hinzu. Möchtest du ein Dropdown erstellen, kannst du alle Einstellung so lassen und abspeichern. Für den anderen Fall, trage bei “Stoplevel” 1 ein und klicke auf Speichern und schließen. Für das Dropdown-Menu musst du kein weiteres Modul erstellen, bei dem alternativ Vorschlag erstellst du ein weiteres Modul - ebenfalls ein Navigationsmenü und nennst es Submenü mit dem “Startlevel” 1 und “Stoplevel” 0. Bei dem Start- und Stoptlevel handelt es sich um die Hierarchien, die das Navigationsmodul anzeigen soll. 0 Steht dabei immer für “keine Einschränkung”. Ein Navigationsmodul mit dem Startlevel 1 zeigt in dem Sinne nur Submenüpunkte. Füge hier ebenfalls die Klasse “main-menu” hinzu. Außerdem kannst du ein drittes Modul erstellen, das als Navigation der Untermenüpunkte in der Left-Sidebar fungiert. Das Modul ist genauso aufgebaut, wie das Modul Submenü, nur dass du unter den Experteneinstellungen die CSS-Klasse “menu-list” hinzufügst. Diese werden wir später im CSS definieren - du kannst sie logischerweise auch anders benennen, musst dann im Verlauf nur aufpassen.
Module in das Seitenlayout einbinden
Sobald du deine Module erstellt hast, musst du sie an entsprechender Stelle im Seitenlayout einbinden. Navigiere dazu auf Layout » Themes und wähle das Icon mit dem dreigeteilten Blatt “Seitenlayouts bearbeiten”, klicke beim entsprechenden Layout auf den Stift und scrolle zum Bereich Frontend-Module. Dort kannst du nun im Layoutbereich “header” auf duplizieren klicken und das Modul “Menü” ganz nach oben schieben. Im Falle der Alternativlösung fügst du das Modul Submenü drunter ein.
Im Seitenlayout “Left Sidebar” lege ich die Module wie folgt an:
Auch da ist das Modul “Submenü” natürlich wieder optional. Außerdem habe ich in der linken Sidebar nun das Submenü der aktuellen Unterseite. Der Output auf meiner Seite schaut (nach dem CSS) so aus:
Hier sind die dazugehörigen CSS-Definitionen:
/*** Navigation ***/
.menu-list li{
list-style-type: none;
padding-bottom: 10px;
font-size: 1.5rem;
}
.mod_navigation .invisible {
display: none;
}
@media (min-width:800px) {
.main-menu ul {
list-style-type: none;
text-align:right;
padding: 20px 0px;
}
.main-menu li {
display: inline-block;
font-size: 1.5rem;
}
.main-menu ul.level_2 {
display: none;
position:fixed;
background: white;
padding: 20px;
}
.main-menu li:hover ul.level_2 {
display: block !important;
}
.main-menu li:not(.last)::after {
content: '|';
padding: 0px 10px;
}
.main-menu ul.level_2 li {
display: list-item !important;
padding: 5px 0px;
text-align:left;
}
.main-menu ul.level_2 li::after {
content: none !important;
}
.main-menu a {
text-decoration: none;
color: var(--main-color);
}
}
@media (max-width:799px) {
.main-menu, .menu-list {
display:none;
}
}
Nun werden wir das Smartmenu erstellen
Für das Smartmenu werden wir zum ersten Mal mit JavaScript arbeiten. JavaScript führt clientseite Scripte aus. Damit kann der User Änderungen hervorrufen kann, ohne die Seite neu zuladen, wie es nötig wäre, wenn wir mit PHP arbeiten würden, da die Scripte dort vom Server verarbeitet werden.
Smartmenü Trigger als Modul mit JavaScript erstellen
Zunächst benötigen wir allerdings erstmal einen Trigger, mit dem der User interagieren kann. Ich habe mir dafür eine einfache SVG-Datei erstellt. Du kannst dir die Datei gern downloaden: contao-website-erstellen.de/files/cwe/downloads/smart-menu-trigger.zip
Nun navigiere zum Punkt System » Einstellungen und suche nach den Sicherheitseinstellungen. Dort findest du den eine lange Zeile mit der Überschrift “Erlaubte HTML-Tags”. Füge dort ganz an den Anfang den Tag <script> ein. Damit haben wir die Möglichkeit unseren JavaScript direkt in dem HTML-Dokument auszuführen.
Lege ein neues Frontend Modul mit dem Modultypen “eigener HTML-Code” an und füge folgenden Inhalt hinein:
<a id="trigger">
<img src="https://www.contao-website-erstellen.de/files/federleicht/assets/smart-menu-trigger.svg" width="15"></a>
<script>
var menu = document.getElementById("smart_menu");
var trigger = document.getElementById("trigger");
trigger.onclick = function(){
if (menu.classList.contains("sm_hidden")){
menu.className = "mod_navigation sm_show block"
} else {
menu.className = "mod_navigation sm_hidden block"
}
};
</script>Wie dieser kleine Script funktioniert, ist schnell erklärt: zuerst werden die Variablen menu und trigger erstellt. Diese beziehen sich auf Objekte, welcher wir anhand der ID ausfindig machen. Danach sprechen wir unseren trigger an und definieren was passiert, wenn er geklickt wird. In dem Fall wird die Klasse des Menüs geprüft. Beinhaltet sie “sm_show”, wird sie auf “sm_hidden” gestellt und umgekehrt. Sowohl das Menü mit der ID smart_menu, als auch die CSS Klassen definieren wir noch.
Modul für das Smartmenü anlegen
Wir legen mal wieder ein Navigationsmodul an (Layout » Themes » Frontend-Module). Dieses nenne ich Smartmenü, Start- und Stoplevel ist 0, CSS-ID setzt du auf smart_menu und die Klasse auf sm_hidden. Damit dieses Modul auf den JavaScript reagiert und zu direkt zu Beginn nicht sichtbar ist.
Nun fügen wir den Trigger und das Menü in mal wieder in unser Seitenlayout ein. Achte darauf, dass in der Reihenfolge zuerst das Smartmenü, dann der Trigger geladen wird. Der JavaScript funktioniert nur dann, wenn beide IDs zuvor im HTML-Konstrukt vorhanden sind.
Der CSS-Code sieht folgendermaßen aus:
.sm_hidden {
visibility: hidden;
position: absolute;
}
.sm_show {
visibility: visible;
width:100vw;
height:100vh;
background:white;
position: absolute;
top: 0;
left: 0;
z-index: 100;}
#trigger {
position: absolute;right: 10px;top: 10px;z-index: 100;}
#smart_menu li {
list-style-type: none;
padding-bottom: 10px;
font-size: 1.5rem;
}
#smart_menu {
padding: 20px;
}
#smart_menu li ul{
margin-left:-15px;
padding-top: 10px;
}
@media (min-width:800px){
#trigger {
display:none;
}
}Nun dürfte dein Smartmenü geladen werden, wenn das Browserfenster kleiner als 800 Pixel ist, andernfalls wir das Mainmenu angezeigt. Solltest du noch Fragen haben oder etwas nicht funktionieren, schau dir gern mein YouTube-Video an und schreib mir gerne ein Kommentar.