Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:2Length:12 minutes
Thumbnail 400x277
  • Overview
  • Transcript

1.2 The Build

In this practical lesson, we’ll first have a look at the markup. Then we’ll move things along with CSS before finally writing the necessary JavaScript. All the code can be written in vanilla JS, but it’s much easier to use jQuery, so that’s what we’ll be using for now. Let’s begin!

Related Links

1.Build a Shrinking Navbar With CSS3 and JavaScript
2 lessons, 11:36

Free Lesson

The Build

1.2 The Build

[SOUND] Let's start with a course overview. First we'll have a look at the markup for our demo page. Then we'll move on to the CSS and see what it takes to style that nav bar. And finally we'll turn our attention to the JavaScript side where we'll write all the scripts necessary to power our shrinking nav bar. And even though we can do all the things that we're gonna do in vanilla JavaScript, for this demo we'll be using jQuery. Now let's move on to the markup. At its core, our nav bar is ordinary, right? It doesn't have any kind of special markup and that's the idea. We want to create this in such a way that it can be applied to any kind of nav bar. Now looking at the HTML code here, I've already written this so we can save a little bit of time. We start with a header with an ID of main-header. And the actual nav bar is in the nav element here. We have an image that contains our logo, it's an SPG image. And we also have the ID of logo here and then a simple unordered list with anchor tags for each list item. Following that is a container that has three paragraphs and then a footer. And finally at the bottom we're just loading some scripts here. I just prepared this in advance. So that's basically our markups. As I said, nothing special, and that will actually give us this page here. Of course it doesn't have any style, so that's the step that we're going to take next. Now this is a demo page so we're not going to focus heavily on styling. Instead what we're doing, and let me actually show you the CSS here. I just have some general styles, setting font smoothing and box sizing. Setting a color for the text, style for hr, and then some typographic styles for the paragraph and anchor text. Then the header, we're styling like this, we're adding a little bit of lateral padding. We're setting it fixed and at top zero. So whenever we scroll, the header is gonna stay in the same position at the top of our page. Of course setting the width to 100% so it spans the entire width of the page. And then finally setting a border, a background, and height of 6 ems. Now this is important, remember this number. We'll be using it later. Then the ul, which is the actual navigation. We'll float it to the right so it's on the right side of the page. And then the links inside, we're displaying them inline. And also setting the line height to six ems. And by doing this we ensure that those links are centered vertically inside of our header. Now of course we also need to style, we also need to position our logo vertically. So we're setting the position: absolute, top: 50%, and then we apply a transform translateY(-50%). And that will ensure that that logo is centered vertically in our header regardless of the height of that header. It's a nice little trick. Finally for the container just adding some margins, width: 75%. And then for the paragraphs, we're just setting the height to 50 ems so that we give the entire page a little bit of height so we can test our nav bar. And after all of this, our page goes from this to this. So as you can see, as we scroll, our nav bar stays exactly where it is. Now, what we want is that when we scroll the page, the nav bar shrinks. So, its height gets smaller and also we're gonna swap the image. But for that we need to write some JavaScript and that's coming up. Now getting the nav bar to do what we want, what I just said earlier, can be done with vanilla JavaScript. But it's going to be much easier with jQuery, especially for the animations. So the first thing we've gotta do, of course, is to download jQuery and I have it in the JS folder along with a scripts file .js. And we'll start by declaring a couple of variables. First we'll get the window, then we'll get the main header. We'll get the default logo, and then we have a small logo. These are all the variables we need. Now, the way we're gonna do this is very simple. We're gonna listen for the window scroll event. So whenever we scroll, we wanna check the position of our scroll. And if that position is higher than a specific number, in our case we're going to put it at about 100, in that case we'll do two things. One, we're going to add the shrink class to the header and two, we're gonna swap the logo images. So we're going to say this, window.scroll if window.scrollTop(). scrollTop() is a function that returns a value, in our case the scroll position. Then we're gonna do the following, if not mainHeader.hasClass("shrink"). So if our main header doesn't already have the class of shrink, then we're gonna add it. And we're doing this check because if we don't, whenever we scroll past 100, this script is gonna be executed, right. We're gonna add the new class and we're gonna swap the images and we don't want that, we just want to do it one time. So we're going to say mainHeader.addClass("shrink"). And then here, we're gonna say else, so if our scrollTop is smaller or equal than 100, which only happens when you scroll back up. We're gonna say if ( mainHeader.hasClass("shrink") ), then we're gonna remove it. All right, so let's try it. Have a look at this header, right? Once we scroll past 100, see it added that shrink class. And when we go back up it removes it. So add, remove. Now let's go ahead and add some styling for that shrink class. Header with a class of shrink, I forgot to mention earlier that I'm also loading normalize.css which is just a reset file. So header.shrink. We're gonna change the height to four ems and we're gonna make the background a little bit opaque. So we're gonna say background, actually we can just say background color, we're going to use an rgba value. White, 80% opacity, all right? And then, also we have to change the line height to four ems on these. Let's try it out. We don't need this anymore. So now there we go. When we scroll past 100, our nav bar shrinks. But the effect is kind of immediate. We don't have a nice transition so let's go ahead and add that real quick. transition: all .3 seconds ease-in-out. And we also have to copy this to each list item. Refresh and there we go. Our nav bar shrinks nicely with a transition. Now the final thing we have to do is swap the logo images. And for that we're gonna go back to our scripts. We're gonna start by defining a class here, a function, sorry. We're gonna call this function switchImages and we're gonna receive a newImagePath. And inside we're gonna define our logo as hashtag logo or we're getting the element with an ID of logo. And then we're gonna say this, logo.fadeOut over 300 milliseconds function. So what we're doing here basically is we're saying look, fade out our logo over 300 milliseconds. And when you're finished with that execute the following. That's what this function, it's called a callback function. So when the fade out finishes we're going to do logo.attr("src"), and we're gonna replace it with a newImagePath. And then we're going to do logo.fadeIn(300). Then of course we have to call that switchImages function so we're gonna do it right here, switchImages. And we're gonna pass in smallLogo. So when we're going past 100, we want to switch to the small logo, and when we come back up, we want to switch to the default logo. All right, let's do a refresh and now when we scroll, there you go. So we have a fade out, swap, and then a fade in. And when we scroll back up, we have the same process but the only thing that's changed is the path of the logo. Now as I was saying in the beginning this can be done with vanilla JavaScript as well, but it's a little bit harder, especially on the animations, on the fade in fade out. There are a few ways you can do it. What I chose to use was CSS3 animation. And you can actually find a vanilla JavaScript version of this script in the source files. We're not gonna cover it here but if you want to check it out, go ahead and see the source files. And that's about it for this coffee break course. I'm Adi Purdila. Thanks very much for watching, and until next time, take care.

Back to the top