Megamenu

Unvollständiger Artikel: dieser Artikel ist noch nicht sauber bearbeitet. Bitte erweitere ihn und entferne erst anschliessend diesen Hinweis.

Megamenu bindet einen bezogenen Artikel in die Frontendausgabe der Navigation ein. Sonst vorhandene Untermenüpunkte werden dabei nicht mehr ausgegeben. Eine Extra-Funktion erlaubt das Deaktivieren des Links des jeweiligen Menüpunktes (unabhängig des Megamenüs).

Einbinden des Grid-Systems

Zunächst einmal ladet man das Pixelgrid-CSS von der Contao-Seite herunter und bindet es in in das Seitenlayout ein. Hierzu muss man das Pixelgrid-CSS in das tl_files-Verzeichnis hochladen und im Theme-Manager unter CSS importieren. Anschließend muss es noch im Seitenlayout eingebunden werden.

Installation des Megamenus

Unter Erweiterung hinzufügen kann man das "megamenu" installieren. Bitte nun unter Themes ein Modul anlegen und "Megamenu" auswählen. Als Template bitte nav_mm auswählen (in der nächsten Version ist das die Voreinstellung). Die Navigation funktioniert 1:1 wie die Original-Navigation, bindet aber an gegebener Stelle das Megamenu ein.

Anlegen der Seitenstruktur

Falls nicht bereits vorhanden, legt man nun ein paar Menüpunkte in der Seitenstruktur an. Also erst einen Startpunkt der Webseite, darunter dann Menüpunkt 1, Menüpunkt 2, Menüpunkt 3 und Megamenu (im Menü verstecken). Der Menüpunkt 2 erhält unter Megamenü die CSS-Klasse g8.

Anlegen eines Artikels für das Megamenü

Unter Artikel bearbeitet man jetzt den Artikel vom Megamenu, legt dort vier Inhaltselemente an und füllt diese mit Mustertext. Alle Elemente bekommen die CSS-Klasse g2. Für den Internet-Explorer fügt man noch ein HTML-Element mit folgendem Inhalt an:

<div class="clear"></div>

Eine Anleitung für das Grid-System gibt es hier.

Grundlegende CSS-Anweisungen für das Megamenü

Das Anlegen eines Drop-Down-Menüs wird im Netz ausführlich besprochen. Daher hier nur die wesentlichen Punkte:

.mod_megamenu li { float:left; list-style-type: none; display:block; position:relative;} 
.mod_megamenu div { position:absolute; left: -999em; top:0; }
.mod_megamenu li.megamenu:hover div { left:auto; }