Views: 21751
Last Modified: 08.10.2018

Generally, the task of menu creation consists of the following:

  • marking HTML elements to build up the menu;
  • creating menu template (creation of the Menu component template);
  • including a menu display function (Menu component call) in the general template (“prologue” and “epilogue”);
  • completing menu in accordance with the site structure.

Menu Structure

Any menu on the site consists of two parts:

  • $aMenuLinks data array determining menu composition which gives names and links for all menu options. Data array is managed through an administrative interface;
  • template of an external display of the menu. The menu template is a PHP code determining the external aspects of the menu (Menu component template). The menu template processes the data array giving an HTML code in the output.

Menu Data Array

Data for each menu type are stored in a separate file. Its name has the following format: .<menu type>.menu.php. For example, to store the data of the left type menu, the file .left.menu.php will be used, and to store the menu data of the top type – the .top.menu.php file.

The menu is inherited hierarchically. The menu files are located in the folders of the site sections where the display of the relevant menu types is required. If no relevant menu file is created for this section, the system searches for the file in the catalog of the upper level.

For example, since the main menu (it is a top type menu in the product demo version) must be displayed in all the sections, the file of this menu shall be located only in the root catalog of the site.

Accordingly, the second level menu (it is a left menu in the product demo version) is displayed separately for each section of the site. That is why a proper file for this menu type must be created in the folder of each section.

Another example: a visitor is in the section /en/company/about/. In order to display a left type menu, the menu file will be searched in the following order:

  1. /en/company/about/.left.menu.php
  2. /en/company/.left.menu.php
  3. /en/left.menu.php
  4. /.left.menu.php

If the menu is found in one of the catalogs, the search will be stopped and the next catalogs will not be searched.

The Bitrix Framework system also permits you to create a dynamic type menu. I.e. the data array of such a menu is generated automatically based on certain data obtained using the source code. This code must be stored in the folder of a relevant site section in a file named .<menu type>.menu_ext.php..

The principal task of these files is to manipulate a $aMenuLinks array. These files cannot be edited visually in the Site Explorer module, which is why they will not be edited accidentally during the visual editing of the menu. Use the Menu items (bitrix:menu.sections) component to create this file.

Note: The paragraph above describes only the adding names of information block sections to the created menu. This variant is not suitable, for example, for adding forum names to the menu.
Attention! If catalog sections without computer numerical control are used as menu options, it is necessary to indicate variables in significant variables of a query.

A drop-down menu of the Products section offered in the demo version of the product may be a good example of such a menu. Here, upper menu options are created normally, and the remaining options (Sofas & Loveseats, Office Desks and Chairs etc.) are formed dynamically.

In this case, the names of the groups of the Products catalog created based on the information blocks are used as menu options.

The source code used to generate the menu is stored in the file .left.menu_ext.php in the folder /products/.


The following standard variables may be used in the files .<menu type>.menu.php:

  • $sMenuTemplate - is an absolute path to the menu template (this variable is used very rarely);
  • $aMenuLinks is an array; each element of this array describes the next menu option.

    This array structure:

    Array
    (
        [0] => menu option 1
            Array
                (
                    [0] => menu option header
                    [1] => menu option link
                    [2] => array of additional links for a menu option selection:
                        Array
                            (
                                [0] => link 1
                                [1] => link 2
                                ...
                             )
                    [3] => array of additional variables transmitted to the menu template:
                        Array
                            (
                                [name of variable 1] => value of variable 1
                                [name of variable 2] => value of variable 2
                                ...
                             )
                    [4] => condition for the menu option to appear
                           is a PHP expression which must return “true”
                )
        [1] => menu option 2
        [2] => menu option 3
        ...
    )
    

Examples of menu files

<?
// file example .left.menu.php

$aMenuLinks = Array(
	Array(
		"Furniture Company", 
		"company/", 
		Array(), 
		Array(), 
		"" 
	),
	Array(
		"News", 
		"news/", 
		Array(), 
		Array(), 
		"" 
	),
	Array(
		"Products", 
		"products/", 
		Array(), 
		Array(), 
		"" 
	)
);

?>
<?
// file example .left.menu_ext.php

if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();

global $APPLICATION;

$aMenuLinksExt = $APPLICATION->IncludeComponent(
	"bitrix:menu.sections",
	"",
	Array(
		"ID" => $_REQUEST["ELEMENT_ID"], 
		"IBLOCK_TYPE" => "books", 
		"IBLOCK_ID" => "30", 
		"SECTION_URL" => "/e-store/books/index.php?SECTION_ID=#ID#", 
		"CACHE_TIME" => "3600" 
	)
);

$aMenuLinks = array_merge($aMenuLinks, $aMenuLinksExt);

?>

Organizing the Menu Display

In order to display the menu on the site pages, the component Menu (bitrix:menu) is used. For example, the top menu on the demo site is invoked as follows:

<?$APPLICATION->IncludeComponent(
"bitrix:menu",
"horizontal_multilevel",
Array(
"ROOT_MENU_TYPE" => "top",
"MAX_LEVEL" => "3",
"CHILD_MENU_TYPE" => "left",
"USE_EXT" => "Y"
)
);?>

This code is located in the areas of the site template designated for the menu display.


Building the Site Menu

Menu for display is built as follows:

  • menu display call is included in the general template;
  • when loaded, the component checks for the availability of a file containing array of values for the menu in the current site section;
  • after that, the component invokes a building template for this type of the menu and displays an HTML menu on the screen.


Courses developed by Bitrix24