home > A computer > modx revo wayfinder dropdown menu. Multilevel MODX menu using Bootstrap

modx revo wayfinder dropdown menu. Multilevel MODX menu using Bootstrap

You can change the top menu of the MODX control panel either by changing the order of the items, or by hiding some of them from certain users. You can also add new items to existing or custom activities that you create. Next, we will first look at the methods used to modify the top menu, and then some practical examples.

Top Menu Concepts

The menu system in Revolution has a completely new architecture. It has almost nothing to do with the Evolution menu system except for the names of some items. You don't need to understand to set up the menu new system menus, but this understanding helps, especially if you are going to create Control Panel Personal Pages that will be accessed through the menu.

Top menu tree

Go to top menu section System -> Actions and you will see the basics of the menu system. The tree on the right (Top Menu) contains the actual menu and submenu items. If you expand the various sections, you will see that this exact copy top menu. Elements top level is what you see at the top of the control panel. Almost always these are containers for submenus. Each submenu in the tree corresponds to an action in the control panel. When you click on a submenu, an action is performed in the control panel (for example, clearing the site's cache or going to the access control panel). In fact, the top menu items can be actions, but none of the top menu items are configured that way.

What happens when you click on a menu item is actually defined here. As you'll see, you can easily override what happens when a menu item is clicked, and you can also rename, hide, or remove menu list items. You can also add items to the menu and set what happens when you click on them. In fact, you can create a completely new menu system for the control panel that will replace the existing one and different users can see different menus. All of this can be done without changing the MODX core.

The physical display of the menu is also set here. It's not a coincidence that all menu items are in the same order as they are in the top menu. If you move them in the tree, the top menu will also change when you reload the page.

Let's look at some control panel actions, but be careful not to change them - click the "Cancel" button after viewing them.

In the tree on the right (Top menu), right-click on the "Site" item and select "Edit" from the drop-down menu. An Edit dialog box will appear with fields that define the menu action:

Name- menu item name

Description- menu item description

Action- specification of the PHP file to be executed

Icon- additional icon for menu item

Options- optional $_GET parameters for URL

Handler- JS code to be executed

Access rights- comma-separated list of required permissions

Note that most of the fields in the "Site" item are empty. This is because it is a container for the submenus contained within it. If you click on the "Site" menu in the top menu, nothing happens.

Let's look at a menu subsection that does something. Click on "Cancel" to end the dialog, expand the "Site" section of the tree in the right pane, right-click on the "Update Site" submenu and select "Edit".

Note that the dialog box that opens contains the contents of the "Handler" and "Permissions" fields. The "Permissions" field tells us that the user cannot perform the action of this menu sub-item if he does not have the empty_cache access right. The "Handler" field contains the actual JS code that is executed when you select this sub-item. All items in which some actions are actually performed have either "Action" or "Handler" fields filled in. If the "handler" field is filled, then the code located in this field is executed, and the "Action" field is ignored. If the "Handler" field is empty, then the action from the "Action" field is performed. The "Action" field is usually a pointer to either a controller file or one of the actions in the "Actions" tree on the left (which actually point to the corresponding controller files). Close the dialog by clicking the "Cancel" button.

Let's look at a menu item option with an action. Download and install the Batcher add-on via Package Management, reload the page and go to the section again System -> Actions. In the "Components" section in the right tree (expand it if necessary), right-click on the Batcher and select "Edit". Now we see the completed "Action, not "Handler" field: batcher - index. End the edit dialog by clicking the "Cancel" button.

In the left pane, all top-level items are namespaces. In the Actions tree on the left, expand the "batcher" namespace. You should see the action index. This is the action pointed to by the Batcher menu we saw in the right pane.

Let's see what we can do with the Top Menu tree. Items in the Top Menu tree can be rearranged by dragging them. If you change the location of a menu item in the tree, the actual top menu will also change, although you will need to reload the control panel page to see this.

To add an item to the top menu, you can right-click anywhere in the tree area and select "Add Menu Item". You can also click the "Add Item" button to add an item to the top-level menu.

Menu items can be removed by right-clicking on them and selecting "Delete". If you delete a menu item, the contents of its fields will be lost and any child elements will be removed. This action is irreversible.

If you want to remove a menu item without actually erasing it (almost always the best option actions), you can hide it by putting something in the "Permissions" field. If there is already something in this field, add a comma and the name of the new access right. As long as this access right is an access right that no one else has, the menu item will be invisible. You can make it visible again by removing the added permission. If you want to show a certain menu item to certain users (but not to everyone), just create a new policy template containing only user rights access, create a new policy based on this template and create a contextual access control list entry that applies to these users and assign this policy.

To change the title of the top menu, specify its description. Then go to the menu section System-> Dictionary Management. Select the namespace "core" and the theme "topmenu". The topic dropdown list contains more than one page, so you may need to navigate to the second page to find the "topmenu" topic. Find the language string for the required menu item, double click on its value and change it. Any changes you make here will be in effect after you update your MODX version and after you update any of the third party components.

The method described above will only work for menu items built into the kernel. For third-party menu items, you will need to select the appropriate namespace. For example, if you want to change the corresponding menu item for Batcher, you will need to change the value of the dictionary control line for the batcher namespace.

Tree "Actions"

Return to section System -> Actions if you left it. In the left pane, click on the action "index" below the name "batcher" and select "Edit" from the drop-down list. Recall that this is the action that the Batcher menu item in the right pane points to. You will see that the controller for this action is index and the namespace is batcher. If we now go to the section System->Namespace, we will see that the path for the batcher namespace is:

(core_path)components/batcher

When bound to a controller that will be executed when this menu item is clicked, MODX will generate a full path like this:

namespace_path + controller_name +.php

In other words, assuming that core is in its default location, MODX initiates execution of the controller file at:

core/components/batcher/index.php

If you look at this file, you will see that it just contains the index.php file in the core/components/batcher/controllers directory, which loads the Batcher class and initializes it by running Batcher in the control panel. We'll create a new menu item under "Components" a bit later when we're creating custom dashboard pages.

Many menu items in the right pane do not have active actions shown in the left pane. This is because the paths to their controller files are stored in the MODX database and should not be edited (at least harder to do). These paths are stored in the modx_actions table. Each action has its own identifier (ID) and path to its controller. The action also has a helper URL for context sensitive help when the controller is active and a few other fields. For actions shown in the Actions panel on the left, you can see the ID in brackets next to the action name.

Adding a menu item to the tree for any action in the control panel is thus done by creating a menu item in the right pane and either creating the corresponding action (controller) or adding a handler. If the controller already exists, you can simply select it from the "Actions" dropdown menu. If not, then you must create an action in the left pane that points to the controller. For example, there is no menu item for creating a new user, but since there is a file controller for this, this item can easily be added to the top menu. In this case, you only need to create a menu item on the right and set the "core" namespace to the action security/user/create. As you understand, a top menu item that has a handler but no corresponding action (similar to the "update site" menu item) in the "Actions" tree. It doesn't need an "Action" clause because the handler contains the code for that. Instead of running the controller, MODX simply executes the code in the handler field.

Handling menu clicks

Notice the index action of the Batcher namespace in the left pane. Note its ID. When you click on a top menu item, MODX gets that ID. Then the URL of this page is generated in the control panel and the user gets to it. On our site, this ID is 79. When we click on Batcher in the top menu, we see in the address bar of the browser:

http://website/manager/index.php?a=79

If you click on the Batcher menu item, you should see a similar URL where you will see the index ID of your Batcher action. When the request handler receives this URL, it checks if the menu object exists in the database, if the user has permission to execute it, sets the URL for help, and executes the action's controller file (if there is a handler, the handler's JS code is executed).

