From the course: Creating a Responsive Web Design: Advanced Techniques

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Animating the height of the navigation

Animating the height of the navigation - CSS Tutorial

From the course: Creating a Responsive Web Design: Advanced Techniques

Start my 1-month free trial Buy for my team

Animating the height of the navigation

“

- So now with our conditional statement inside of our click event, what we're going to do first is work inside of the if statement. Which is true if the current navigation is less than five. Which means that we know the navigation is closed. What we first need to do is determine how high we need to open the navigation. And this is going to be determined by how many navigation elements are in the unordered list. So the first thing we'll do is declare another variable inside this if statement. So var newNavHeight. We're gonna set this equal to the $ () add our string, we're gonna search for, $ ('nav > ul') So what we're looking for here is the top level unordered list items inside the navigation. So if the unordered list is not the direct descendant of navigation, we're not going to get its height. So this way we will get the top level ul only, and not all of the uls that are inside the nav. Then outside of the parentheses, .height add in our parentheses, then a space then we're gonna…

Contents