3.2 Coding the Off-Canvas and Main Navigation
Having set up our coding environment, we’ll start the development process by writing the markup for the off-canvas and main navigation.
1.Introduction2 lessons, 14:26
2.Designing the Template9 lessons, 1:36:08
3.Writing the Markup6 lessons, 1:06:01
4.Writing the CSS9 lessons, 1:42:34
5.Conclusion1 lesson, 02:03
3.2 Coding the Off-Canvas and Main Navigation
In the previous lesson we've installed the Foundation framework and we've setup our documentation template project. In this lesson we're gonna start writing the mark-up and we'll begin with the off canvas and the main navigation. So the main navigation, you can see it right here, it's very simple, we have a logo and we have a list of menu items. The off-canvas is only available on tablets and smaller screens and it's activated by this hamburger menu icon, and it looks something like this. We're gonna begin in the source folder. Under layouts, we can see default.html. Now before we get started, I wanna explain something really quick. Because we're using the ZURB Stack, we have access to the Panini Templating Engine. And Panini allows you to separate content between layouts and partials. And partials basically hold content that repeat across multiple pages, like for example, a footer or a header. Layouts are templates for pages. And the default layout is this, it's the base layout as you can see right here. And what it's doing, basically it has this structure, but then in here it loads a partial body. Basically, it loads the content of the page that has this default layout or template. So just to give you an example, inside pages we have index.html, and this uses the default layout. So whatever content is in my index.html, gets put in the place of this placeholder. To demonstrate that, let's quickly delete whatever is index.html, save. And now the web page is refreshed automatically, showing the new content, which in our case is none. Now, let's begin with the navigation. So I'm actually gonna delete this, and I'm gonna create my own marker basically. For the off canvas, that's where we need to start. We have a div for the class of off-canvas-wrapper. Inside we have a div for the class of off-canvas and we can also specify the position, in our case we want it on the left. I'm also gonna give it an id of offCanvas and then I'm gonna specify data-off-canvas. And then right next to that we have another div with a class of off-canvas-content, and in here make sure you're gonna use an article tag. And I'm gonna include the body, and then before it, in a header I'm gonna include a partial called top bar. Now top bar needs to be created, so inside the partial folder I'm going to create the new file called top-bar.html. So whenever you are including a partial, just use the file name but without the .html extension. Let's say top bar here. Let's save this and now we have top bar and content, great. Now, inside the off-canvas, I'm gonna use another partial. I'm gonna call it nav-offcanvas, and then create the partial nav-offcanvas.html. And for now this is all we need to write in our default layout. Let's create our off-canvas navigation. I'm gonna start with a nav tag and then a ul with class of vertical.menu. I'm gonna give it another class of ap-menu, we're gonna use this later on for styling, but I'm writing it now. And then, I'm gonna give it an ID of ap-off-canvas. By the way, this ap- naming that I'm using is just to know what classes and IDs I added opposed to what is already available from Foundation. So whatever starts with ap- is custom stuff. Okay, and let's see, we need to also add data-responsive-menu equals drilldown large-accordion. This is used for marking this menu as a drilldown. And then inside I'm gonna use another partial called nav-main. I'm using yet another partial because I want this nav-main to be used somewhere else as well. So let's create that partial, nav-main.html. And in here I'm basically gonna have the list items. So list item and inside an anchor tag, the href will be pointing to index.html because this is the start menu item. And when you're using this ZURB Stack, or Panini actually, you need to always put a root in front of any URL. Because that will make sure that the path is set correctly, all right. So we have one list item for start. We can have another one for documentation. And in this case the link will be to documentation/introduction.html. Now the thing with the documentation is that it will have a sub-menu. So in here I'm gonna create another ul, with a class of vertical.menu, so two separate classes. And also, hide-for-large, this is a class from Foundation that basically hides that element on large screens. And in here, I'm gonna grab nav-items-documentation. This might seem a little bit confusing at the beginning, but it's all really, really simple. So let's create another partial, nav-items-documentation.html and for now I'm just gonna say nav items doc as a placeholder. And let's continue by creating the other list items. So we have Support, F.A.Q., Changelog, Credits, and Get in Touch. We also have the tutorial link back when we did the original design but I decided to remove that because we don't actually have a page designed for it. So these are the menu items. Now, we also need to apply in is active class to one of these menu items if we're on the corresponding page. And Panini actually allows us to do that very simply by using something like this. So we're going to say, #ifequal page-domain, page-domain is a variable that I defined, start. So basically if the page-domain is equal to start, then I'm gonna add a class of is-active to this list item, and then all I have to do is close this if equal. Now I'm gonna do the same thing for the rest of the items, page-domain is a variable that we're gonna define right now. So we're gonna go to index.html. And on the top here we're gonna use three dashes. And then we're gonna say, page-title: Index. This is again a custom variable that I defined. And page-domain, Will be equal to start. So what will happen is the following. We're gonna access index.html, right? Index.html will use the default HTML layout or template. And we're gonna load nav-offcanvas. Nav-offcanvas will render this bit. And when we get to nav-main, it's gonna render this bit. Now because we've defined a variable here called page-domain, when we get to this point Panini will do a check. If page-domain is equal to start then it's gonna add the class of is-active to this list item. Then it's gonna render the second item. Is the page domain documentation? No, so the second item will not have the class of is-active, and the same goes for the rest of the items. Okay, now we're done with nav-main, and also with nav-offcanvas, we can close this as well. Now if we do a refresh here, you won't see much, because that offcanvas menu needs to be triggered somehow. So let's continue with the top-bar. For the top-bar, again we're gonna use some Foundation classes, a div with a class of top-bar. And inside we have two components, top-bar-left and top-bar-right. We'll start with top bar-left, and inside we need the hamburger menu item and the logo. So we'll start with .ap-hamburger-container. And inside that, we're gonna have an a with a class of ap-button-icon and also .ap-small. We're gonna show-for-small screens, but we're gonna hide-for-large screens, and I'm just gonna use a hash sign in there. And then, inside this anchor tag we're gonna say data-open equals offCanvas and this, when clicked its gonna open that off canvas menu. And inside, I'm gonna use an i with a class of icon and ion-navicon-round. This will display the hamburger menu icon once we load the appropriate font, but we'll do that in the CSS part. For now, I'm just going to add a text called Menu in there. So now if we take a look, yeah this will not be visible on large screens, but if we take a look at it on a tablet for example. We can see Menu and when we click it, we can see that menu popping up. And it's already functional, that's the beauty of a framework like this. Next let's see about the logo. So that's gonna be after the hamburger container. I'm simply going to create an anchor tag with an id of ap-top-logo. The href will be root index.html and inside I'm simply gonna place an image. The URL will be root assets/img/logo.svg and the alt, I'm just gonna say Logo. Let's save, and if we take a look, we now have our logo. And finally, let's create top-bar-right. And top-bar-right will basically hold our navigation. So I'll start with a nav, and inside an ul with a class of menu, and ap-menu, this is a custom class that I'll be using and I'll use the partial nav-main. So just by doing that I now have a navigation and it's the same navigation that I used right here in the offCanvas. But because of this class, hide-for-large, I cannot see the documentation sub menu on large screens. So now, when I go back to a tablet screen, I'll need to hide this main navigation, and I'll only keep the offCanvas navigation. But we'll do that when we get to the CSS part. For now, the only thing that's left to do is to populate the documentation navigation that you see here. Inside nav-items-documentation.hml, I'm gonna write this. Basically very similar to the nav-main, a bunch of list items specific only to the documentation. So we have introduction, we have getting started, pages and posts, and all of the others along with their respective sub-categories. And I'm also doing a check here, inside each documentation page I'm gonna have a variable called doc-domain. And depending on the doc-domain I'll choose to either highlight or not highlight a specific parent list item. So now if we do a quick check, and I open the off-canvas menu, here is how the documentation looks like in a drilldown menu. And just like that we finished the main navigation and also off-canvas navigation. Really simple, by using Foundation, writing mark up can lead very quickly to a functional page. So in the next lesson we're gonna code the rest of our home page. I'll see you there.