De:Abweichende Formatierung aktiver Menüpunkte

From phpCMS

Frage: Wie kann ich das aktive Menü-Element anders formatieren?

Antwort: Wenn man im Menütemplate die Menüklassen .ACTIVE bzw. .AKTIV benutzt und dort eine abweichende Formatierung bei den aktiven Menüpunkten einstellt (z. B. eine andere Farbe per CSS), so werden alle aktiven Menüpunkte entsprechend hervorgehoben, d. h. auch die übergeordnete Seite. Für den Fall, dass man nur den Untermenüpunkt als aktives Menü formatiert haben möchte, hat wollis im phpcms-Forum eine einfache Lösung vorgestellt, hier die Anleitung dazu:

Ich habe einfach eine weitere .ini (home02.ini) angelegt, in der ich auf eine zusätzlich angelegte .mtpl (home02.mtpl) verweise:

Code:
HOME := /homepage
TAGS := $home/template/home.tag
TEMPLATE := $home/template/home.tpl
MENU := $home/template/home.mnu
MENUTEMPLATE := $home/template/home02.mtpl

Nur diejenigen .htm-Seiten, die die gewünschte abweichende Formatierung haben sollen, erhalten nun zu Beginn lediglich den Hinweis {PROJECT} ./template/home02.ini:

Code:
{PROJECT} ./template/home02.ini
{MENU} 00.02.01;
{TITEL} <TITEL>
{CONTENT}
Seite 2.1

Die home02.mtpl ist ein Duplikat der kompletten home.mtpl. Lediglich die css-Auszeichnung der Links im Bereich {MAIN} erhalten im Status {MAIN.NORMAL} und im Bereich {MAIN.AKTIV} denselben Wert, sprich die selbe Farbauszeichnung. Bedingt hierdurch bleibt der MAIN-Link immer gleichfarbig, auch wenn die darunter liegenden Seiten per Link aufgerufen werden. Die Definition der Verlinkung dieser Seiten bleibt wie gehabt mit unterschiedlichen Farben für den jeweiligen Status (NORMAL oder AKTIV):

Code:
{MAINLEFT.PRE}
<!-- Mainleft Menu starts -->
<table border="0" class="alltables">
{MAINLEFT.NORMAL}
<tr>
<td class="mainleft">
<a href="{LINK}" target="{FENSTER}" onMouseOver="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '{TEXT}' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" onMouseOut="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" class="main">{MNAME}</a></td>
</tr>
{MAINLEFT.AKTIV}
<tr>
<td class="mainleft">
<a href="{LINK}" target="{FENSTER}" onMouseOver="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '{TEXT}' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" onMouseOut="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" class="main>{MNAME}</a>{MENU NAME="SUBLEFT1"}</td>
</tr>
{MAINLEFT.PAST}
</table>
<!-- Mainleft Menu ends -->

{SUBLEFT1.PRE}
<!-- Subleft Menu 1 starts -->
<table border="0" class="alltables">
{SUBLEFT1.NORMAL}
<tr>
<td class="subleft">
<a href="{LINK}" target="{FENSTER}" onMouseOver="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '{TEXT}' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" onMouseOut="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" class="sub">{MNAME} »</a></td>
</tr>
{SUBLEFT1.AKTIV}
<tr>
<td class="subleft">
<a href="{LINK}" target="{FENSTER}" onMouseOver="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '{TEXT}' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" onMouseOut="if(typeof(this.href) != 'undefined') if(typeof(this.href) != 'undefined') window.status = '' + ' URL: ' + this.href;else return false + ' URL: ' + this.href;else return false;return true;" class="subaktiv">{MNAME} »</a></td>
</tr>
{SUBLEFT1.PAST}
</table>
<!-- Subleft Menu 1 ends -->

In der css-Datei stehen dann lediglich die jeweiligen Linkauszeichnungen:

Code:
a.main:link {
color : #0000FF;
text-decoration : none;
}
a.main:visited {
color : #0000FF;
text-decoration : none;
}
a.main:hover {
color : #FF00FF;
text-decoration : none;
}
a.main:active {
color : #FF0000;
text-decoration : none;
}

a.sub:link {
color : #0000FF;
text-decoration : none;
}
a.sub:visited {
color : #0000FF;
text-decoration : none;
}
a.sub:hover {
color : #FF00FF;
text-decoration : none;
}
a.sub:active {
color : #FF0000;
text-decoration : none;
}

a.subaktiv:link {
color : #FF0000;
text-decoration : none;
}
a.subaktiv:visited {
color : #FF0000;
text-decoration : none;
}
a.subaktiv:hover {
color : #FF00FF;
text-decoration : none;
}
a.subaktiv:active {
color : #FF0000;
text-decoration : none;
}

Das Spiel lässt sich natürlich weiterführen, falls es nochmals weitere hierarchisch darunter liegende Seiten geben soll. Dann eben mit einer weiteren home03.ini sowie home03.mtpl.