5.2 Create a Nav Menu With a Mixin and Iteration

Hello and welcome back to top speed HTML development with Jade. In this final lesson of our course, we're going to learn to do something really cool. And that is to create a mixin that would let you output a nav menu wherever you like in your site, as many times as you want, with different content within the menu each and every time. Now a mixin is basically just a piece of code that you can write once and then you can output it over and over and over in your site as many times as you need to. And you can also pass information into this mixin so that it generates different HTML, depending on what you have passed into the mixin. So, the best way to understand what all of this means is just to see it in action, and we're going to start very simply with just the basic shell of our navmenu. To create a mixin, just type out the word mixin. Then you'll need to give your mixin a unique name. In this case, we are going with navmenu. And you'll then want to follow up with some brackets. From here we create a new line, and tab indent, just as with almost everything in Jade. And from here you type in whatever code it is that you want to have output every time you use this mixin. So in this case we want to have a diff with the class navmenu. Inside that we want an unaltered list for our menu to be created from, and inside that we want to have at least one list item. And because they are menu items, we will want them to be linked. So that's just the basic structure, and now in order to place this mixin, all we need to do is head into our content block and whenever you want to use a mixin that you've created, just enter a plus symbol, along with the name of the mixin and a pair of brackets. So, let's save and compile that and we'll see what we get. So there you can see we have already got the very basic shell, the basic HTML that we will need to form the basis of our navmenu. So now we're going to need to add a little bit more sophistication to it so that we can actually pass content into these HTML elements. And the way we're going to do that is by passing an array of JavaScript objects into the mixin. Each of the JavaScript objects will contain the information for each of the menu items. Now if you're not too familiar with the concepts of JavaScript arrays and JavaScript objects, don't worry, this will be a fairly straight forward example and we'll step through it slowly, so you should be able to follow along anyway. Now let me just paste in some code. Now what we've done here is we've added the information about what we want to populate our menu with, in between the brackets of the mixin. So what that will do is send this information into our mixin and then our mixin can process that information. So these square brackets here indicate that this is an array. So that means that there are several entries and these curly brackets indicate that this is an object, which lets us create information where each individual piece of information has a name, has an identifier. So where you have in each one of these objects a title, such as home. So that will be the title that's displayed on the menu item. And we have a link. And this will be what the menu item links to. And there's just one more thing we have to do to be able to access all of these from our mixin. So down here, we are taking care of sending the information. But up here we need to have a way to access that information. So what we do is we basically create a place holder name that's going to give us one single identifier. One single word that we can use to get into all the information that's been sent. So we're gonna type out menu_items. So then wherever we use the words menu items down here, that will give us access to everything that's being passed through the mixin. Now that's actually called a parameter. So that's probably something you've heard here and there, the term parameter. That's what that refers to. So menu items, that's our parameter. Now that we have all of the information being sent through the mixin, and being received via our menu item's parameter, we can start going through that information and turning it into a menu. And what we want is that for each of these menu items we want to output a list item, and a link. Now we're actually going to be turning this into a multi level menu, so this would be a drop down menu. So really these are actually the top items. We will have child items in a little while. So what we wanna say is that for each of these top items in our menu items, create a list item and a link. And you can actually do this more easily than you might expect, the language that you will use is fairly natural, it doesn't sound too different from what I just said. So, for each top item, in menu items we want to output a list item, and a link tag. So we'll just tab indent these, so these are nested under this little sentence here. What this is actually called is iteration. So iteration is just going through a list of items, basically. So we're iterating the information that we've passed through this navmenu. And we're iterating each of those items to output our list item and our link tag. So let's just see where we're at now. Save and compile. So there we go, that's looking good so far. We know that we have four of these top items, and we've got the right number of list items that have been output. So now all we need to do is add an actual target for our a tags and some text inside, so that we actually have something displaying on our menu. And, the way we're going to do that is like this. And you might remember from one of the earlier lessons, I talked about the and attributes method of setting attributes against an element, and that's what we're doing here. So, we've created a variable called linkatts, and that's going to hold the attributes for our links. Then we've said for the href attribute we want it to be this. Now what you see in here is this little top item identifier here. So, what happens as you're iterating though the menu items, each one, it gives each individual one of these top items a temporary name. So, while you're iterating, the item that you're actually looking at, we're giving it the temporary name top_item. So that's what this represents here. So then we have a dot and the word link. So what that says is look inside that top item, and find the link information. So then, that sends into the array of information that we set through and looks up our link. Fetching the value that we've set against the link for each of these items. Then we're taking our linkatts variable, and we're passing it into our and attributes. And that might seem a little bit confusing and, if it does, just head back to the earlier lesson where we looked at how attributes can be set. Have another look at how objects can be passed through the end attributes method to set attributes for elements and then this will probably start to clear up pretty quickly. All right, let's save that and see what we get. So there we've got each one of our links that's come from, the information that we're passing through our mixin has been applied correctly. So now all we need is to add the text. We want our titles to come up against each one of our menu items. And that's also pretty straightforward. We just add an equal sign, and now we're still working with the place holder named top_item for this menu item. Now instead of looking up the link, we're going to look up the title. And that will fetch each one of the titles from the information that we've sent through. So, we'll save that. And there we have our fully rendered link items. Now I already have some Stylus code that I wrote in here earlier to style this menu, so you'll be able to have a look at that if you would like and so far, we have this, so this is our menu, this far. And the next thing we're going to do is start working on adding the support for child drop down menus. And to do that we're going to add some extra information to pass through our navmenu mixin. Now as an entry inside our second top item here, we've added a child object, a child array, rather. And, inside that, it has its own menu item entries. So, now we can add an extra layer of iteration to our menu. But before we do that, before we do start outputting our child elements, there's one adjustment that we wanna make to the code that we already have. Right here we are generating our links for each one of our top level menu items. And we're gonna have to do the same thing for child menu items. But we don't wanna write the same code out again. So we're going to create a second mixin that we can nest inside the first. And that mixin will look like this. So we have the same codes doing the same thing. The only difference is because we're going to use this for both our top items and our child items, we are using more generic names. Instead of saying top item, we're just saying item so we can use it for both the top items and the child items. And now we can actually call our new mixin from inside our first mixin. So we have a navlinks mixin that is generating the actual navigation links. And we're going to call that passing our top item information each time. And that will actually output the exact same code that we already have. So, there you go, nothing changes. But what that means is when we go through and add our child elements, we don't need to create repetitive code. So the rest of our navmenu mixin will look like this. Now, what we're doing here is looking to see if the current top level item we are looking at has a child menu inside it. Now what that's doing is it's taking a look at the object and it's looking to see whether or not it can find an entry named child. So there's only one entry right now that has this child item inside of it. All of the others don't. So when it looks for a child item in the first item it'll just skip on. It looks for a child in the second menu item, it will then go ahead and process this code. So this is not too different from what we've already done above. We're outputting an unordered list which will create that child menu. And then for each of the individual menu items in that dropdown, we'll do that same thing. We output a a list tag and then we generate our nav links, so we're calling our second mixin for the second time and this time we're just going to pass the information about the child menu item. So let's take a look now. And there you go, so that has nested our child menu item, our child menu, rather inside the parent menu item. And that will give us our drop downs. So that is now a fully operational navmenu and whenever you want to use this navmenu mixin, all you have to do is enter your Plus sign with the name of the mixin, and then just include an array of objects that let the mixin what items you want to have on that menu. So you can imagine how when you create a mixin for anything that you find yourself doing often, you can save a lot of time. You can create mixins, you can put them in a separate file, include them into your projects and then you can use them as and when you need. So it's very very powerful. Okay well that wraps up the final lesson of our top speed HTML development with Jade course. I will see you in the next video where we'll wrap things up and have a quick recap.