Working with the top menu

Now that we know how MODX handles menu items and their associated actions, let's modify the actual top menu in the control panel. The methods used are quite simple and you don't need to understand the internals of the MODX menu/action system to use them.

Be careful here as all your changes will still be in effect when you update the site and not easy way return to the default menu. Most of the steps we'll be taking here are easily reversible, but you'd be better off writing down the original menu structure before making any changes. It's best to practice first on a MODX installation that won't be used for the actual site.

Changing the order of menu items

You can change the order of the top menu items in the control panel or any of the items in their submenus. Go to section System->Actions and expand the menu tree on the right (under the heading "Top Menu").

As we found out earlier, this tree is the basis of the top menu of the control panel. You can change the order of the top menu items by dragging them. Simply click on the menu item you want to move and, while holding down the mouse button, drag it to where you want it and release the mouse button. This way you can change the order of the items in the top menu or any submenu. You can move items from one submenu to another. You can also move submenu items to the top menu by dragging them to the top menu folder. In order to see the changes, you need to reload the control panel page.

Adding and Removing Menu Items

Adding a new menu item is easy enough. Go to section System->Actions and expand the menu tree on the right (under the heading "Top Menu"). Select the part of the menu to which you want to add an item and click on the "Add Menu" button (or right-click and select "Add Menu Item"). Enter the name of the menu item you want and click the "Save" button. Usually MODX users enter new items in the "Components" menu, but you can add them anywhere. To remove a menu item, you can right-click on it and select "Delete Menu Item".

