FREELessons: 15Length: 1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.5 Create a Nav Bar

Hey welcome back to build a blog with crafty CMS. We've only got a couple more things still to do to finish building out blog and one of those is to add a navigation menu to our top bar and we're going to build a navigation menu so it's comprised of a home link and automatically generated list of links to our static pages in an automatically generated list of links to our categories. So, let's get started. We're gonna need a new partial template file to hold nav bar. So in our partials folder that we've been working in so far, we're gonna create a new file and we're gonna name it _nav. Now let's open that up for editing. And we'll turn on our syntax highlighting as usual. Now we're gonna need a nav element with the class site_nav, Inside that we're gonna need to set up on an ordered list that's going to wrap all of our menu items and we need to give that the class parent_menu I mentioned the first thing that we're going to add to a nav menu is just a link to the homepage. So this is going to be the easiest part to put in. All we need is a list item. Inside that we need a link. And we want that to link through to the site that URL. And we just want it to say Home. So that's the basics of our nav bar already set up. Now let's load that in to our layout template. So let's just copy this include that we're using to pull in the search bar. And above that, we'll add in our copy. And now we'll load in the nav partial that we're working on. Right, let's see what our results are. All right, so there's our home menu item. Now we can move on to adding in our pages and our categories. Let's start by adding in our pages automatically. So, we want to have it so that whenever you add a new page into your site, a link to it is automatically just going to show up in your nav menu. So, do that. We're going to query the pages in just the same way as you would if you wanted to output The entire content but instead, we're just gonna grab the title and the URL and we're gonna form a link item out of those things. So that means the first step is gonna be to create a variable and store all of the page entries in that variable. So we're going to say set entries. And then, just as you would in any other type of template, we're going to say craft.entries.section. And in the section function, we're going to specify. The page section type. Now we can start iterating through these entries, grabbing their title and URL and creating navigation items out of them. So first, let's just make sure that there actually is something inside this entries variable, just in case there are no pages added to the site yet. So going to say if entries length. And then end if. Now in here, we're gonna use that really cool nav template tag that we used to create our entry categories output. So we're going to say nav entry in entries. And then we'll close that off with endnav. Now we wanna output basically the same thing that we have here. So just copy and paste that in. But rather than outputting the site URL, we're gonna output the entry URL. And rather than just having the text home We wanna output the entry title. So now let's see what we have so far. Right. So there's our example page In our example sub page but we don't want this sub page to be up here what we want is to have a drop down now style sheet already has all the styling in it it's necessary for a touch friendly drop down menu. So we just need a way to indicate to the style sheet that this is a sub page that should be nested here underneath its parent. So this is where we're going to employ that if children tag that we used earlier. So inside this list item because we do need this to be nested in order for a dropdown menu to work. We're going to add in if children then we close that with end if children, now we're going to create another an ordered list that's going to wrap around all of the sub menu to add in UL with the class child underscore menu. And then we'll output all of the children inside that. And if you remember from our earlier lesson, when you're working inside the nav tag. This children here is gonna act as a shortcut, to output whatever you've defined as the template for your navigation items, inside your nav template. So that is just going to then output this HTML and still a couple of extra things you need to add in again like we did with our entry categories we also need a class up on our list item to indicate whether or not this is a parent list item. So we're gonna add in if entry.hasDescendants(). And we'll close that with an endif. And then, inside this if check, we're going to output a class if this entry does have children. So we're going to add class equals, has underscore child. And then one more thing. In order to make this a touch friendly dropdown menu. We are going to add in this snippet of code here that you can copy from the source files. Just gonna add this inside the if-children check. Now these two things are just gonna allow us to make a touch-friendly drop down menu without needing to use any JavaScript. You don't need to worry too much about exactly how that's working right now. But I did cover how you can create this type of effect in a different course. So I'll or provide a link in the notes below on how you can learn more about that if you're interested. All right, so now let's see what we've got. Cool, so there's our indicator showing us that this has a child item. Click that to expand it. And there's our drop down menu. So now what we need to do is use the exact same approach to also output our categories here. Now all the code that we just entered in all of this is completely reusable to make this work with categories or we have to do is fill the entries variable with categories instead of pages. So once again rather than just typing out all that code again we're going to create a partial. So we're going to cut all of this code. We're going to create a new partial and we're gonna call this one _nav _width_children. So paste that in, just turn on our syntax highlighting. And now where we did have this code we're just gonna include our partial. So let's speed this along by copying and pasting an existing include line. And then we're going to include nav with children. So now when we refresh we should see no change. All good. Everything's still working. So to make this work for the categories all we have to do is copy these two lines paste them in and then instead of grabbing entries from this section. We're going to get categories from the group that we set up earlier to hold all of our blog categories. So we'll jump into the dash board. And just refresh our memory on the handle that we set up for those years. And that was Blog Cat group. So copy that. Paste in here. And now we should see all of our categories come up here too. Perfect. So now we've got all of our categories. These are our top level categories. And then nested underneath are all of our subcategories. All right so that is our navigation menu all set up and you can modify that however you need to for whatever site that you're working on. So now our blog is 99% done we've got just about everything that we need all up and running there's just one more little thing that we still need to do and that is to modify our 404 page template. So right now, if we could open a page that doesn't exists, so no page here. We do have a 404 template. But it's just the default one that came with the original installation. So all we need to do is just tidy this up a little bit, so that it matches the rest of our site. I'm going to go through that. It's only going to take a couple of minutes in the next lesson. I'll see you there.

Back to the top