by
Lessons:15Length:1.7 hours
Animated html5 page transitions 400x277
  • Overview
  • Transcript

3.5 Fixing the Navigation

Now that our content is swapping out as intended, in this lesson, we will fix the navigation menu so that the correct button is properly highlighted when we navigate to the new page.

3.5 Fixing the Navigation

Now that we've got our external content loading in, whenever we click on the Join page, we're ready to move forward with our next bit of functionality. Now, sometimes when you're trying to achieve something like this, you might find little bits and pieces of your page that aren't behaving like you would expect them to. For example, on this page, whenever we click on the Join link, we see all the Join content come in. But one thing that happens that we don't really want to happen is that the underline for our menu jumps back to the Home page. And the reason it's doing that is because we're still technically on the Home page. We're still at index.html. So what we wanna do, and we're not going to modify the URLs just yet. That's for a later lesson. But what I do wanna do in this lesson is I wanna set it up so that, when we go to the join page, our underline stays there. It doesn't jump back to the Home page. So in order to do that, we need to first understand how the current animations are set up with our hover effects on our nav menu, as well as that active state. So at a high level overview, the active state is really only there to determine where the underline is gonna be when the page first loads. When we hover over a new item, that doesn't change the active item. The active item is still the Home item. And when we move our cursor away, then it returns to that active item. So lets take a look in our code at what that looks like in our HTML. And first of all, let me go ahead and say that all of the changes we made in the last lesson were saved in the SITE05 folder. And that's what we're starting with in this lesson, and then all the changes we'll make in this lesson will be saved in SITE06. So I'm in SITE06 now, and I'm looking at this main nav element. And inside that, we have this unordered list with a class of main-nav-menu. And this unordered list is gonna be the focus of this particular lesson. So you'll notice we have a few list items here. Each one of these list items represents one of the menu items on our main nav. And then you'll notice that this first list item has a class of active. And because this list item is for the index.html page, the current page, or the default page when our site first loads, it's our homepage. And so, that's the list item with a class of active. And the rest of our list items don't have any class applied to them at all. So the first thing we need to understand is that that class is applied to the list item itself, not to the anchor tag inside the list item. We're gonna need to remember that when we start coding our jQuery to make this work. So that active item is what we're focusing on. And you can go into your styles.css and find this main nav menu, scroll down a little bit further. And here's this nav-underline element here. This nav-underline element, if we go back to our HTML you'll notice, is a span that comes after all of our list items in that main nav menu. So this nav-underline element, if If we go back to our page, is this little purple bar underneath our menu that moves around whenever we hover over different menu items. So it's basically just an empty span that we're moving around based on wherever we're hovering. And when the page first loads, we're placing it underneath whatever page we're on. So let's go back to our HTML page and this nav-underline. Again, you can look at your CSS to see how that's defined, but ultimately, the position of that nav-underline and the width of that nav-underline is going to be determined using jQuery. Because what we need to do is we need to see which item is currently active, and we need to set the position of that nav-underline equal to the position of that button. And we need to set the width to match the width of the button as well, because not all of these buttons are the same width. You'll notice that the the Join button is pretty narrow where the Contact button is a little bit wider. So we're changing both the position and the width, and we can see that in our main.js file. So inside our document-ready function, we have a couple of variable names created. We have our timeofday, which is eventually just gonna be deleted. And then we have this navUnderline.css. And in that CSS call, we're basically changing the left position and the width of our navUnderline. And you'll see that navUnderline is equal to the element with an ID of nav-underline, as you would guess. And we're setting it equal to the left position of our active item. And our active item is simply the list item in our main nav that has a class of active applied to it. So again when our page first loads we're setting the left position of our navUnderline equal to the left position of our active item. And we're setting the width of our navUnderline equal to the width of our active item. Now, you'll notice when the page first loads, if we refresh it here, that that bar starts out full width, and then it animates down to the size of our active item. And the reason it does that, If we go back to our CSS file, is because we placed a transition on this nav-underline, and we set that transition to animate for all properties. So anytime a property is changed that can have an animated transition, it will animate instead of just changing. And it will take 0.3 seconds to animate. So that's why it animates into that initial position, and that's why it animates from one position to another, whenever we hover over it. All we're doing in our JavaScript is changing the width and the position. But that transition property is causing that change to actually animate instead of just snapping into position. So let's jump into our JavaScript now, and let's make this happen. In other words, we're gonna change the left position and the width of that navUnderline item whenever we click to go to a new page. And I should also go ahead and point out that we also have this hover event for our nav items. And so that, when we hover it, you'll notice there's two functions inside this hover event. The first function triggers when we hover over it. The second function triggers when we move our mouse cursor away from that button. But when we hover over it, we're basically just changing the left position and the width of our navUnderline again to match the left position and the width of the item that we're hovering over. And then when we move our mouse cursor away from it, we're just setting it back to the left position and the width of our active item or the page that we're on. So now let's go down to our pageChange function because, in this function, I want that navUnderline to move and remain on the menu item that represents the page we just clicked on. So if we just clicked on the Join link to go to the Join page, we've loaded in all of this Join content. And we also want that underline to stay underneath that Join menu item instead of moving back to the Home menu item. So the first thing we're gonna do inside this pageChange function is we're going to change the value of that active item variable. Remember, we have this variable called active item or $activeItem,and it's set equal to the list item that has a class of active applied to it. And so what I wanna do is I want to change the value of that active item to this new list item that we just clicked on. But then I also wanna add the class of active to that new item. So the way we do that is we're gonna set active item first of all, equal to our new item, our new list item that we just clicked on. So the way we do that is we're going to point to main nav menu. And this is about to get a little bit messy, because we have to inject some extra strings here. But we're looking for the anchor tag inside that main nav menu that matches or that has an href attribute that matches this new URL that's been passed in. So if we click on the Join button, we need to find the anchor tag inside this menu, that has an href equal to join. And we're not gonna hard code it, but I'm just showing you an example of what it would look like. So again, we're looking for the anchor tag inside that menu that has an href equal to, and not just join, but join.html. So this value here should match whatever this new URL is that's passed in. So what we need to do is we need to get rid of this join.html, and then break up the string. We're gonna end that first string by putting another single quote there, and then we're gonna add newURL to that string, and then we're going to add on to that this little ending part, here. So make sure that you're paying close attention to all of your single and double quotes to make sure that it ends up looking like href=, and then join.html inside double quotes. So pay close attention to those quotation marks, but that should get us where we're going. But remember, I said earlier that it's not these anchor tags that have the class of active applied to them. The active item is not supposed to be an anchor tag. It's supposed to be the list item that's a parent of that anchor tag. So, once we get this element here, we're not done. We actually need to grab the list item, that is the parent of that anchor tag. And the way we do that in jQuery is we simply say .parents. And then inside parenthesis and quotation marks, we type in the CSS selector that we're looking for. And we're looking for a parent that is a list item, so we're just gonna put li inside quotation marks. So this will give us the list item parent of our anchor tag that we're looking for, and it will store that list item in this active item variable. Now remember that I also wanted to add a class of active to this list item, and we could either do that on a separate line by saying $activeItem.add class etc, etc, etc. Or we could make it a little more efficient by simply just adding that here. So we've already stored this new list item inside active item. But we can also append onto the end of this, addClass active, and it will basically do both things at once for us. So we'll still set this list item equal to this active item variable, but it will also add the class of active to that list item. So again, it just makes our code a little more efficient. It does two things in one line. And now that we've done that, now that we've changed the value of active item, all we need to do is to move our little underline, our little purple underline over to where that active item is located. And we did something identical to that when the page first loaded here. We took our active item position and width, and we applied those to the nav-underline. And we're gonna do the exact same thing here. So we can just copy this line of code where we're setting that CSS, and then come back down to our pageChange function. And right after we change the value of our active item, we're going to paste that CSS change. So it's doing the same thing it did at the beginning, except now active item has a different value. It's pointing to a different list item. So lets see, after doing all of that, let's see if it worked. We'll jump back into our page, we'll refresh it, and then when we click on Join, sure enough, our underline stays there. We click on Home, and it goes back to the Home page. It doesn't jump back to where it was before. So that gets us where we're going there. And we'll continue with the rest of our page in the next lesson.

Back to the top