Join Chris Converse for an in-depth discussion in this video Opening and closing the nav panel, part of Creating a Responsive Web Experience.
Now to open the navigation up when somebody clicks on our mobile menu button, we're going to need to add a click event to that button. So let's come back to our design.js file in our text editor. Inside of the document ready area, let's hit a few returns. So what we're going to want to do is find that mobile menu button. So we'll start with a dollar sign, parentheses. Tick marks first string literal. We're going to search for a.mobile_menu. Outside of the parentheses, we're going to type .on, another set of parentheses, semicolon.
Now, this on function looks for a specific event, so inside of the parentheses, two tick marks, first string literal. The event we're going to look for is a click then a comma then we'll type function, beginning and ending parenthesis, beginning and ending bracket. Split this open on the brackets. So what we have so far is when we find the mobile menu button and somebody clicks on this object we're going to run this function. Now inside here, the first we want to do is to clear some variables. First we want to know what the current height of the navigational element is.
So start by typing var space. It's make up a variable named called navHeight. We are going to set this equal 2 dollar sign parenthesis. Tick marks inside first during literal. We're going to use J query to search for the navigational element and we're going to find out its height. So were going to type.height beginning and ending parentheses and then a semicolon. Next we're going to figure out how tall all of the items inside the Neb element are. So we're going to make a new variable called newNavHeight. And we're going to set this equal to.
And we're going to search for the div inside of the nave element. So dollar sign parentheses, string literal, nav space div. So this is looking for the div that we put inside of the nav element, which wraps all of the anchor links. Outside of the parentheses.height, another set of parentheses, then a semicolon. Let's hit a few returns. Now, let's add a conditional statement. So, we're going to type if add our parentheses and brackets, split that open on the brackets, now inside of the parenthesis lets test the equality of navHeight.
So navHeight space double equals 0, so if navHeight currently equals 0 so what we are going to do inside of here since we know the navigation height is set to 0 which means we are a mobile screen going to animate this open. So start with the dollar sign parenthesis Inside of the parentheses, tick marks for a string literal. We're going to search for the nav element. Outside of the parentheses, we're going to type .animate, beginning and ending parehtesis, semicolon. Inside of the parentheses, let's add a beginning and ending bracket.
Inside of the brackets, to tick marks for a string literal. Let's type in the word height then a colon. What we're going to do is, we're going to animate the height to the new navHeight. So let's come up here. Copy the variable name after the colon. Let's paste a new navHeight then a plus sign, then two tick marks for a string letter roll, then put in px. Since when we animate this, we're actually animating the CSS height property, so the value needs to be set to whatever the height is plus px.
So that the value is specified in pixels. Then outside of the brackets, a comma and then 500 milliseconds. So, what we have so far is if somebody clicks on the mobile nav menu and the current navigation height is 0. we're going to go and detect how high the navigation needs to be for all of the anchor links inside of the div element inside the navigation and we're going to animate to that new height. Now we're also going to use that selected class we created in our CSS to indicate to the user that the navigation menu is now open. So on the next line still inside of the navheight equalling 0, dollar sign parenthesis, we're going to type this which refers to the element that's being clicked on, so this dot add class.
Beginning and ending parentheses, semi colon. Inside, tick marks first string literal. Type in selected. Now let's come down here and add an else to our conditional statement. So we'll type else. Now there are a set of brackets, split these open. So if navHeight does not equal 0, let's come up here and copy this animation statement. We're going to animate the height to instead of new nav, let's come in here and just set the height to 0 pixels. We're also going to come up here and select these selected class. Let's paste that and instead of add class we're going to type remove class.
Now with these in place lets come back out to our browser. Let's hit reload. I'm in the small screen here. If I come over here I click on this. This will animate the navigation open. Notice that the navigation button at the top here is in it's down state or it's selected state. So we have the icon grayed out with the arrow pointing up. And then if I click on it again it will go in and detect that the height is not 0 and will animate it back down, and now we can see the icon is 100% with a lighter arrow. Now since we detect each time you click on this whether the height is set 0 or not this will act like a toggle.
So you can continue to click this and it will always change its state based on what its current state is. Now one more thing that we'll need to adjust. If I leave the menu open, come back out and resize the browser. Once we get out to these individual states, the CSS kicks in, and we don't have a stacked menu any more, and we can't see the mobile nav button. But if I come back down to my small screen state. The navigation will be hidden, because we're detecting that screen size change. But notice the button is still in its selected state. Now to fix this, we're going to need to go into our loadHero function. And when we remove all of the HTML in the hero area, we're also going to reset this button.
We're also going to remove it when we run the LoadHero function, and the Window size is set to small. So back in our browser, let's hit reload. Let's open up the menu. Let's leave it open. Change our screen size. Medium, large, back down to medium. And now when I go back to my small screen, not only do I see the navigation close up but we also see that the selected state has been removed from the mobile button. Now with this functionality in place, next we'll add some animation to the Hero panels for large and medium screens.
- Modifying the graphics
- Adjusting the CSS for the navigation
- Loading content with jQuery
- Loading alternate content based on screen size
- Animating the hero panel
- Maintaining support for Internet Explorer 7 and 8