Different formatting of active menu items

From phpCMS

Jump to: navigation, search

When using the menu classes .ACTIVE (or .AKTIV (deprecated)) with a formatting differing from the .NORMAL class (e.g. a different color via CSS), all active menu items will be displayed in that formatting, i.e. the parent menu items too.

In case you only want the active submenu item to be displayed in that formatting, you can achieve this by following these instructions:

Set up a separate project file (.ini), e.g. home02.ini, pointing to a different additional menu template (.mtpl), e.g. home02.mtpl:

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

Only those pages / content files (.htm) requiring that special formatting, get pointed to the differing project file: {PROJECT} ./template/home02.ini:

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

That home02.mtpl is a duplicate of the complete home.mtpl, only the CSS definitions in the {MAIN} section here get the same formatting for the {MAIN.NORMAL} and the {MAIN.AKTIV} status, e.g. the same color. That results in displaying that menu item always in the same color, even if a page from an underlying submenu is called. The link definition of those submenu pages remains having different CSS definitions (colors) for the .NORMAL and .ACTIVE status:

{MAINLEFT.PRE}
<!-- Mainleft Menu starts -->
<table border="0" class="alltables">
{MAINLEFT.NORMAL}
<tr>
<td class="mainleft">
<a href="{LINK}" target="{FENSTER}" onMouseOver="window.status='{TEXT}';return true;" 
   onMouseOut="window.status='';return true;" class="main">{MNAME}</a></td>
</tr>
{MAINLEFT.AKTIV}
<tr>
<td class="mainleft">
<a href="{LINK}" target="{FENSTER}" onMouseOver="window.status='{TEXT}';return true;" 
   onMouseOut="window.status='';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="window.status='{TEXT}';return true;" 
   onMouseOut="window.status='';return true;" class="sub">{MNAME} »</a></td>
</tr>
{SUBLEFT1.AKTIV}
<tr>
<td class="subleft">
<a href="{LINK}" target="{FENSTER}" onMouseOver="window.status='{TEXT}';return true;" 
   onMouseOut="window.status='';return true;" class="subaktiv">{MNAME} »</a></td>
</tr>
{SUBLEFT1.PAST}
</table>
<!-- Subleft Menu 1 ends -->

The CSS file in turn has two different formattings for the links:

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;
}

One could of course continue that chain if there are sub-submenus by creating and implementing the relevant home03.ini / home03.mtpl and so on.

(Solution by 'wollis' in the phpCMS Support Forum)

Main Page: Tutorials MainPage | Top Page: MiniHowTos MainPage

Diese Seite in anderen Sprachen: Deutsch

Personal tools