If you add a new menu item and then reload the page in the browser, you may not see your new item in the top menu. Top menu items without child elements and without specifying an action or handler will not appear in the menu. This is why the "Components" menu that you see in the tree does not appear in the menu when you first install MODX Revolution- no components installed yet.

As a simple example let's create a new custom menu that will take you to the most commonly used sections of the control panel. Let's assume that your job requires frequent visits to system settings, document creation/editing, and access control. We'll create a top menu item called "My Menu" in which we'll place the items we've specified. Note that we will be doing all the work in the right pane (Top Menu).

Skip to section System->Actions and (in the top menu tree) click the "Add Menu" button. Enter the name "My menu" in the "Name" field and click on the "Save" button.

Name - new document

Action-core-resource/create

Name- System settings

Action-core-system/settings

Name- Access control

Action- core-security/permission

Make sure your three new menu items are sub-items in the "My Menu" menu. If not, drag them to Right place mouse. You can also change the order of menus and submenus.

After you have achieved the desired menu location, reload the control panel page in the browser. You should see a new "My Menu" item in the top menu, containing three submenus that should lead to the appropriate sections of the control panel.

If you want to remove any menu item you have created, just go to the section System->Actions, right-click on them and select "Delete". It's a good idea to delete all submenus before deleting the main menu item so that they don't remain in the database.

How to hide menu items

In addition to changing the order of menu items, you can also hide them using the permissions attached to the menu item. Skip to section System->Actions and expand the menu tree on the right side (under the heading "Top Menu").

Right-click on any menu item or sub-item and select "Edit". A dialog box will appear with the bottom field "Permissions". Be careful not to change any other field.

If you are trying to hide existing menu items, you will see that the "Permissions" field is filled in for some of them and not for others. What actions you need to take to hide a field depends on whether the field is filled in or not.

If the "Permissions" field contains a list of access rights, you can create a new access policy (or edit an existing one) to block that access right and the menu item will be hidden. This operation may have side effects because other menu items in the control panel may be subject to the same access rights. best method it may be possible to add additional user permission specifications to this field.

The "Permissions" field can contain a comma-separated list of access rights. This menu item will be visible only to users who have all the listed access rights.

Let's look at an example. Suppose you want to hide from all users, except for a user with unlimited Super User rights, the "User Management" submenu in the "Security" menu.

Skip to section System->Actions and expand the menu tree, and then right-click on the "User Management" sub-item and select the "Edit" item. The "Permissions" field must contain view_user. We are going to add other permissions called my_view_user_menu. To do this, edit this field to contain view_user,my_view_user_menu. Make sure that there are no spaces in the entered data. Now users need to have both of these permissions to see the "User Management" sub-item, and since no one has the second access right (since we just made it up), no one will see this sub-item.

For menu items that do not have access rights, the procedure is similar. You simply add new user permissions to the empty "Permissions" field.

Note that after we have added our user permissions, a Super User with unlimited rights will also not see the "Manage Users" submenu. In order to fix this, you need to give him these access rights. If you plan to perform these operations on a live site, always give the administrator with unlimited rights these permissions first before creating custom permissions.

Since the default Administrator group in Control Panel is protected, you need to create a new access policy template containing the user's access rights and a new access policy based on them. You can put all your user permissions in this access policy template. In chapter Security->Access Control click on "Create access policy template". For the dialog, use the following options:

Name : CustomPermissionTemplate

Template group : Admin

Description :

Then right-click on the "Add Permission" button. Use the following options in the dialog:

Name : my_view_user_menu

Description : User menu access rights

Then click on the "Access Policy" tab, then on the "Create Access Policy" button. Use the following options in the dialog:

Name : CustomPermissions

Access Policy Template : CustomPermissionTemplate

Description : My user permissions

Click on the "Custom permissions" access policy and select "Edit". Scroll down the list to the access right my_view_user_menu and check the checkbox next to it. Click the "Save" button on the top right.

