Megamenu - Versionsgeschichte

BugBuster: /* Einbinden des Grid-Systems */

2011-05-25T23:02:44Z

‎Einbinden des Grid-Systems

Manitougs: Aufbereitung

2011-05-22T10:31:10Z

Aufbereitung

C4y olli: Megamenü erste Erstellung

2011-05-22T08:42:38Z

Megamenü erste Erstellung

Neue Seite

{{stub}}
[[Category:Extensions]]
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).
{{ExtInfo
| Dev=Oliver Lohoff
| DevSite=www.contao4you.de
| ExtVersion=1.0.0alpha1
| Version=2.9.5
| ERLink=http://www.contao.org/erweiterungsliste/view/megamenu.10000000.de.html
}}
== Einbinden des Grid-Systems ==
Zunächst einmal laden wir das [http://www.contao.org/herunterladen.html?file=tl_files/css/gridpx.css 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ü ==
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 <source><div class="clear"></div></source>. Eine Anleitung für das Grid-System gibt es [http://dev.contao.org/wiki/typolight/FrankfurtCss hier].

== Grundlegende CSS-Anweisungen für das Megamenü ==
Das Anlegen eines Drop-Down-Menüs wird im [http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ Netz] ausführlich besprochen. Daher hier nur die wesentlichen Punkte:
<source>
.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; }
</source>

@@ Zeile 10: / Zeile 10: @@
 }}
 == Einbinden des Grid-Systems ==
-Zunächst einmal ladet man das [http://www.contao.org/herunterladen.html?file=tl_files/css/gridpx.css 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.
+Zunächst einmal ladet man das [http://www.contao.org/herunterladen.html?file=tl_files/css/gridpx.css 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 ==

@@ Zeile 4: / Zeile 4: @@
 {{ExtInfo
 | Dev=Oliver Lohoff
-| DevSite=www.contao4you.de
+| DevSite=[http://www.contao4you.de contao4you]
 | ExtVersion=1.0.0alpha1
 | Version=2.9.5
@@ Zeile 10: / Zeile 10: @@
 }}
 == Einbinden des Grid-Systems ==
-Zunächst einmal laden wir das [http://www.contao.org/herunterladen.html?file=tl_files/css/gridpx.css 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.
+Zunächst einmal ladet man das [http://www.contao.org/herunterladen.html?file=tl_files/css/gridpx.css 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 ==
@@ Zeile 16: / Zeile 16: @@
 == 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.
+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 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 <source><div class="clear"></div></source>. Eine Anleitung für das Grid-System gibt es [http://dev.contao.org/wiki/typolight/FrankfurtCss hier].
+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:
 == Grundlegende CSS-Anweisungen für das Megamenü ==
 Das Anlegen eines Drop-Down-Menüs wird im [http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ Netz] ausführlich besprochen. Daher hier nur die wesentlichen Punkte:
-<source>
+<source lang="css">
 .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; }
 </source>