The Menu
component in its default state loads records on the main level from a menu table and displays their subitems in a selected way. This is the simplest method of the use of this component. However, there may be more of these components on one page. There are several methods of use that we will show you successively.
Tree Tables
First a little theory. A menu is tree-structured and that is why a so-called Tree Table has been used for a menu table. This type of table allows saving tree-structured records in the “flat” format of database tables. The trick consists in using a
parent field that contains the identifier of its parent item. All of this can be seen the best in the sample figure that shows records from a database indented and
parent -> id relations coloured for better understanding.
The only records having no value in the
parent field are records at a tree top, i.e. in our case the main items of the menu named
A and
B. Therefore, if we want to load records from the “top” level of a menu, we have only to load such records that have a zero
parent value.
The items named
A1,
A2 and
A3 are direct subitems of the item named
A. The identifier of item
A is 1 and consequently these subitems have the value of this identifier in the
parent field = i.e. also a value of 1. In the figure you will see this relation entered in a green colour. If we want to display these subitems only, we have only to load such records from the database that have a value of 1 in their
parent field. Also other relations are represented similarly – e.g. item
A2 has two subitems
A2A and
A2B and these have therefore a value of 4 in the
parent field, which is the identifier of their parent item
A2.
If we imagine this in practice, a Menu component in its default state will behaviour over this sample database as follows:
- On loading a page, it will display the main items only of the menu, i.e. it will load such item from the database that have a zero value in the parent field – i.e. items A and B.
- If we place a mouse pointer on item A, its submenu should be displayed. As the identifier of item A is 1, the component loads all of such items from the database that have a value of 1 in the parent field. Consequently, the submenu that contains items A1, A2 and A3 (the green relation in the figure) will be displayed.
- If we place a mouse pointer on item A2, its submenu will be displayed. The identifier of item A2 is 4; consequently, the Menu component will load records with a value of 4 in the parent field. Therefore, items A2A and A2B (the blue relation in the figure) will be displayed.
All of these principles will be used for displaying several menu components together on one page in all of the following examples.
Note: Visual PHP™ uses 128 bite numbers UUID (Universal Unique Identifier) for identifiers, but here we give simple numbers only for clearness.
Two Menus Independent of Each Other
This variant can be used in the case you need, for example, to display the top and left menus separately – always together on every page –as well as, for example, to display different menus for users logged in and not logged in.
The trick of this method consists in that we create 2 main items of a menu that we name any name – e.g. the
Top Menu and
Left Menu. This naming is used in particular for easier identification by any administrator who will modify the menu in the future. These 2 main items will not be displayed directly anywhere on the Web site; they are used as a store only. Their first direct subitems will represent the main level of individual menus and their subitems will represent their submenus. Compared with a standard Menu, everything will look like moved by 1 level.
Insert a Menu component in a place where it is needed and enter the identifier of the item named
Top Menu in the
parent property. We say the component this way to load the records that are subitems of this main item named
Top Menu. All the other will be executed by the Menu component itself. Similarly for the
Left Menu, we also insert a Menu component and enter the identifier of the main item named
Left Menu in the
parent property.
To display separate menus for users logged in / not logged in, do it similarly. Of course, we will name the main items of the menu differently (for logged in, for not logged in) and assign the correct identifiers to individual Menu components in the
parent property. To avoid displaying these menus together on one page, we close them in the condition
$User->loggedIn for logged in and
!$User->loggedIn for not logged in.
Displaying a Certain Part of a Menu Subtree
This method is a simplified variant of the foregoing solution. A whole menu, as it is, will be displayed in some place on the Web site in a standard way including all its submenus. However, any part of the tree of this menu can be displayed separately by inserting a Menu component and by entering the identifier of the item the subitems of which we want to display in the
parent property.
Tip: If you also want to hide this part of the tree from the main menu (i.e. from the display of the original Menu component), you have only to set the
Display property in this item to the value of
In Archive.
Displaying a Main Menu and Submenus by means of Separate Components and Their Connections
Not always it is advisable to use dropdowns from a main menu, either for the reasons of various page designs or, for instance, because the menu tree is too deep. Of course, this is also possible. It is necessary sometimes, for example, to display the left menu depending on the item on which a user clicked on the top menu (i.e. the menu items will not drop down on the main menu, but de facto in a separate component).
The principle is the same as in the foregoing solution, when we display a certain part of a menu subtree in a separate component. However, here is a basic difference in that we cannot enter the value of an identifier in a
parent field firmly because the system would display the same tree again and again. For each page it is necessary to know the identifier of the menu item with which the current page is connected and that is why the
getMid() and
getMidByLevel() functions are available in Visual PHP™.
The
getMid() function returns the particular identifier of the menu item that is connected with the current page. Therefore, if we click on item
A according to the sample figure, the
getMid() function will return us 1 as the identifier, if we click on
A1, it will return 3 as the identifier and if we click on
A2A, it will return 9 as the identifier, etc. Of course, we cannot use this value directly in the
parent property of the left menu component because here we always need to display the complete subtree of a particular main item. This would mean to go through the database recursively in order to work our way back to the identifier of the main parent item. So as not to have to program this, the function
getMidByLevel() function is available.
function getMidByLevel(level)
This function returns the identifier of the item that is the parent of the current item, which is just the item of the level entered in the
level parameter. This can be seen the best if we use an example. If we click on items
A, A1,
A2,
A3 and
A2A or
A2B,
getMidByLevel(0) will return 1 as the identifier, i.e. the identifier of the most parent item of the first (main) level. Similarly, on clicking on items
B,
B1,
B2 and
B1A or
B1B, the same
getMidByLevel(0) function will return 2 as the identifier. And these are just the values needed for our purposes. To form a complete idea of values returned for various levels – on clicking on item
A2A,
getMidByLevel(0) returns a value of 1,
getMidByLevel(1) returns a value of 4 and
getMidByLevel(2) returns a value of 6.
Now, when we already know which function shall be used, we have only to enter a script instead of a fixed value in the left menu component.
{php: getMidByLevel(0)} On every processing of this component, the system will then add a particular value according to a particular page visited instead of the
parent property.
For Visual PHP™
