Das Helix Ultimate Megamenu
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ü.
- Die normale Linkdarstellung.
- Dem :hover d.h. Die Maus berührt nur die Linkfläche, ohne zu klicken.
- Dem :active d.h. Die Maus klickt den Button und dieser verändert sein Aussehen.
Um es übersichtlich zu halten bzw. die Funktion nachzuvollziehen, wurden im Testzeitraum keine "Color-Hex" o.ä. verwendet. Es wurden erstmal Farben ausgewählt, die auf der Homepage nicht vorkommen. Es ist auch einfacher bei color: red; oder color: orange; usw. zu erkennen, welche "Klassen" sich an bestimmten Stellen auswirken. Auf die Farbe "Blau" wurde absichtlich verzichtet, da dieser Farbton meist als Standard für Links übergeben wird.
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.
Im vorderen Bereich habe ich die Grundklassen gezeigt, die man für seine Anpassung verwenden soll/kann. Ab diesen Augenblick sollte nun schon bekannt sein, welche Farben am Ende zum Einsatz kommen.
Der Grund ist, dass nun verschieden Klassen zusammengefasst werden, wie z.B. die Klasse die für den hover zuständig ist kann auch die gleiche Farbe wie ein Link im Menüpunkt haben.
D.h. Es werden verschiedene Klassen der gleichen Farbe zugeordnet, damit man im Falle einer nachträglichen Farbenanpassung nicht zu viel ändern muss.
Meine Menüanpassung
Im nachfolgenden stelle ich hier meine Menüanpassung vor, wie man sie hier auf dieser Seite vorfindet. Falls ich mich zwischenzeitlich nicht wieder anderweitig umentschieden habe. :-)
Die Durchführung erfolgt in 3 Teilbereiche:
- Die Linkdarstellung
- Die Anpassung der Hintergrundfarbe
- Die Anpassung der Abstände
1. Die Linkdarstellung (Type)
Die erkennbarkeit eines Links, der sich vom eigentlichen Standarttext abhebt.
/* LINK: DARSTELLUNG (Type)
***************************/
a,
.sp-megamenu-parent > li > a
{color: #3E688C;} /*blau*/
Zeile 3: Alle Links auf der Seite bekommen in ihrer Grundform diese Farbe.
Zeile 4: Ebene 1; nicht aktiver Link;
/* MEGA MENU
Hover und Active
***************************/
.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: #fff;} /*weiss*/
Zeile 9: Ebene 1; nicht aktiver Link (Wenn die Maus von der nicht aktiven Ebene 1 in Ebene 2 hovert);
Zeile 10: Ebene 1; aktiver Link;
Zeile 11: Ebene 1; wenn aktiver Link;
Zeile 12: Ebene 2; nicht aktiver Link;
/* Hover und Active
***************************/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a
{ color: #3E688C; } /* blau */
Zeile 16: Ebene 2; nicht aktiver Link;
Zeile 17: 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);
2. Die Hintergrundfarben
Hier muss man darauf achten, dass sich die Schriftfarbe ebenfalls ändert, wenn sich die Hintergrundfarbe ändert. Blaue Schrift auf blauen Hintergrund macht sich nicht so gut.
/* LINK: DARSTELLUNG BG BLAU
***************************/
.sp-megamenu-parent > li:hover > a,
.sp-megamenu-parent > li.active > a,
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner
{ background-color: #3E688C; } /* blau */
Zeile 3: Ebene 1; nicht aktiver Link (Wenn die Maus von der nicht aktiven Ebene 1 in Ebene 2 hovert);
Zeile 4: Ebene 1; aktiver Link;
Zeile 5: Ebene 2; nicht aktiver Link;
/* LINK: HOVER BG Weiss
***************************/
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:not(.sp-group-title):hover,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active
{ background-color: #FFF;} /* weiss */
Zeile 8: Ab Ebene 2; nicht aktiver Link; hovert nur den aktuellen Link */
Zeile 9: 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);
3. Die Abstände
Am Ende passen wir noch die Abstände etwas an.
/* MEGA MENÜ ABSTÄNDE */
.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner
{ padding: 10px 0; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a
{ padding: 10px 15px; display: block; }
.sp-megamenu-parent .sp-dropdown li.sp-menu-item:not(:last-child)
{ margin-bottom: 1px; }
Zeile 2: Ebene 2; Abstand zum Rand; oben & unten = 10px; links & rechts = 0;
Zeile 4: Ebene 2; Abstand zum Rand; oben & unten = 10px; links & rechts = 15px;
Zeile 6: Ebene 2; Abstand zum nächsten Element: unten = 1px; (somit entsteht der kleine Abstand zwischen den Menüpunkten)
Somit sind wir fertig und hoffe, dass ich hier den einen oder anderen helfen konnte.
Zugriffe: 20061