FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.4 Menu Items

During this lesson we discover the importance of menu items and their significance in Joomla. We’ll also look at the different types of menu items which allow us to change the content that will be rendered.

4.4 Menu Items

Hi guys, welcome back to A Beginner's Guide to Using Joomla. So in the previous lesson, we spoke about the Menu Manager, and of course, what we need to do is associate menu items with the menu. So we have test menu. When you click on it, you now take a look at the menu items of that specific menu. And you can alternate between the menus by simply clicking this drop down and going to another menu to view the menu items associated with that menu. So you're about to realize that menu items are very significant in Joomla, and that's because it's not like other content management systems where you create a page and then you link to it, or a link is automatically generated. This is very different from Joomla. With Joomla, your menu items are effectively the page. What you are doing when you create a new menu item is you say what content you want to show, how you want to show it, and how it will be rendered. So with menu items in Joomla, they are pages. Also in the previous lesson we saw that we assigned modules to pages through the menu items. And that's because the menu items say to the Joomla system, we want to render this content this way, and so we assign modules through the menu items, because the menu items represent the page. So you cannot have a page without a menu item and a menu item without a page. They both go hand in hand with Joomla, and that's why Joomla is so flexible. Now, of course, I am talking about internal pages. So, if a menu item represents an internal page, a page a part of the Joomla system, then obviously they go hand in hand. But you can have menu items that link externally to other websites, and so on and so forth. I'm not talking about those menu items, I'm talking specifically about the menu items that render content on the Joomla system itself. So you can see here when we're viewing the menu items of a particular menu, we can enable or disable them, so publish and unpublish. So we don't have to completely delete out our menu items, you can also just stick them in the trash as well. And again you have batch processing for all of that useful stuff, such as setting the access level for all the teched menu items, and so on and so forth. So hopefully now you're starting to see a pattern with Joomla, and the back end, and how it operates and works. And on top of that, obviously you can search through your menu items, use the search tools, which is the filtering of the fields, and on top of that, we can also change the ordering of certain fields, and also we can choose how many records we'd like to display per page. And so as you can see, it's very simple. Again, it's very, very standardized with Joomla and your tubular data. We also have the ability to choose a menu item as our homepage. So for example, I can go ahead and click here, and this, another about, is effectively the homepage. So if I go ahead and go to let's say about and then home, you'll notice it says index dot PHP, backslash home. I scroll down, I click on another about, and we just have the backslash. So this clearly indicates that this page is now actually the homepage. Now, what I'm going to do is go to the main menu, and then I'm gonna set the home back again. So you can only have one homepage of course, and then let's go back to the test menu. So now I can go to, let's say auth log in, then I go to home, and now you'll see it says just backslash, so that is the homepage for our Joomla site. So I now I want to add a new menu item to our test menu. So I'm gonna go ahead and click on no. Now you'll notice there are a lot of options right here for just a menu item, and that's because we're not just defining the menu item, rather, we're defining the page associated with the menu item, as well as the menu item itself. And that is why under the first tab and under the first option that is presented to us is what item type you want. So what does that mean? It means what type of content do you want to be visible? What content are you going to show? So this defines the content of the page, and then everything else that expands off from that, so all the other options, are simply attributing to the page display in rendering. So you say I want this to render like this and so on and so forth, you're changing the look, the style, and perhaps maybe a bit of the content. But right here, when you define the menu item type, you are saying, I want to set up a page to display this content. So, if we take a look at the menu item type, you can't directly input text into the field. What you must do is select from a list. This is actually very useful because it allows us to see all the different types of content that we can display on a page. So for example you have articles. So can I show archived articles or a single article on itself. Please do note with the About page, it's actually an article. About is an article, and it's just linking to a single article which looks like a page, but really, in reality it's just a single article that it's linking to. And so I can see all the different types of content that I can display on the page that is linked to through this menu item. So, there is a range of menu item types, and each menu item type has a lot of different options available. Now, obviously, we won't be able to cover all of these menu items in this lesson. What I wanna is have a general understanding of menu items, and also on top of that, when we go throughout the course and start creating content, for example contacts or even articles, which would be the next segment, what we'll do is have a look at all of those different menu types when we talk about those different components. And so we can actually view content on the front end. But right now, we need to understand the importance of menu items in general, and they are incredibly important, because they define the content that will be delivered when the user clicks on that menu item. Now it's important to note that there are a few menu item types that aren't associated with a component. For example, we have System Links and Wrapper. So we're gonna first of all start out with Wrapper. There's only one menu item type, which is an iframe wrapper. This will allow us to define a URL to a particular page internal or external, and as long as there is no same origin access policy on that particular external domain, it should show up in the iframe on a particular page. So next up we have system links, and with system links the first menu item type is an external URL. So what this allows us to do is create a menu item that either links to an external URL, or it could link to an internal page, but again, it's not actually defining the content or anything like that. It's just simply a menu item that represents a URL. We can also have a menu heading. A menu heading is just a menu item that is plaintext. It's like a little header that you can put into your menu, but do note, it's not a link, it's not defining any content to be shown on the page, it's just a header, that's it. Also, we have a menu item alias. This allows us to create an alias for another menu item, such as in the main menu, you have about. So I create an alias for that, and then when you click on the alias link, it will take you to the same page that the main link that you originally selected. So it's just an alias for another menu item. And then on top of that, we also have a text separator which allows you to inject text into the menu. Again, its classed as a menu item because it's part of the menu, but however, it's not a link it's just plain text to help you separate out your menu items. So, that's the system links. So, what I'd like to do now is very quickly just go into articles, and I'd like to link to a single article. Now we will come back to, obviously, the article menu items, but right now, I'm just gonna link to a single article on its own, and then the options will change depending upon the type of menu items. So now it's asking me to select an article to display. So I'm gonna say select, and I get to choose again from my tubular data, all the different articles, and I'm gonna say about your home page. Now on top of that, we have the link. Now this is just the standard link, but however, you can provide an alias. If you don't provide an alias, one will be automatically generated from the menu item title. Now the alias again is basically where you have the page right here with SEO friendly URL, so I say auth hyphen log in instead of all this business index dot PHP question mark, option. That's an SEO friendly URL, nor is a user friendly URL, so you get to use an alias to actually make it a bit more user friendly. So I can just say test article link right there. And once I save it, it will generate the alias for me. On top of that, we get to choose the target window. So the target window could be parent, which means in the same window, so all of these are parents. So let's look in at the parent window, and it's just refreshing it with the new content. But you could also say new window with navigation. Now in modern browsers you have your tabs, and so what it will do is when you click on the link it will open up a new tab in the browser. Now also, you have new without navigation. So this will actually open up in a pop up style window and display the content in that window. We can also say template style. So you can actually change the template depending upon the page. So at the moment, by default we have protostar, but I could change it to bees three. So I'm gonna click on that, so actually, Joomla is so flexible that I can change the template depending upon the page. Now on top of that, on the right hand side, we get to choose the menu location. Now if you ever want to move a menu item onto another menu, you'd simply click on the menu item and then you'd tell it to go into another menu, for example author log in, or Main Menu. And it will reassign this menu item to the menu you've selected here, but I'm going to leave it as Test Menu. On top of that, we have the parent item. So we can either say menu, item, root so this menu item will be on level one, or I could nest this menu item inside of other menu items. And again, you can see where the dash is how everything is nested. I'm gonna leave it as menu, item, root. So this menu item will be on level one on the test menu. On top of that, you can have the ordering. Which ordering will be available after saving, so currently I'm not able to change the ordering at all. On top of that, we have the status, which is published, viewable and abled on the front end, unpublished, which is disabled and not viewable on the front end, but you can still go into this menu item on the back end, and trashed, which means you're chucking it in the trash can, ready for this menu item to be permanently deleted off the system. Or, you could restore it from the trash. On top of that, we can set this as the page default. This is setting the home page, and once I do this, it will deactivate the previous homepage, and this will now become the homepage for the site, so I'm going to leave that as no. We can also set the access for this specific menu item so you can set the access level on the menu itself, and the individual menu items. That's how flexible Joomla really is. I'm gonna leave the access to public, and don't forget, you set the access viewing levels under the users manager component. We can also assign a language to this menu item, and I can provide a quick note that it's not viewable on the front end. It's only for the back end, so I can get a more detailed description in the tubular data, as to what exactly this menu item is, it's just a quick note to show up in the list of menu items. So now we have the options tab. So underneath the options tab we get to choose whether we show and hide certain pieces of content, such as showing and hiding the title. Also, we can say if we want the title to be linked, show intro text, and a whole host of other stuff. So again, it's fairly apparent that what we can do is hide these, and sort of go through all the different options, and see how it affects the look of the page. And you can just hover over these to see what it will do. Now what's really important to note, is the fact that we can say, use global. Now what does that mean? Well, underneath System, you can take a look at all the different components, and under there there is articles, the article component. And in there, you can set all of the default options for all of these options here. And so when we say use global, it means we're using the default options that we've set under the system. However, it's not the end all and be all of the settings. I can override the global settings and tell them to let's say show or hide the title if I wish. So I'm overriding the global setting, so you really do have ultimate customization with this content management system. Now of course, we'll talk about articles at a later date, mainly, I just want to concentrate on the menu items. So thank you for watching me in this lesson, and please join me in the next lesson, where we'll continue on learning about menu items.

Back to the top