FREELessons: 7Length: 42 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Canvi

The Canvi library is a lightweight off-canvas navigation built in JavaScript. In this lesson, you will learn just how easy it is to use.

Relevant Links

1 lesson, 00:36

Welcome to the Course

2.JavaScript UI Plugins
5 lessons, 40:27


Date Dropper



Medium Lightbox

1 lesson, 00:37

Final Thoughts

2.3 Canvi

Hello, and welcome back. In this lesson, I want to show you the Canvi JavaScript plugin for making an off-canvas navigation. And you can find the URL for the Canvi plugin in the course notes for this lesson. Once you get to that site, if we scroll down a little bit, we'll find a couple of buttons to open a left navbar and a right navbar. So Canvi actually has two different types of navbars. They're very similar, but they function a little bit differently. If we open the left one here, we see that it just animates in on top of the rest of our content. If we open the right one, we see that it actually pushes our content over. So we'll take a look at how we can create both of these. And keep in mind that this framework is not for styling the navigation itself. So you're gonna have to style that yourself. It's basically just for creating this functionality. So with that said, if we scroll back up to the top, we can find a link for download. And this will download a zip file with all the files that you need in it. And we can take a look at those files if we jump over to the GitHub repository. And everything that we need is gonna be inside this dist folder. And we can click to into that. And we can see canvi.css and canvi.js. Those are the main two files that we need. So you can start a new folder and follow along here. But the files that we're gonna end up with are gonna be the files in the 03_Canvi folder that you find inside your Project Files folder. So I'm gonna open that up in Visual Studio code, and we'll get started. So I've got, as you can see here, I've got this canvi folder that I've created that contains the files that we saw there in the dist folder. And then, I have a CSS folder with main.css in it. And you can look at that CSS file to see how I've styled some of the items on the page. But this is my own CSS, this is not CSS from the plugin. But I'm gonna create a new file here called index.html. And as always, I'm gonna start with an HTML5 starter code. And we'll just change the title here to Canvi. And then, in our body, in order to make this work, we need two items. We need, first of all, a div that has a class of .canvi-navbar like so. And then, we can put the content for the navbar itself inside this div. And then, outside of that div, we're gonna have another div called .canvi-content. And this will contain the content for the rest of your page. So in the navbar, I'll just throw a few items in here real quick. I'm gonna put an h3, and I'll just say Canvi Nav. And then after that, I'm gonna create an unordered list with three list items in it. And we'll just put some text in each of those list items. We'll have Home, About, and Blog. And that's all the content I'm gonna worry about for the Nav bar. And then, for the content, we'll add some content here as well. So I'm gonna put an h1 here, and we'll just say Canvi Nav. And then, after the h1, I'm gonna create a button. So for this button, I'm just gonna put some text in here that says Open Nav. And in order for this button to work the way we want it to work, we need to give it a class. And the class name we need to give it is .canvi-open-button. When we use that class name, then it will enable us to open our navigation bar just by clicking on that button. So now that we've done this, we need to include our CSS and our JavaScript. So I'm just going to copy and paste a couple of lines of code here into the head. So we have a link tag for the canvi.css file. And then another link tag for my main.css file. And then down here, towards the bottom, we'll include the script tag, For our Canvi framework. And then, we'll create our own script tag as well. So in order to turn this on, in order to make it work, all we need to do is to create a new instance of canvi. So we can create a variable if we want to, and I'm just gonna call that canvi. And I'm gonna set this equal to new Canvi, with a capital C, open close parentheses semicolon to end our statement. So let's see if that works. We're gonna save our file. I'm gonna open that file up in Explorer, and then double-click on it to open it up in my browser. And first of all, we see that our navigation is not visible on the screen. It's somewhere off the edge of the screen. And if we click on Open Nav, sure enough, it opens that up for us. Now, if you try to do this without adding any of your own styles, let me show you what that's gonna look like. Let's just comment out this main .css file here, and let's see what that would look like, again, if we were to not use any of our own styles. Let's refresh, and we see everything's kind of pushed over here to the left. And we click on Open Nav. We see that it kind of works, but it doesn't look great. So you definitely need to style this page yourself if you want it to look good. And again, you can look at my main.css file if you want an idea of the things that were done to make that look better. So if we go to main.css, you'll see that we set the margin for the body to zero which fixed some of the margin issues we were seeing. And then, you can scroll through the rest of this css for yourself to kind of see what's going on there. It's nothing really complicated. But let's take a look back at our index.html file. And so we've talked about creating the default off canvas nav. And by default, you'll see it pushes our content over. We have another option, which we can put inside this Canvi call here. So what we're gonna do is we're gonna put a JavaScript object inside the parentheses here. And then, inside this JavaScript object, inside these curly brackets, we're going to call on a property called pushContent, with a capital C. And I'm gonna set this to false. By default, pushContent is set to true. So we're gonna set that to false, save our file, refresh our page. And now, when we click on Open Nav, you'll see that it does not push our content over, it just comes in on top of the content. So those are a couple of options you have with the Canvi Navigation plug in. Again, I want to encourage you to go to the website and take a closer look at the documentation, because there are other options that are available with this plug-in. So thank you for watching, and I'll see you in the next lesson.

Back to the top