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 laden wir das Pixelgrid-CSS von der Contao-Seite herunter und binden 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, legen wir 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ü

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

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; }