Megamenu: Unterschied zwischen den Versionen
Aus Contao Community Documentation
K (Megamenü erste Erstellung) |
K (→Einbinden des Grid-Systems) |
||
| (Eine dazwischenliegende Version von einem Benutzer wird nicht angezeigt) | |||
| Zeile 4: | Zeile 4: | ||
{{ExtInfo | {{ExtInfo | ||
| Dev=Oliver Lohoff | | Dev=Oliver Lohoff | ||
| − | | DevSite=www.contao4you.de | + | | DevSite=[http://www.contao4you.de contao4you] |
| ExtVersion=1.0.0alpha1 | | ExtVersion=1.0.0alpha1 | ||
| Version=2.9.5 | | Version=2.9.5 | ||
| Zeile 10: | Zeile 10: | ||
}} | }} | ||
== Einbinden des Grid-Systems == | == Einbinden des Grid-Systems == | ||
| − | Zunächst einmal | + | 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 == | == Installation des Megamenus == | ||
| Zeile 16: | Zeile 16: | ||
== Anlegen der Seitenstruktur == | == Anlegen der Seitenstruktur == | ||
| − | Falls nicht bereits vorhanden, | + | 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ü == | == Anlegen eines Artikels für das Megamenü == | ||
| − | Unter Artikel | + | 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: |
| + | <source lang="html4strict"><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ü == | == 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: | 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 li { float:left; list-style-type: none; display:block; position:relative;} | ||
.mod_megamenu div { position:absolute; left: -999em; top:0; } | .mod_megamenu div { position:absolute; left: -999em; top:0; } | ||
.mod_megamenu li.megamenu:hover div { left:auto; } | .mod_megamenu li.megamenu:hover div { left:auto; } | ||
</source> | </source> | ||
Aktuelle Version vom 26. Mai 2011, 00:02 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 | contao4you |
| 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 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.
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; }
