|
Am Beispiel des unter Dotform Net verwendeten Menühighlightnings wird erklärt, wie man mit wenig Aufwand erreicht, dass ein einmal angeklickter Menüpunkt grafisch (per CSS) dauerhaft als aktiv (Highlightning) angezeigt wird. Dazu muss lediglich ein neuer Eintrag in der template_css.css des verwendeten Mambotemplates erfolgen, sowie eine kleine Änderung im Modul mod_mainmenu.php.
Es sei gesagt, dass sich der gewünschte Effekt auch ohne die hardgecodete Anpassung im mod_mainmenu.php
nur durch den Einsatz von CSS erreichen lässt. Dafür sind aber je nach Aufbau des Template Stylesheets erweiterte
Kenntnisse über CSS beim Anwender vorauszusetzen. Die hier vorgestellte Variante ist sozusagen die "quick and easy"
Lösung, weil man praktisch schon durch zweimal Copy&Paste das gewünschte Ergebnis erzielt. Ausserdem ist mit
diesem Lösungsansatz eine bessere Browserabwärtskompatibilität gewährleistet, weil in diesem Falle auf das Erzeugen
neuer Pseudo Classen und unabhänger Formate verzichtet wird.
Das Erscheinungsbild der unter Mambo standardmässig erzeugten Menüs wird über die Stylesheetdefinitionen in der template_css.css gesteuert. Verantwortlich sind hierfür unter anderem die Classen .mainlevel und a.mainlevel:hover sowie a.mainlevel:link, a.mainlevel:visited .
Das links vor den Menüpunkten eingeblendete Rechteck ist eine kleine Grafik, welche jeweils für den Normalzustand und den aktivierten Zustand als Hintergrundbild eingebunden wird.
Normal =  background: url(../images/navilist.gif);
Aktiv =  background: url(../images/navilist_rot.gif);
Hier zum besseren Verständis die unter Dotform Net verwendeten Classen für .mainlevel und a.mainlevel:hover :
.mainlevel {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background: url(../images/navilist.gif);
background-repeat: no-repeat;
background-position: 0.1em 0.4em;
padding: 0 0 0 15px;
color: #555056;
text-align: left;
}
a.mainlevel:hover {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background: url(../images/navilist_rot.gif);
background-repeat: no-repeat;
background-position: 0em 0.2em;
padding: 0 0 0 15px;
color: #BD252B;
text-align: left;
}
Um das Menühighlightning vorzubereiten erzeugt man als erstes eine neue Classe, welche den selben Inhalt wie die a.mainlevel:hover hat und trägt diese in der template_css.css ein . In unserem Falle ist dies die Classe .mainlevel_active .
.mainlevel_active {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-style: normal;
background: url(../images/navilist_rot.gif);
background-repeat: no-repeat;
background-position: 0em 0.2em;
padding: 0 0 0 15px;
color: #555056;
text-align: left;
}
Da Mambo nun beim generieren seiner verticalen Menüs noch nichts von der neuen Classe .mainlevel_active weiss, erfolgt noch eine Anpassung der Datei (Mambo Modul) mod_mainmenu.php. Diese Datei ist im Ordner modules/ der Mamboinstallation zu finden. Bitte vor den Änderungen ein Backup der mod_mainmenu.php anlegen !
Die hier vorgestellte Anpassung bezieht sich auf das Modul mod_mainmenu.php der Mambo Version 4.5.2.1, das ist zu beachten, da frühere Versionen im Code abweichen können.
An Zeile 61 der mod_mainmenu.php ist folgender Codeblock zu finden :
$menuclass = 'mainlevel'. $params->get( 'class_sfx' );
if ($level > 0) {
$menuclass = 'sublevel'. $params->get( 'class_sfx');
}
Der obenstehende Codeblock ist durch folgenden zu ersetzen :
if ( $id == 'id="active_menu"' ) {
$menuclass = 'mainlevel_active'. $params->get( 'class_sfx' );
} else {
$menuclass = 'mainlevel'. $params->get( 'class_sfx' );
}
if ($level > 0) {
$menuclass = 'sublevel'. $params->get( 'class_sfx');
}
Wie zu sehen wird hier einfach abgefragt, ob ein Menüpunkt mit der id="active_menu" ausgestattet ist. Diese Eigenschaft ergänzt Mambo automatisch für den geweils gewählten Menüpunkt. Ist dies nun der Fall, wird anstatt der Standard Classe .mainlevel die Classe .mainlevel_active ausgewählt. Das war's auch schon.
Ist die Anpassung durchgeführt, sollte ab sofort der angeklickte Menüpunkt, mit den in der Classe .mainlevel_active gewählten Eigenschaften, als aktiv angezeigt werden. Das gleiche Verhalten lässt sich auch einfach auf Untermenüs (sublevel) anwenden, so denn welche benutzt werden. Die Vorgehensweise wäre die selbe, wie für die hier vorgestellte Variante der Menüpunkte (mainlevel) - also Menüpunkte der obersten Menühiarchie.
[Autor: grishan 2005] |
Top
