Cascading Menus

From phpCMS

Jump to: navigation, search

To display a cascading menu structure you have to call the submenu from the upper ACTIVE menu tree in your menu template (usually home.mtpl).

Iggi made a good description in the phpCMS-Forum:
(Please note that the given example is based on the demo template GilaTwo [1])

Actually the phpCMS menu system is very flexible as it is a node based content schema that allows unlimited levels of content organisation - and therefore in the beginning sometimes a bit hard to understand.

First of all, phpCMS doesn't depend on any naming conventions for the name of (sub-)menus, so if you name your submenu "SUB2" or "THATSMYSUBMENU" doesn't make any difference for phpCMS. Also the phpCMS menu system is not hirarcical by default, this means if you want to have an hierarchical menu, you have to 'tell' phpCMS via the menutemplate how it should build up such an hierarchical menu structure.

By default each menu you define in the menu template (like your SUB1) is completely independent from the others. If you want SUB1 to be displayed as a submenu of a different one (for example of the menue called MAIN), you have to configure phpCMS so it displays the content of that submenu whenever the corresponding main menu item is active.

If you have a look at your current menu-template it currently contains something like:

 {MAIN.PRE}                                                                                                           
        <!-- phpCMS MAIN MENU START -->                                                                             
      <div class="subHeader">                                                                                       
        <span class="doNotDisplay">Navigation: </span>                                                               
 {MAIN.NORMAL}                                                                                                       
        <a href="{LINK}" title="{TEXT}">{MNAME}</a>                                                                 
 {MAIN.AKTIV}                                                                                                         
        <b><a href="{LINK}" title="{TEXT}">{MNAME}</a></b>                                                           
 {MAIN.BETWEEN}                                                                                                       
  |                                                                                                        
 {MAIN.PAST}                                                                                                         
      </div>                                                                                                         
        <!-- phpCMS MAIN MENU END -->                                                                               
                                                                                                                     
 ; Sub menu 1                                                                                                         
 {SUB1.PRE}                                                                                                           
        <!-- phpCMS SUB MENU 1 START -->                                                                             
        <div class="leftSideBarBox">                                                                                 
          <span class="doNotDisplay">Submenu: </span>                                                               
          <p class="sideBarTitle">Sub pages:</p>                                                                     
          <ul>                                                                                                       
 {SUB1.NORMAL}                                                                                                       
            <li><a href="{LINK}" title="{TEXT}">{MNAME}</a></li>                                                     
 {SUB1.AKTIV}                                                                                                         
            <li><b><a href="{LINK}" title="{TEXT}">{MNAME}</a></b></li>                                             
 {SUB1.PAST}                                                                                                         
          </ul>                                                                                                     
        </div>                                                                                                       
        <!-- phpCMS SUB MENU 1 END --> 

As you can see in the demo, these both menus are displayed independently. The MAIN menu is displayed horizontal at the top of the page and the SUB1 menu is displayed on the left side. Therefore both menus are inserted independently in the page template. The MAIN menu is inserted somewhere at the beginning of the header.tpl file:

{MENU NAME="MAIN"}

and the SUB1 menu is inserted seperately some lines below to the left sidebar:

{MENU NAME="SUB1"} 

So what phpCMS is doing when it hits the first MENU statement in the header.tpl it checks what the Menu-Number of the currently displayed page is (either defined over the {MENU} statement in the content-file or by comparing the URL of the current page with the URLs in the link-column in the menu file). After phpCMS knows the menu-number of the current page (for example 00.01) it searches in the menu-file (for example main.mnu) for a menu block with the Name "MAIN" and the first item in that menu starting with the current menu-class. In the gila demo it would find the menu block

MENU: MAIN                                                                                                           
CLASS;      MNAME;             LINK;                  TEXT                                                           
00.01;      Home;              $home/index.html;       To homepage                                                   
00.02;      Page 2;            $home/index.html;       To page 2                                                     
00.03;      Page 3;            $home/index.html;       To page 3                                                     
00.04;      Page 4;            $home/index.html;       To page 4

as it is the first block with the right name (MAIN) and the first row of item of that menu-block matches the menu-class of the current contentpage (00.01). In the next step phpCMS searches through the menu template to find a template with the same name as the Menu (in this case MAIN) and uses this template to display the menu items.

Knowing it, it's not hard to figure out, what phpCMS does, when it hits the

{MENU NAME="SUB1"} 

line. It determines the menu-class of the current displayed content page (which is still 00.01) and then it checks the menu file for the first block named "SUB1" where the first item is starting with "00.01".

What it finds is the block

