In diesem Beispiel möchte ich das Megamenü anpassen, dass im Helix Ultimate enthalten ist. Diese Anleitung soll die Leute ansprechen, die es bereits versucht haben, dass Menü für die eigenen Bedürfnisse anzupassen.

Das Mega Menü ist Bestandteil im Helix Ultimate, das derzeit beste Joomla Template Framework.

Diese Hilfestellung soll zur Unterstützung dienen, um eine Umgestaltung seines MegaMenüs, von der Fa. Joomshaper , zu ermöglichen.  
Am Ende des Beitrags werde ich meine Umsetzung zur Veranschaulichung und zur Nachverfolgung darstellen. Natürlich gibt es wieder viele andere Wege, um an dasselbe Ziel zu kommen.

Aufgrund der letzten Umbauarbeiten der Homepage, wollte ich das Megamenü, dass im Helix Ultimate enthalten ist, nicht in seiner Grundform belassen. Etwas Farbe sollte dann schon sein, damit es zur Seite passt.

Wer mit CSS vertraut ist, nutz in diesem Fall den Code-Inspektor, den man im Browser mit der F12-Taste aufrufen kann. Ich nutze diese Funktion schon seit Jahren im Browser "Firefox". Man kann selbstverständlich auch einen anderen Browser verwenden, der diese Funktion besitzt.

Die Erklärung zur folgenden Beschreibung

Nach den folgenden Codedarstellungen werde ich die Beschreibung der Zeilen kurz halten. Damit die kurz gehaltenen Kommentare unter den jeweiligen Codedarstellungen verstanden wird, sollte man wissen, wie ein Menü aufgebaut ist.

Zur Vereinfachung werde ich hier die obere Ebene (root) mit "Ebene 1" bezeichnen. Das ist die Ebene, die alle anderen Untermenüpunkte beinhaltet.
Mit "aktiv" werde ich die Menüpunkte bezeichnen, die sich nach dem Klick auf ein Menü anders verhalten, als im vorherigen Ausgangspunkt.

• Ebene 1 = obere Menüebene (root)
• Ebene 2 und mehr = untere Menüebene (Submenü)

Der Aufbau des CSS-Codes

Der Aufbau des Codes ist in 3 Teile aufgeteilt und zeigt zunächst die farbliche Gestaltung der Linkbezeichnung im Menü.

1. Die normale Linkdarstellung.
2. Dem :hover d.h. Die Maus berührt nur die Linkfläche, ohne zu klicken.
3. Dem :active d.h. Die Maus klickt den Button und dieser verändert sein Aussehen.

1. Die Linkdarstellung (Type)

Die erkennbarkeit eines Links, der sich vom eigentlichen Standarttext abhebt.

.sp-megamenu-parent > li > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a
{color: red;}

Zeile 1: Ebene 1; nicht aktiver Link;
Zeile 2: Ebene 2; nicht aktiver Link;

2. Die Linkdarstellung (:hover)

Die Veränderung eines Links oder einer Schaltfläche, wenn diese nicht geklickt wurde, sondern nur berührt.

/* LINK: HOVER
***************************/
.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active:hover > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover
{color: orange;}

Zeile 6: Ebene 1; nicht aktiver Link;
Zeile 7: Ebene 1; nicht aktiver Link (Wenn die Maus von der nicht aktiven Ebene 1 in Ebene 2 hovert);
Zeile 8: Ebene 1; wenn aktiver Link;
Zeile 9: Ebene 2; nicht aktiver Link;

3. Die Linkdarstellung (:active)

Die Veränderung eines Links oder einer Schaltfläche, wenn diese geklickt wurde.

/* LINK: AKTIVE
***************************/
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a
{color: green;}

Zeile 13: Ebene 1; aktiver Link;
Zeile 14: Ebene 2, aktiver Link; (Klickt man auf die Ebene 2 oder tiefer, werden alle außer Ebene 1 diese Farbe erhalten, um den vorherigen Pfad zu verfolgen);

Dies waren erstmal die Farben der Links. Im folgenden möchte ich noch die Hintergrundfarben der jeweiligen Menüebenen anpassen.

4. Die Hintergrundfarben

Ist es gewollt, dass man das MegaMenü mit Hintergrundfarben gestaltet, dann sind folgende "CSS-Anweisungen bzw. Klassen" dafür verantwortlich.

.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent > li.active:hover > a,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a
{ color: green; }

Zeile 1: Ebene 1; nicht aktiver Link (Wenn die Maus von der nicht aktiven Ebene 1 in Ebene 2 hovert);
Zeile 2: Ebene 1; aktiver Link;
Zeile 3: Ebene 1; wenn aktiver Link;
Zeile 4: Ebene 2; nicht aktiver Link;

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a
{ color: gray; }

Zeile 5: Ebene 2, nicht aktiver Link;
Zeile 6: Ab Ebene 2, aktiver Link, (Klickt man auf die Ebene 2 oder tiefer, werden alle außer Ebene 1 diese Farbe erhalten, um den vorherigen Pfad zu verfolgen) 

Mit all diesen Grundklassen kann man schon mal ne Menge anfangen. Im nächsten Abschnitt werde ich die mit Hilfe dieser Klassen die Umgestaltung beginnen. Hierbei soll/muss erstmal klar sein, welche Farben das Menü am Ende dann haben soll.