Now we need to give the super user this access right by creating a new ACL entry. Go to section Security->Access Control->User Groups". Right click on the "Administrator" user group and select "Edit User Group", click on the "Context Access" tab and then on the "Add Context" button. Use the following options for the dialog:

Context : mgr

Minimum Role : Super User - 0

Access policy : CustomPermissions

From the top menu select Security->Access Control. No one will be able to see this menu item except for a user with unlimited Super User rights (and other users with this access policy). If you enter the control panel as one of the site editors, the sub-item "User Management" should be absent.

Back

Forward

Publication date: 02/07/2011

In this simple tutorial, I'll show you how to customize the menu.

Once I was asked to fix a bug with the menu on one site - some items stubbornly did not want to line up, but instead crawled out in unexpected places on the page when hovering over. The bug was not in the crooked css, as I assumed at first, but in the crooked Wayfinder call.

What is Wayfinder- this is a snippet that is used when it is necessary to list the documents of a section/s. As a result of the snippet, an unordered list is generated. With help various options you can do anything with this list :) You can read more in the documentation, or by typing in Google - “wayfinder modx wiki”.

Important Notes:

1. About what MODx is, how to install MODx, how to organize the structure of documents, how to make a template from html, what is a chunk, and so on. I do not consider questions for beginners in this lesson.

2. The placeholders that I will use in the tutorial are in the format that the Evo version “understands”. What is the difference, see example:

So, let's take a look at creating a menu step by step.

Step 1

For the lesson, I sketched the following menu:

Here, for clarity, I have used different styles to different menu levels. On the site where the bug with the menu was fixed, it was about the same - each level of the menu has its own style.

Typesetting - layout details are not included in the scope of this lesson, so I got this code:

