https://de.contaowiki.org/api.php?action=feedcontributions&feedformat=atom&user=C4y+olliContao Community Documentation - Benutzerbeiträge [de]2026-04-30T19:54:25ZBenutzerbeiträgeMediaWiki 1.22.6https://de.contaowiki.org/MegamenuMegamenu2011-05-22T08:42:38Z<p>C4y olli: Megamenü erste Erstellung</p>
<hr />
<div>{{stub}}<br />
[[Category:Extensions]]<br />
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).<br />
{{ExtInfo<br />
| Dev=Oliver Lohoff<br />
| DevSite=www.contao4you.de<br />
| ExtVersion=1.0.0alpha1<br />
| Version=2.9.5<br />
| ERLink=http://www.contao.org/erweiterungsliste/view/megamenu.10000000.de.html<br />
}}<br />
== Einbinden des Grid-Systems ==<br />
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.<br />
<br />
== Installation des Megamenus ==<br />
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.<br />
<br />
== Anlegen der Seitenstruktur ==<br />
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.<br />
<br />
== Anlegen eines Artikels für das Megamenü ==<br />
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].<br />
<br />
== Grundlegende CSS-Anweisungen für das Megamenü ==<br />
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: <br />
<source><br />
.mod_megamenu li { float:left; list-style-type: none; display:block; position:relative;} <br />
.mod_megamenu div { position:absolute; left: -999em; top:0; }<br />
.mod_megamenu li.megamenu:hover div { left:auto; }<br />
</source></div>C4y olli