Changing the top menu. PdoMenu - creating a menu in MODX Wayfinder revo parameters
Today we will make a menu for our blog using the Wayfinder snippet (documentation for the Wayfinder snippet). The top navigation and the main one on our blog consists of two parts:
- Mobile
- Regular
Therefore, we will do the navigation in a double instance). So, we will split our main navigation into chunks. According to the documentation, you should get 4 chunks (don't forget to remove spaces):
& outerTpl = `wayOuterTpl` - chunk wrapper of the main list
& innerTpl = `wayInnerTpl` - chunk wrapper dropdown
& rowTpl = `wayRowTpl` - chunk output of list items
& parentRowTpl = `wayHasChildTpl` - chunk output of parent list items
And here is the snippet call in the header chunk:
[ ]
& startId = `0` - set the beginning of the snippet pass, in our case from the site root.
& level = `2` - the number of levels in our menu.
The next step is to display our mobile menu. A principle similar to the one I outlined above, here we also need 4 chunks.
& outerTpl = `wayOuterMobileTpl` - chunk wrapper of the main list.
& innerTpl = `wayInnerMobileTpl` - chunk wrapping the inner list.
[[+ wf.wrapper]]
& rowTpl = `wayRowMobileTpl` - chunk displaying list items.
[[+ wf.wrapper]]
& innerRowTpl = `wayInnerRowMobileTpl` - chunk displaying elements of the inner list.
[[+ wf.wrapper]]
Wayfinder will look like this:
[ ]
Everything is the same, only the chunks have changed. Now we have mobile navigation, you can test it using the Responsive Web Design Tester tool for Opera and Chrome.
Here is the complete code for the header chunk:
Big Things ... Small Packages
Our navigation is ready! In the video, we also looked at creating a category menu on a blog. Since the principle is the same, I did not consider here, watch the video) See you in the next lessons!
Date of publication: 07.02.2011
In this easy tutorial, I'll show you how to customize the menu.
Once I was asked to fix a bug with a 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 a crooked css, as I suggested at first, but in a crooked call to Wayfinder.
What is Wayfinder- this is a snippet that is used when you need to display a list of documents for a section / s. As a result of the work of the snippet, an unordered list is generated. With the help of various parameters you can do whatever you want 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. questions of beginners in this lesson, I do not consider.
2. Placeholders, which I will use in the tutorial, are specified in the format that the Evo version "understands". What is the difference, see an example:
So, let's take a look at creating a menu step by step.
Step 1
For the lesson, I sketched out the following menu:
Here, for clarity, I've applied different styles to different menu levels. On the site where I fixed the bug with the menu, it was about the same - each menu level has its own style.
Layout - layout details are not included in the scope of this lesson, here's the code I got:
Having admired the code, we determine for ourselves which class in our menu is responsible for what (if you are poking around in someone else's code, it should be clear in your own):
ul class = "menu" - the class of the whole menu
li class = "top" - class of top-level menu items
a class = "top_link" - class for links in top-level items
ul class = "sub" - class for submenu
well, span class = "down" for the design of top-level items
Step 2. Create three documents
Products and services
- Delivery
- Suppliers
For the document "Products" we create child documents: "Serum of Truth", "Means of Makropulos", "Universal Means".
Step 3. We take out the menu in a separate chunk
In the template, in the place where you should have a menu, remove all unnecessary code (the html code of the menu itself), write instead
((menu))Thus, we bring the menu into a separate chunk. Then we create a new chunk and name it menu... While in the contents of the chunk, you can copy the menu code that you laid out. 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 this is not a menu yet. Let's breathe life into it with Wayfinder.
Step 4
Delete all the contents of the menu chunk and call the Wayfinder snippet instead.
For now, let's write like this:
startId parameter- indicates with which document to start forming the list. We have specified 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 simple code () by default, all classes of lists and elements are specified with 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 parameters we need: outerClass- class for the menu container. Comparing it with our layout, we get the following Wayfinder call:
[[Wayfinder? & startId = `0` & level =` 2` & outerClass = `menu`]]in addition to the parameters with classes, we specify nesting level - & level = `2`.
We note the shortcomings - there are no classes for top-level menu items, no tags and a class for the submenu.
All of these shortcomings are corrected by adding appropriate parameters to the call to Wayfinder.
5.2. Adding Classes to Top-Level Items and Tags
There is a variable for this rowTpl, which describes the template for the menu item, we make such a template, for this we create a chunk called parent:
In the Wayfinder call, add & rowTpl = `parent` .
Do not forget to check the source code - almost everything is fine, there is a submenu left.
To customize the submenu, we use the innerRowTpl variable.
Create a chunk inner:
Add 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!
You can change the top menu of the MODX control panel either by changing the order of items, or by hiding some of them from certain users. You can also add new items to existing or personal 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 of the items. You don't need to understand the new menu system to customize the menus, but this understanding is helpful, especially if you intend to create Personal Control Panel Pages that can be accessed from the menus.
Top Menu Tree
Go to the top menu section System -> Actions and you will see the basics of the menu system. The tree on the right (Top Menu) contains the valid menu items and submenus. If you expand the various sections, you will see that this is an exact copy of the top menu. Top-level items are what you see at the top of the control bar. These are almost always 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 cache or navigating to the access control panel). In fact, the top menu items can also be actions, but none of the top menu items are configured in this way.
What happens when you click on a menu item is actually defined here. As you will see, you can easily override what happens when a menu item is clicked, and you can rename, hide, or delete menu items. You can also add items to the menu and specify what happens when you click on them. In fact, you can create a completely new menu system for the control panel that replaces the existing one and different users can see different menus. All of this can be done without changing the MODX kernel.
The physical display of the menu is also set here. It is not a coincidence that all menu items are in the same order as they appear in the top menu. If you move them around in the tree, the top menu will also change when you reload the page.
Let's take a look at some of the control panel actions, but be careful not to change them - click the "Undo" button after viewing them.
In the tree located on the right (Top Menu), right-click on the "Site" item and select the "Edit" item in the drop-down menu. An Edit dialog box appears with fields that define the menu's action:
Name- the name of the menu item
Description- description of the menu item
Action- specification of the PHP file to be executed
Icon- additional icon for a menu item
Options- optional parameters $ _GET for URL
Handler- JS code to be executed
Access rights- comma separated list of required access rights
Note that most of the "Site" fields are empty. This is because it is a container for the submenus within it. If you click on the "Site" menu in the top menu, nothing happens.
Let's take a look at a submenu that does something. Click on "Cancel" to end the dialog, open the "Site" section of the tree in the right panel, right-click on the "Update Site" submenu and select "Edit".
Note that the dialog box that opens contains the contents of the "Handler" and "Access Rights" fields. The Permissions field tells us that the user cannot perform the action of this menu subitem if he does not have the empty_cache permissions. The Handler field contains the actual JS code that is executed when you select this subitem. All items in which some actions are actually performed have fields filled either "Action" or "Handler". 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 not filled, then the action from the "Action" field is performed. The "Action" field is usually a pointer to either a file controller or one of the actions in the "Actions" tree located on the left (which actually point to the corresponding controller files). Close the dialog by clicking the "Cancel" button.
Let's take a look at a variant of a menu item 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 Batcher and select "Edit". Now we see the filled field "Action, not" Handler ": batcher - index. Exit the editing 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 that 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 and dropping 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". To add an item to the top-level menu, you can also click the Add Item button.
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 items will be deleted. This action is irreversible.
If you want to remove a menu item without actually erasing it (which is almost always the best course of action), you can hide it by placing 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 access right. If you want to show a specific menu item to certain users (but not everyone), simply create a new policy template containing only user permissions, create a new policy based on that template, and create an ACL context 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 "core" namespace and the "topmenu" theme. The topic dropdown 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 desired menu item, double-click on its value and change it. Any changes you make here will remain in effect after you update the MODX version and after you update any of the third-party components.
The above method will only work for kernel-built menu items. 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 management string for the batcher namespace.
Actions tree
Return to section System -> Actions if you got out of it. In the left pane, click on the "index" action below the name "batcher" and select "Edit" from the drop-down list. Recall that this is the action pointed to by the Batcher menu item in the right pane. 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
With the binding to the controller that will be executed when this menu item is clicked, MODX will create a full path like this:
namespace_path + controller_name + .php
In other words, assuming core is in the 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 launching Batcher in the control panel. We'll create a new menu item in the Components section a little later when we create custom dashboard pages.
Many menu items in the right pane do not have the active actions shown in the left pane. This is because the paths to their controller files are stored in the MODX database and do not need to be edited (at least this is more difficult to do). These paths are stored in the modx_actions table. Each action has its own identifier (ID) and a path to its controller. The action also has a helper URL for context sensitive help when the controller is active and several other fields. For the actions shown in the Actions pane on the left, you can see the IDs in parentheses next to the action name.
Adding a menu item to the tree for any action in the control panel is done, therefore, by creating a menu item in the right pane and by creating a corresponding action (controller) or adding a handler. If the controller already exists, you can simply select it from the Actions drop-down 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 security / user / create action for the "core" namespace. As you can imagine, a top menu item that has a handler, but does not have a corresponding action (like the "update site" menu item) in the "Actions" tree. It doesn't need an Action item, since the handler contains the code to do this. 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. Let's notice its ID. When you click on a top menu item, the MODX gets this ID. Then the URL of this page is generated in the control panel and the user is directed 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: //site/manager/index.php? a = 79
If you click on the Batcher menu item, you should see a similar URL where you will see the ID of your Batcher action index. When the request handler receives this URL, it checks the presence of this menu object in the database, the user's access rights to execute it, sets the URL for the help, and executes the file controller for this action (if there is a handler, then the handler 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 simple enough and do not require you to understand the inner workings of the MODX menu / action system to use them.
Be careful here, as all your changes will still apply when the site is updated and there is no easy way to revert to the default menu. Most of the actions we'll take here are easily reversible, but you'd better write down the initial menu structure before making any changes. It is best to practice on a MODX setup first, which will not be used for this site.
Changing the order of menu items
You can change the order of the top menu items in the control panel or any items in their submenus. Go to section System-> Actions and expand the menu tree to the right (under the Top Menu heading).
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 and dropping them. Just click on the menu item you want to move and hold down the mouse button, move it 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 and dropping 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 straightforward. Go to section System-> Actions and expand the menu tree to the right (under the Top Menu heading). 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 need and click the "Save" button. Typically MODX users enter new items in the Components menu, but you can add them anywhere. To delete 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 with no children and no action or handler specified will not appear on the menu. This is why the Components menu that you see in the tree doesn't show up in the menu when you first install MODX Revolution - no components are installed yet.
As a simple example, let's create a new custom menu that will guide you to the most frequently 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 will create a top menu item called "My Menu" in which we will place the specified items. Note that we will be doing all the work in the right pane (Top Menu).
Go 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 they are not, drag them to the desired location with the mouse. You can also change the order of the menus and submenus.
After you have achieved the desired menu location, reload the control panel page in your browser. You should see a new "My Menu" item in the top menu, containing three submenus that should lead to the corresponding sections of the control panel.
If you want to remove any menu item that you have created, just go to the section System-> Actions, right-click on them and select "Delete". It is a good idea to delete all submenus before deleting the main menu item so that they do not 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 access rights attached to the menu item. Go to section System-> Actions and expand the menu tree on the right side (under the Top Menu heading).
Right-click on any item or sub-menu item and select "Edit". A dialog box appears with the bottom "Permissions" field. Be careful not to change any other field.
If you try to hide existing menu items, you will see that the "Permissions" field for some of them is filled, and some are not. What actions need to be taken to hide a field depends on whether this field is filled in or not.
If the "Access rights" field contains a list of access rights, you can create a new access policy (or edit an existing one) to block this access right and the menu item will be hidden. This operation can have side effects as other menu items in the control panel may depend on the same access rights. A better method may be to add additional user-specific authority specifications to this field.
The Permissions field can contain a comma-separated list of permissions. This menu item will be seen only by users with all the listed access rights.
Let's take a look at an example. Suppose you want to hide the User Management submenu in the Security menu from all users except the Super User.
Go to section System-> Actions and expand the menu tree, and then right-click on the "User Management" sub-item and select "Edit". The Access Rights field must contain view_user. We're 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 there are no spaces in the entered data. Users now need to have both of these access rights to see the User Management sub-item, and since no one has a second access right (since we just came up with one), no one will see this sub-item.
For menu items that do not have access rights, the procedure is the same. You simply add the new custom permissions in the blank Permissions field.
Note that after we added our user permissions, the unrestricted Super User will also not see the User Management 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 unlimited administrator those access rights first before creating custom permissions.
Since the default Administrator group in Control Panel is protected, you need to create a new access policy template that contains user access rights and a new access policy based on them. You can put all your custom access rights in this access policy template. In chapter Security-> Access Control click on "Create Access Policy Template". Use the following parameters for the dialog:
Name : CustomPermissionTemplate
Template group : Admin
Description :
After that, right-click on the "Add permission" button. Use the following parameters 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 parameters in the dialog:
Name : CustomPermissions
Access policy template : CustomPermissionTemplate
Description : My custom permissions
Click on the "Custom permissions" access policy and select "Edit". Scroll down to the my_view_user_menu permissions and check the checkbox next to it. Click on the "Save" button in the upper right.
Now we need to give the unrestricted Super User this access right by creating a new ACL item. 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. For the dialog, use the following parameters:
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 also users with this access policy). If you go to the control panel as one of the site editors, the "User Management" sub-item should be absent.
| Back | Forward |
Getting Started 8 MODx Revolution Lesson For Beginners. I remind you that we are making a site for learning MODx Revolution. In the last lesson, we covered the concept of snippets, which are chunks of PHP code that allows us to add functionality to our website. In this tutorial we will look at a very special snippet - Wayfinder, and we will use it to create a dynamic menu for our site.
What is Wayfinder?
Wayfinder Is a snippet that displays an unsorted list of links to resources in your site tree, the type of list output depends on the call of the snippet and the parameters of this call. In general terms, this means that when you place a call to Wayfinder in your template, it starts looking for resources that match the parameters specified in it and returns a list of links to these resources in an unsorted list format or in a format you specify.
Why use Wayfinder?
Usually I use Wayfinder to create dynamic site navigation, that is, menus. Since most HTML templates use unordered lists to create menus, Wayfinder is the perfect tool for this. When creating a site, you can painstakingly insert your urls into the navigation menu, as you did before in a static HTML site. At the same time, every time you need to delete or create a page, then you need to make the appropriate changes in your menu, change the urls. Using the Wayfinder snippet to dynamically generate your menus avoids this headache, as it automatically detects changes and changes your menus accordingly.
Wayfinder is quite flexible and allows you to define which resources to include or exclude from the menu, what the menu template is, how deep your site's menu is. Your limits are determined by your HTML / CSS code.
How do I use Wayfinder?
As we mentioned in the previous tutorial, the syntax for calling snippets looks like this: [[! Somesnippet]]
This is just a basic call and is not enough, besides that we have to define some properties of this call. In the case of Wayfinder, the very minimum that needs to be defined in properties: where in the resource tree Wayfinder should start building a list of resources. Thus, in the call to the Wayfinder snippet, you must specify at least one parameter - the initial ID. The basic call to the Wayfinder snippet would then look like this:
This call tells Wayfinder to start at the root of the tree ( ID 0 means the root of the site) and shows all resources that are published and that do not have a checkmark in the checkbox Hide from Menus.
If we look at the template we are using, we can see a top menu with several items and drop-down lists.
Let's take a look at the template and the code that displays this menu:
As you can see, this is a nested unordered list. Let's replace this code with a basic Wayfinder call and see what we get. Remove the above code and paste in its place:
[[! Wayfinder? & startId = `0`]]
If you are using the same template as me, then your code will look something like this:
Save the template and look at the home page, it should look like this:
Fantastic! You can see that our previous menu, which had several items, has now been replaced by a simple menu with only one item - Home. This tells us that Wayfinder is working as expected and takes one page from our site and displays its title as a menu item.
Let's create a couple more resources. I'm going to add an About page with 3 child pages (MODx, Tutorials, Contact and FAQ pages). You can create whatever resources or pages you want for your site. The goal of this exercise is to create some assets so that Wayfinder has something to display.
I ended up creating the pages and my site resource tree looks like this:
Now that we have a few pages, let's see how calling Wayfinder will generate a menu for our site:
The good news is that all of our pages have appeared in the menu and by clicking on each menu item we get to the corresponding page. (To test this element, add some text to each page, for example on the About page you can add “This is an About page” and this message will appear when the page is opened. Remember that we need to define a template for each page, but at the moment I am not I'm going to worry about it).
The bad news is that the menu formatting is broken, but we can fix that. Right click on the web page and see the source code (or use firebug for that), you will see that now Wayfinder generates HTML like this:
- Home
- About
- MODx CMS
- The coding pad
- The Blog
- The Services
- Contact Us
- Tutorials
- FAQ
As you can see, this looks very similar to our initial static code with a few exceptions. First, Wayfinder generated
- clause without class sf-menu which was used in our static code. The template needs this class to work with CSS. It can also be seen that
- items have a parameter span which refers to the link text elements in the original static code and is not in the generated Wayfinder code. In addition, our static HTML code has a class acurrent-page-item which is not represented in our Wayfinder snippet code. All these missing pieces make our menu look unsightly.
How to customize the output style of the Wayfinder snippet
Looking at how Wayfinder generates the code, we have a very natural question: "How do we add the missing pieces of code so that we would like to display the menu in the form we need?" The answer is very easy, we use template chunks to format the output of the Wayfinder snippet.
Wayfinder is flexible and you can use parameters to define the appearance of the output. Some general parameters allow you to determine at what level to start building the menu, which items are not included in the menu, etc. Other parameters are template parameters that allow you to set the html code of the template for your menu, etc. Descriptions of the latter can be found in the official documentation –http: //rtfm.modx.com/display/ADDON/Wayfinder.
Take a note: some Wayfinder options have a default value.
This explains, for example, why in the menu generated by Wayfinder, the Home page item has the class name “ first active”. This is the default class, but we can overwrite it by designating our own classes in the template chunks.
We will be using several Wayfinder parameters in this tutorial, but I advise you to study all of them and practice using them as much as possible to understand their full capabilities. Since the default parameters of Wayfinder are clearly documented on the official website, it would be silly to talk about them here. We'll be using more and more of these as we work through the various menus.
To start working on a menu template, let's create some mini-templates and save them in chunks. You will see that in these chunks we use HTML code, but replace dynamic elements placeholders(or placeholders as they are also called) whose syntax looks like this: [[+ placeholder]]... The placeholders we use are special in the Wayfinder snippet and their definition is obvious from the name, but you can always consult the MODx documentation for more complete help.
Here are the chunks I'll be using to create our template:
7in1menuOuter- will contain the HTML code for our outer ul container.
You can see that I have added a class for the outer ul. An alternative way to do this is to use the wf.classes placeholder and then add the class name to the current wayfinder call using the parameter outerClass... But for the sake of simplicity, let's use the first method, but both of them will work fine ...
7in1menuRow- will contain the HTML code of the first level menu items
- [[+ wf.linktext]] [[+ wf.wrapper]]
- [[+ wf.linktext]] [[+ wf.wrapper]]
The main point here is that I added the tag to the text of the menu link as in the original static HTML code. I've also included the wf.classes placeholder and this will allow me to define a class for the current page that will overwrite the default “active” class.
7in1menuInner- will contain the HTML code of the inner ul containers
- [[+ wf.wrapper]]
7in1menuInnerRow- will contain HTML code for lines of paragraphs of inner levels
That's it, now our template chunks are in place, as you can see (for order, I put them in a separate category):
Now we can change the call to Wayfinder so we can use these mini templates to output Wayfinder. If you take a look at the list of templating parameters (it would be useful to have http://rtfm.modx.com/display/ADDON/Wayfinder open in front of your eyes, or print it and keep it near the screen), you will see that I called my chunks similar to the corresponding snippet call parameters. I did this for convenience, it helps me keep track of what's what when I start constructing my call. Let's add parameters and call our chunks. Wayfinder will now be called:
[[! Wayfinder? & startId = `0` & outerTpl =` 7in1menuOuter` & rowTpl = `7in1menuRow` & innerTpl =` 7in1menuInner` & innerRowTpl = `7in1InnerRow` & hereClass =` current_page_item` & firstClass = `` & lastClass = '']]
Parameter values are enclosed in apostrophes (`), not in single quotes (').
Great, let's take a look at this challenge. You can see that we are using templating parameters to call our chunks so that Wayfinder outputs the HTML we want with the correct classes. I have defined a callable hereClass parameter and gave it a value current_page_item to match a static HTML template. You can see that I left the parameters firstClass and lastClass empty. The reason for this is that my HTML template does not set a class for the first and last menu items, so to avoid overlaps I have overwritten empty lines in them.
It can be seen that our menu looks exactly as we wanted. The correct styles are used in the dropdown menu. If you look at the source code, you will see that the generated Wayfinder‘Om HTML code has changed beyond recognition:
This code matches the original static code of our template, but it was generated by calling Wayfinder.
There are many other parameters that you can use in conjunction with Wayfinder to build your menus. In the next tutorials, we'll look at complex menus and how to integrate them into Wayfinder. To summarize: now our site has acquired some form and we have a functional and dynamic menu.
In previous tutorials we have already created MODX menus: 1st - and 2nd - Displaying a standard MODX dropdown menu using Bootstrap. Today we will learn how to display multi-level Bootstrap menus with an unlimited nesting level (3-level menus, 4x, 5, etc.).
For example, I will display a 5-level Bootstrap menu, but you can make it both 3-level and 7-level, at least 10 by changing the value level what you need!
Displaying layered Bootstrap menus (with unlimited nesting) in MODX using PdoMenu.
The output of the multilevel menu will be like this:
[]> [[+ wrapper]]
It won't work out of the box. since Bootstrap 3 by default only supports 2 levels of nesting, and in order to expand the nesting level of bootstrap 3 menus, you need to include a js file with the following content.
(function ($) ($ (document) .ready (function () ($ ("ul.dropdown-menu") .on ("click", function (event) (event.preventDefault (); event.stopPropagation () ; $ (this) .parent (). siblings (). removeClass ("open"); $ (this) .parent (). toggleClass ("open");));));)) (jQuery);
After that, the 3rd, 4th, etc. will begin to open. nesting levels. In principle, that's all, but there is one thing, this menu will open down all levels, and this, in my opinion, is not very correct and beautiful, but it can be fixed with the help of CSS.
In my case, I ended up with 2 lines of CSS code to make the levels fall sideways.
Ul.dropdown-menu (left: 100%; top: -8px;) li.submenu1.dropdown.open> ul.dropdown-menu (left: 0%; top: 100%;)
You may get a slightly different (but identical to this) code and the number of its lines may be more if you have several branches of a menu with a submenu. Well, and on the little things you will have to adjust the css to your taste, my goal is to show the basis. How to find the necessary css classes in the code to which you need to apply styles is shown in the video, well, to be more precise, the whole process of creating a multi-level menu is shown there.
This menu came out in my video.
If you need to rotate the triangles in the dropdown menu (they point downward when the items drop to the left), what would happen like this.
Then add the following css code:
Li.submenu2.dropdown> a> span.caret (-moz-transform: rotate (-95deg); -ms-transform: rotate (-95deg); -webkit-transform: rotate (-95deg); -o-transform: rotate (-95deg); transform: rotate (-95deg);) li.submenu3.dropdown> a> span.caret (-moz-transform: rotate (-95deg); -ms-transform: rotate (-95deg); - webkit-transform: rotate (-95deg); -o-transform: rotate (-95deg); transform: rotate (-95deg);) li.submenu4.dropdown> a> span.caret (-moz-transform: rotate (- 95deg); -ms-transform: rotate (-95deg); -webkit-transform: rotate (-95deg); -o-transform: rotate (-95deg); transform: rotate (-95deg);)
Related publications
-
Determining the speed of movement by gps By the way, an interesting fact on the speed of the Sun in the Galaxy
We highly recommend getting to know him. You will find many new friends there. It is also the fastest and most efficient way to get in touch with ...
-
Delete using your phone
Sometimes users have a desire to delete their account on a social network, and of course the question arises - how to delete a page ...