Megamenu: Unterschied zwischen den Versionen
Aus Contao Community Documentation
K (Megamenü erste Erstellung) |
(kein Unterschied)
|
Version vom 22. Mai 2011, 09:42 Uhr
 |
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).
| Erweiterungs-Übersicht | |
|---|---|
| Name des Entwicklers | Oliver Lohoff |
| Entwickler Webseite | www.contao4you.de |
| Version der Erweiterung | 1.0.0alpha1 |
| Kompatibilität mit Contao Version | 2.9.5 |
| Link zum Extension Repository | http://www.contao.org/erweiterungsliste/view/megamenu.10000000.de.html |
Inhaltsverzeichnis
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.
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ü
Unter Artikel bearbeiten wir jetzt den Artikel vom Megamenu. Wir legen dort vier Inhaltselemente an und füllen diese mit Mustertext. Alle Elemente bekommen die CSS-Klasse g2. Für den Internet-Explorer fügen wir noch ein HTML-Element ein mit<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; }