MENU: SUB1                                                                                                           
CLASS;      MNAME;             LINK;                  TEXT                                                           
00.01.01;   Sub page 1/1;      $home/index_sub1.html;       To sub page 1 of start page                             
00.01.02;   Sub page 1/2;      $home/index.html;       To sub page 1 of page 1                                       

which meets both requirements. If we would have had also an additional block

MENU: SUB1                                                                                                           
CLASS;      MNAME;             LINK;                  TEXT                                                           
00.02.01;   Sub page 2/1;      $home/index_sub2_1.html;       To sub page 1 of  page  2
00.02.02;   Sub page 2/1;      $home/index_sub2_2.html;       To sub page 2 of  page  2

it would not take this block as it does not fulfills both requirements. Of course the name is correct (SUB1) but the menu-class first menu item doesn't start with "00.01".

Now back to your problem. Looking at what I wrote there are now two possibilities, how to display your sub2 sublevel menu (actually there are probably even more, but there are two common ways). First method is to display the sub2 menu again independently from the previous ones. Look at http://phpcms.de/about/features.en.html to see what I'm talking about. On that page the main menu is displayed horizontal at the top and on the left side you see two hierarchy levels displayed in independant boxes. That's the easy way, you only have to define new menu-blocks in your menu file (e.g. main.mnu), like for example:

MENU: SUB2
CLASS;           MNAME;                   LINK;                                             TEXT                                                           
00.01.01.01;   Sub page 1/1/1;      $home/index_sub111.html;       Page 1.1.1
00.01.01.02;   Sub page 1/1/2;      $home/index_sub112.html;       Page 1.1.2

This block defines two subpages of the 00.01.01 page from the SUB1 menu in the example above (I simply added .01 and .02 to the menu class).

Of course you also have to define in the menu-template how that SUB2 menu should look like. Last but not least you have to add a

{MENU NAME="SUB2"} 

on the location of your page-layout, where this new submenu should be displayed.

Now to method two, which is a bit more complex. In many cases you want to have some hierarchical menu-display, where the submenus are only unfolded when you activate the corresponding toplevel menu. Look at http://www.drachenreiter.de to see what I'm talking about. On the left side in the menu you see the menu items of the highes hierarchy level (e.g. MAIN) and only the menu item which is currectly active is unfolded and it's sublevel 1 menu items are displayed. All the sublevel 1 menus of the other main-meni tems are hidden. Then try to click on the menu item "Galladoorn" and see how the menu changes. Now all the submenus of the main item "Galladoorn" are displayed. Click on a sublevel 1 menu item, for example on "Who is Who" to open it and see all the sublevel 2 menu items of it unfolded.

Now let's create such a type of menu. What do we want exactly?

1) The MAIN menu items should always be visible 2) The SUB1 menu items should only be visible, if the corresponding MAIN menu item is ACTIVE 2) The SUB2 menu items should only be visible, if the corresponding SUB1 menu item is ACTIVE

Requirement #1 can be solved easily by adding our wellknown

{MENU NAME="MAIN"} 

to the page template - no magic with this. Now comes the tricky part. SUB1 should only be displayed, if the corresponding MAIN menu item is active. Therefore we can't simply put a call to {MENU NAME="SUB1"} in our page template. Instead we put the call to this Menu into the .ACTIVE definition of the menu template for the MAIN menu (and that's the big trick).

So your MAIN menu-template looks like this:

 {MAIN.PRE}                                                                                                           
        <!-- phpCMS MAIN MENU START -->                                                                             
      <div class="subHeader">                                                                                       
        <span class="doNotDisplay">Navigation: </span>                                                               
 {MAIN.NORMAL}                                                                                                       
        <a href="{LINK}" title="{TEXT}">{MNAME}</a>                                                                 
 {MAIN.AKTIV}                                                                                                         
        <b><a href="{LINK}" title="{TEXT}">{MNAME}</a></b>
       {MENU NAME="SUB1"}                                                           
 {MAIN.BETWEEN}                                                                                                       
  |                                                                                                        
 {MAIN.PAST}                                                                                                         
      </div>                                                                                                         
        <!-- phpCMS MAIN MENU END -->                                                                               

The important line is the {MENU NAME="SUB1"} in the {MAIN.AKTIV} part of the menu.
Note: You should use MAIN.ACTIVE instead of MAIN.AKTIV as the German version is depricated. Boths ways will work, but due to internationalisation we changed the keyword from "AKTIV" to "ACTIVE" a while ago.

Knowing this trick, it's not hard to include as many menu levels as you want into a hierarchical menu display. You only have to add a call in the .ACTIVE part of the menu template to the next sublevel.

Main Page: Tutorials MainPage | Top Page: MiniHowTos MainPage

Diese Seite in anderen Sprachen: Deutsch

Personal tools