After admiring the code, we determine for ourselves which class in our menu is responsible for what (this is if you are poking around in someone else's code, it should be clear in your own):

ul class="menu" - the class of the entire menu
li class="top" - top-level menu item class
a class="top_link" - class for links in top-level items
ul class="sub" - submenu class
well, span class="down" for decorating top-level items

Step 2. Create Three Documents

Products
- Delivery
- Suppliers
At the “Products” document, we create child documents: “Truth Serum”, “Makropulos Remedy”, “ Universal means».

Step 3. Move the menu to a separate chunk

In the template, in the place where you should have a menu, remove all unnecessary code (itself html code menu), instead we write

((menu))

Thus, we take out the menu in a separate chunk. Then we create a new chunk and call it menu. For now, you can copy the menu code that you made up into the contents of the chunk. For clarity.

Go to the admin panel in "Site"-> "View" - to check that everything is fine with the paths to the style file and pictures.

Happened? Ok, but it's not the menu yet. Let's breathe life into it with the help of Wayfinder.

Step 4

Remove all contents of the menu chunk and call the Wayfinder snippet instead.
As long as we write:

[[Wayfinder? &startId=`0`]]

startId parameter- indicates from which document to start forming the list. We have 0 - this means that the list is formed from the root of the document tree.

Let's see what happened:

This is a working and live menu. Rename documents, delete, add - the menu will be formed in accordance with the document tree.

Step 5

5.1. Now we bring the appearance of the menu back to normal

Wayfinder generates a simple code by default () , all list and item classes are given special parameters when called.

At the beginning of the lesson, we determined which css classes in our menu are responsible for what. Wayfinder has the options we need: outerClass- class for the menu container. Comparing with our layout, we get the following Wayfinder call:

[[Wayfinder? &startId=`0` &level=`2` &outerClass=`menu`]]

in addition to parameters with classes, specify nesting level - &level=`2`.

We note the shortcomings - no classes for top-level menu items, no tags and a class for the submenu.
All these shortcomings are corrected by adding appropriate parameters to the Wayfinder call.

5.2. Adding classes to top-level items and tags

There is a variable for this rowTpl, which describes a template for a menu item, we make such a template, for this we create a chunk called parent:

[+wf.linktext+][+wf.wrapper+]

In the call to Wayfinder add &rowTpl=`parent` .
Don't forget to check source- almost everything is fine, the submenu remains.

To set up the submenu, we use the innerRowTpl variable.

Create a chunk inner:

[ +wf.linktext+][ +wf.wrapper+]

Adding a Variable to the Wayfinder Call innerRowTpl=`inner` and a variable that specifies the class for the submenu container &innerClass=`sub` .

The final call to Wayfinder looks like this:

[ ]

That's it, our menu is ready. Good luck!

Wayfinder serves to organize lists of links for MODX. Thanks to the support of templates, it allows you to display lists in any necessary form:

Menu in the form of a list, table, images, with icons, etc.
Static menus
Menus with various effects (dropdowns, dropdowns, etc.)
site `s map

Call example:

&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`active`
&rowClass=`eNav_li`]]

Snippet options:

&startId- id of the parent page, if you specify 0, it will be from the root of the site. The default value is the id of the active page.

&displayStart - show document with startId in menu title, false by default

&level- nesting depth, default 0 - all levels

&limit- limit the number of pages in the output (default 0 - no limit)

&ignoreHidden- ignore the checkbox of the "Show in menu" page, i.e. if you specify 1, it will display all pages. The default is 0. Only those pages that have the "Show in menu" checkbox checked are displayed.

&ph - the name of the substitute that replaces the immediate output. The default is 0.

&debug- debug mode (default 0)

&hideSubMenus - expand only active submenu (default 0)

&removeNewLines- removes the line break character on output (default 0)

&textOfLinks- for the name of the menu link. Possible options:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext . Default menu title

&titleOfLinks- for the title of the menu link. Options:menutitle, id, pagetitle, description, parent, alias, longtitle, introtext. Default page title

&rowIdPrefix- sets id (rowIdPrefix + docId) for each element. Default 0

&includeDocs- id of documents, separated by commas, that will be included in the menu (not specified by default)

&excludeDocs - id of documents, separated by commas, that will be excluded from the menu (0 by default)

&contexts- context for menu generation. The default is current.

&startIdContext - Context identifier from which documents are taken to form the result.

&config - External PHP file, to store the Wayfinder configuration (example: core/components/wayfinder/configs).

&scheme - The format for generating the URL. Possible values (based on makeURL API call):

1: (default) URL relative to site_url;

0: see http;

1: see https;

full: absolute URL starting with site_url;

abs: absolute URL starting with base_url;

http: absolute URL, enforced in the http scheme;

https: absolute URL, enforced in the https scheme.

&sortBy - The field to sort by. (default menuindex)

Options:

id, menutitle, pagetitle, introtext, menuindex, published, hidemenu, parent, isfolder, description, alias, longtitle, type, template

&sortOrder- The sort order."ASC" or "DESC". Default ASC

&where - JSON-style filter options (Corresponds to where in MySQL). For example, when you want to hide a blog or news from the Articles add-on: &where=`[("class_key:!=": "Article")]`
Examples:
output only folders: & where = `isfolder = 1

&hereId - Define the current ID to use in the snippet. Use the value [[*id]] if the template is specified using the hereTpl parameter and activeRowParentTpl is not applied correctly in the menu item. By default, the current id.
You need to specify it only if the script itself incorrectly determines it, for example, when displaying a menu from a chunk of another snippet.

&hereTpl - The hereTpl template is used when the current item is displayed in the menu.
Possible placeholders:
[[+wf.classes]] - place to specify the CSS class to use (includes class=" ")
[[+wf.classnames]] - contains only the name of the CSS class (does not include class=" ")
[[+wf.link]] - address (href) for the link
[[+wf.title]] - text for link title
[[+wf.linktext]] - link title text
[[+wf.wrapper]] - place to display submenu
[[+wf.id]] - display a unique identifier (id)
[[+wf.attributes]] - display additional link attributes
[[+wf.docid]] - document ID for the current element
[[+wf.subitemcount]] - the number of items in the folder
[[+wf.description]] - displays the values of the description field
[[+wf.introtext]] - displays the values of the introtext field

Template example: [[+wf.linktext]][[+wf.wrapper]]

Template options

These options specify chunks that contain patterns that will generate Wayfinder output.

In the current version of Wayfinder for MODX Revolution, you can access your custom TVs using wf prefix placeholders. , for example [[+my_TV]]

At the time of writing, only the original TV values will be returned - they will not be formatted. For example, if your TV is an image - a typical use of such a TV inside your template will return the entire full image tag, but inside a Wayfinder template - only the path to the image will be returned.

If you want to handle TV, you can do so by calling a snippet within the Wayfinder row template (&rowTpl . For example, your image TV is called icon and usually for the output in the template, something like this code is used:

... ...

But since this won't let you handle TV, you need to replace it with:

... ...

And now inside the processTV snippet we place the following PHP code:

getObject("modResource", $myId); return $doc->getTVValue($myTV);

As a result, a fully processed TV image is returned.

&outerTpl

The name of the chunk containing the outer container template.

Available placeholders:

wf.classes - Displays the classes taken from the Wayfinder options set (including the class="") attribute
wf.classnames - display class names (without class="")
wf.wrapper - output of internal content (row).

[[+wf.wrapper]]

The &innerTpl parameter contains the same set of placeholders as &outerTpl .

&rowTpl

The name of the chunk containing the template for the elements of the menu row.

Available placeholders:

wf.classes - class output (including the class="") attribute
wf.classnames - output of corresponding classes (without class="")
wf.link - the value of the href="" attribute for the menu link
wf.title - the name of the title text for the link from the field specified in the &titleOfLinks parameter
wf.linktext - text for the active link specified in the field passed in the &textOfLinks parameter
wf.wrapper - output inner content like submenu
wf.id - output unique attribute ID. You need to specify the &rowIdPrefix parameter in order for this placeholder to get a value. The value is prefix + docId.
wf.attributes - Displays an attribute reference for the current element
wf.docid - the document id of the current element
wf.description - description for the current element
wf.level - current nesting level

Usage example:

[[+wf.linktext]][[+wf.wrapper]]

Another option:

[[+wf.linktext]] - [[+wf.description]] [[+wf.wrapper]]

Examples

First level

[[!Wayfinder? &startId=`0` &level=`1`
&rowTpl=`rowTpl`
&outerTpl=`outerTpl`
&hereClass=`active`
&rowClass=`eNav_li`]]

outerTpl chunk code

rowTpl chunk code

Second level (in this example, the menu and submenu items were visually on the same level

[[!Wayfinder? &startId=`0` &level=`2`
&rowTpl=`rowTplFooterMenu`
&outerTpl=`outerTplFooterMenu`
&innerTpl=`innerTplFooterMenu`
&innerRowTpl=`innerRowTplFooterMenu`
&hereClass=`active`]]

OuterTplFooterMenu chunk code

[[+wf.wrapper]]

rowTplFooterMenu chunk code

[[+wf.title]]

innerTplFooterMenu chunk code

[[+wf.wrapper]]

innerRowTplFooterMenu chunk code

[[+wf.title]]

Greetings dear readers. In the last lesson, we filled the site with some content (), now it's time to put everything on the menu so that users can navigate to them.

create dynamic menu in MODX we will be using the snippet PdoMenu from the package pdoTools. Before you start, read the main documentation.

pdoMenu Documentation

Options

Template options

CSS class options

Official examples

You can read the official documentation here. And now we will analyze the most typical menu calls.

Call PdoMenu

Option 1. In place of this static menu call pdoMenu snippet, for this in the resource tree, on the tab “ Elements” in the snippets section, expand the branch pdoTools, then click on pdoMenu left mouse button (do not release the button) and drag this snippet to the place where you want to call the menu, then fill in the required parameters in the window that opens and click " Save«.

Option 2. We just manually write the call.

Typical examples

Normal single level menu

For example, we have the most common menu, with the following html markup.

The result is the following code with a menu call:

&parents=`0` - a list of parents (in my case, I do not limit the selection, since I will only display certain pages anyway);
&level=`1` - nesting level (in this case it is not present);
&resources=`2,3,4,5` - a list of resources to display in the menu;
&firstClass=`0` - class for the first menu item (not which one);
&lastClass=`0` - the class of the last menu item (not which one);
&outerClass=`top-menu` — menu wrapper class (substituted in ul);
&hereClass=`current-menu-item` - class for the active menu item (substituted in li);
&rowClass=`menu-item` - the class of a single menu bar (substituted in li).

Two-level custom bootstrap menu

The static html code looks like this:

Its output code will be like this:

Also in the next lesson, I will give a couple more outputs of drop-down menus based on bootstrap (and this is for those who did not catch the essence. Well, then we will do .

At first glance, everything looks complicated, but it’s not, read the documentation for more details, ask questions in the comments, I will definitely help.

When handing over a finished site, webmasters try to automate all processes as much as possible so that the client, after the handover of the project, does not pull them over trifles. One of the most frequent problems is precisely with the creation and editing of new menu items.

Therefore, one of the main tasks of a webmaster is to create a dynamic menu so that all actions for editing the menu structure can be performed from the administrative panel.

This can be done using special MODx tools - snippets.

snippet is a php code that runs in the MODx template and allows you to display information from the CMS database.

Snippets are divided into two types:

cached;
not cached.

Their difference is in the call structure. So, for example, if we have a snippet called "SNIPNAME", then with a non-cached call, the construction will look like this:

[!SNIPNAME!]

With the cached version, it will look like:

[]

Here the question may arise, why make the snippet cacheable? The fact is that when using the cache, the design is saved and there is no constant access to the database, which in turn increases the speed of loading pages and reduces the load on the server. But often, you may encounter the fact that after being cached, the webmaster performs some actions, but they are not displayed on the site; to display them, you must first clear the obsolete cache. I'll talk about this a little later. We will use the non-cached menu option.

The second important characteristic of snippets are − Extra options, which can be set directly when calling this construct. The schema looks like this:

[!Snippet_name? ¶meter1=`parameter value` ¶meter2=`parameter value` !]

Sign "?" - gives the system a signal that it is followed by parameters that need to be applied to the snippet. And the snippets themselves are separated by the "&" sign, and the values are taken in back quotes. If you put the wrong quotes, then nothing will work.

How to set up a dynamic display of the menu structure?

To display the menu in MODx, we will use the snippet:

[!Wayfinder!]

We will not be able to use it in its “pure form”, since this requires the presence of nested materials, and it will be displayed only on the main page. It will be correct to indicate the id of the article from which it is worth doing the countdown. With this method, we can create many different menus using id for this. In practice, it will be more clear.

Since now the Parent item is “Main” with the value id = 1. The construction should look like this:

With this construction, you can display the menu from child items. Let's put this into practice.

Go to the "Elements" - "Manage elements" - "Chunks" tab. Select the "HEADER" chunk and find in it the code that is responsible for displaying the menu.

HOME

home
about us
services
projects
solutions
jobs
blog
contacts

Let's insert the construction of the above snippet instead of this code:

[!Wayfinder? &startId=`1`!]

As you can see, the menu is connected, the url changes in the address bar, although the template remains the same, we will fix this in the next lessons.

But there are two problems here:

1.) The active menu item is not highlighted.

2.) The menu item "Home" is missing.

Let's fix these bugs.

Connecting the active menu item

By default, the Wayfinder snippet generates an active menu item with the "active" class. So we do not have to add an additional script, but just change the class in the css file. To do this, go to the folder with our template - /assets/templates/retina/css/style.css. Please note that the folder name of the template folder may differ for you, it all depends on what name you entered in the first lessons. Open this file and look for a line with styles for the active menu item. I have this line - 190, and here is the code itself:

#navigation a.nav-btn ( margin-bottom: 15px; text-decoration: none; padding:0 36px 0 10px; line-height:30px; display:block; background: url(images/navigation.png) repeat-x 0 0; height: 30px; position: relative; )

We replace the class ".nav-btn" with "active".

We connect "Home"

And so, as you understand, we have deduced child items from the “Home” menu item. To pull up this item itself, you need all of our menus to be of the same nesting level.

First, we check whether access to the root folder is open. To do this, go to the "Tools" - "Configuration" - "Users" tab. In it we find the parameter - " Allow access to the root folder” and set the value to “Yes”.

After that, select the item, let's say "Services", go to the page for editing it and click on the icon below, as shown in the screenshot.

After clicking, you need to select the parent menu item in the left column of materials, we select the root folder. Screenshot below.

We click on it and save our article. The material itself should move to the same level as the "Main".

This action must be done with all subparagraphs. You should have the following structure.

If you now refresh a page on your site, your menu will disappear. All because the id of the parent category has changed. Let's fix it. To do this, go to the "Elements" - "Manage elements" - "Chunks" tab. Select the "HEADER" chunk and find the code in it:

[!Wayfinder? &startId=`1`!]

And change to:

Everything, the menu is completely ready and matches the template.

If you notice, then by the template you can see that in the footer we have a menu that exactly repeats the items of the option we just created. Therefore, I propose to immediately correct this block. To do this, go to the "Elements" - "Manage elements" - "Chunks" tab, select the "FOOTER" chunk. In it we find the code responsible for displaying the lower menu, and instead of it we insert the construction we already know.

[!Wayfinder? &startId=`0`!]