FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.3 Menu Module Options

Menu module options are very important for controlling the rendering over this module. In this lesson we will look at all of the options including rendering levels, page assignment, permissions and more.

4.3 Menu Module Options

Hi, guys. Welcome back to A Beginner's Guide to Using Joomla. And in this lesson, we want to continue on learning about the Menu Manager component. So, continuing on, what I've done is added in more menu items. I've also nested some menu items, so, for example, Site Work, and Understanding Modules. These two menu items are nested inside of Another About and then I've also created a third level which we have welcome to your blog. So that menu item is inside of understanding menu modules which is inside of Another About. So we have this really nice hierarchy and you can see there by the lines how this is all divided up. And then, of course, we have the same content being generated in the footer. It does look obviously different, because it's in a different position, but it's still generating, effectively, the same HTML code. Also, if we go into the back end, and click on Test Menu, you're able to see here the structure, and you have those nice dashes right there to again indicate the hierarchy, so what menu items are embedded into what menu items. So, now that we have a nice hierarchy in here for the test menu. What I'd like to do is go ahead to start to modify the modules. So we have the test menu modules which I know is the sidebars and test menu two which I know is the footer. So I'm going to click on test menu and we can start to modify the options that are available to us. Now, also what I'd like to point out is this just an I frame that's being loaded up into Light Box right here. And, it just allow us to make quick edits and then come out. But, we only have a save and close option and a cancel. So, what I'd like to do is again, go to the extension drop down and then go to the Module Manager. And then inside of there I'd like to modify the Test Menu module from here. It's the same thing as you can see, all of the same options are available. But now we can just quickly save it and view the changes in the front end. So first of all, we have the Module tab and below there we have the type of module. So the type of the module is Menu. So it's a Menu module because it's generating HTML code for a menu. Then directly below there we have the location of the module. Now typically when you think of a module you think of the front end and most of the time when you create modules you'll be creating that for the front end. But it's important to note that modules can also be for the backend. So when you log in to the administrator interface, you'll come to the Control Panel. And in there you'll see popular posts, recently added articles, and also you'll be able to see site info and others. These are modules, so modules cannot only be injected into the front end but they can also be injected into the backend. So, if it's says sight, it means that the code is going to be injected into the front end, and if it says administrator, that means the code is going to be injected into the back end. Now, on top of that, we also have the description below there, that just gives us a quick description of this type of module. Then directly below there, we have the options for this module type. The first option is to Select Menu, which as you know, a menu can have multiple modules associated with it. Generating different HTML code for that particular menu. But what we need to do is select which menu we'd like to generate the HTML code for so then it can be rendered on the front end. Then we have the base item which allows us to select a menu item to always be used as the base for the menu display. But however we'll come back to this in just a second. Carrying on from that, we have the Start Level, which allows this to say what level we want to start the rendering of our menu at? So now, let's say that I change the starting level to level two while we start at level one. But now because we said start from level two, it's going to ignore not render all of the menu items on level one, which in our case is Another About. That menu item is on level one and because we start on level two That menu item will no longer be rendered in our menu. And we have the end level to say where we want to stop rendering the menu at a certain level. So by default it's set to All, meaning it will render all levels from the starting level. So if I set the end level to level two, what would happen is it would only start on level two and end on level two. So now we won't get any menu items on level 3 and above. So, we have ultimate control over the rendering of our menu items. On top of that, we also have Show Sub-menu items. So if it's set to no, what will happen is it will go to the start level and render everything on the start level, but it will not render any sub-menu items after the start level. So now I'm going to reset all of the values back to their default. Now I'd like to talk about the base item and also about the starting level and how that affects this module. So if you set the start level to level one and you have the base item set to current. What will happen is your module, the HTML code will be generated on all of the assigned pages. So, at the moment my module right here, if we go to Menu Assignment, is assigned to all pages. So, now this menu, this module, the HTML code will be visible on every single page within our sight. But what does the base item really mean and, what if we change the Start Level? Well let's do that. I'm gonna change the Start Level to level two, and save it. Now you'll notice something very strange will happen. When I hit refresh, and we're on the home page right here, you'll notice the test menu disappears, About also disappears. Author Login again, it disappears. And it disappears on pretty much on the pages on the site except for Another About, Site Work, Understanding Modules, and also Welcome to your blog. And all of those pages you will find the test menu but on the other pages you will find that the module simply disappears, that menu disappears. Why is this? Well the reason why this is because you'll that if the base item is set to current, then what it will do is Joomla will look at the currently active menu item on the page. And this causes the module to only display when the parent menu item is active. And that parent menu item must be a part of the menu in question. So in this case it's the test menu. So notice for example that when I go to welcome to your blog, you will notice that one of the menu items within the test menu will be currently active and the parent will also be active as well. And so when the parent is active it renders the html, for that particular module. So this can be useful in some cases where I click on the link, and it shows me a menu, and it has relative links in there. But however, let's say for our given sake that I don't want that. I do want it to render from level two though, but I want to force the menu to show up on all of the assigned pages. So if we want that to happen, we need to change the base item, and if we drop that down you'll notice that we have the testmenu, and what I can do is select Another About. You're probably going, well why have you selected Another About when we start at level two and Another About Is on level one. Well the reason being is because the Start Level must be the same or higher than the base item ideally. And what that will do is it will force the specific menu item to be active. So now we're forcing another Another About to be active. And so as that is the parent on level one, it will force this to show on all of the assigned pages. So if I save it and now we go to, let's say, the home page, you'll notice now on the homepage this menu is still showing. Now Another About isn't actually visible because we start on level two of course. That however, because we forced Another About to be the base item, it is technically the parent. And therefore it's active and therefore it shows up on all of the assigned painting which in our case is every single page throughout our site. So that is how It actually works and it's very important to note that this does take a lot of getting used to, a lot of playing around. But the typical rule is that if you start on a level greater than one then you are gonna want to set the base item to a particular menu item so that you can force it to show up on all assigned pages. If you just want it to be strictly conditional, you only want that menu to show up at certain intervals when they go on to certain pages, and also certain child pages, that can also affect the display of the menu, then you can leave it like that. But in other cases where you say right, I want this menu to show up on all assigned pages then I need to force the base item so that it remains active on all of the assigned pages. So now that we have our menu showing up on all assigned pages, now let's take a look at the Menu Assignment tab. Now with the Menu Assignment tab we get to choose where our content is visible on the side. So for example, we can say Module Assignment and we can say assign this module to all pages. So, every single page on this site will have this module assigned so we'll see the content. I could also say no pages, that means that this module will no longer be rendered on any page within our site. But, however, I can also be very specific. So, I can say only on the pages selected. When I select this on the drop down and it gives me a directory structure of all the different menus and the menu items. Now it's important to note in Joomla that menu items represent pages, and so the menu items that are ticked are the pages that will have this module assigned and allow this module to be rendered on that page. So we have the Author menu, you have the Bottom menu. Main menu and the Test menu as well. Now on top of that, you can also say well, for the Author Login in the Main menu, I don't want this module to show up. But for the Author Login in the Bottom menu, the one in the footer, I do want this module to show up. So even though they show the same content, I can say well, for one page I would say yes, allow it, and for another I can say no. Even if it's rendering the same content. So I'm going to save this now, and hit refresh. So now you'll notice the text manual shows up, but when I go to Author Login, it disappears and we're going to Author Login through the main menu. But when I go to the author login, in the footer, you will notice the test menu now renders, but we're still at the author login, it's still the same content. Then you can also do the opposite, by saying on all pages except those selected. So now, those selected menu items, those pages that have been selected, it will not show this module. So at the moment the Author Login on the main menu will actually be the only page allow to render this module. So I go to home, about, then I go to author log in, and the test menu show up. So you can just do that and reverse all this. I'm gonna change that back to on all pages. Now on top of that you also have Module Permissions. So what I can do is target, again, a certain user group. So let's say the Test Manager and say that they are not allowed to delete this particular module. So they will be allowed to put it into the trash, but they will not be able to empty the trash on that specific module. I can also say they are not allowed to edit this module, which means I'll no longer be able to click on it directly. I can tick it and say Edit, but then I won't get any Save button to save my changes. And also, I can say that they are denied the permission of changing the state of this particular module which means that they won't be able to change it to unpublished or published or even send it to the trash. It will say that editing this state is not permitted. We can also take a look at the advanced tab. Now in here, you can see we have the menu tag ID, so we can have an ID attribute which applies to this in the HTML for custom style. You can attach a menu class suffix you can set the target position. And again, you can have a look at the pop ups and find out these options and what they're all about. You can have an alternative layout. But again we're just using the default layout for the module. You can have the module class the fix. You can even change the caching to say no caching for this particular module. So, then, it's always going to stay up to date and never show an older version. You can also set the cash time, the module tag, so you don't have to stick with a div, you could you use some of the more modern HTML5 tags if you wanted to. Bootstrap size, header tag, header class, and module style as well and again, you can just flick through and take a look at all of these different module styles. And play around and have a lot of fun with it with the Advanced tab. So now after seeing all of this hopefully you understand how Joomla uses modules and it can be for the back-end and the front-end. And you can see how flexible this is, because we can take a specific module and modify it in such a way that it works exactly how we want it to work. So thank you for watching me in this lesson, and please join me in the next one, where we'll take a look at menu items.

Back to the top