Start a free Courses trial
to watch this video
In this forum contest video Nick Pettit shows examples of Responsive Navigation.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upWell, hey everybody! I'm Nick Pettit and today I would like to tell you about our latest Forum Contest. 0:00 Let's check it out! 0:06 Here I'm on the Treehouse website, and we have a couple of different examples of responsive navigation. 0:09 And that is the theme of this contest. 0:16 So over here on the left, we have some navigation, we have some filters up here, or actually this allow you to sort. 0:20 And then we have some filters over on the right. Now when I resized the page, all of these filters and sorts collapsed. 0:27 And you can see we can go ahead and display those. 0:38 We can collapse different sections or we can hide the filters altogether. 0:42 If I make the page even smaller, we'll noticed few more things happen, that horizontal navigation becomes vertical. 0:46 And the navigation over on the left side becomes hidden, unless you go ahead and click this little icon here. 0:55 So those are a few examples of responsive navigation. 1:03 I want to show you a few other examples here in the Bootstrap frame work at getbootstrap.com. 1:08 They have a few examples of how you can use this for an end frame work. 1:16 And if I go ahead and resize the page here, you can see how this particular example response to the browser resizing. 1:21 Here we have a dropdown, so I can go ahead and click that and it will reveal more menu items. 1:32 There's some navigation over here and right here. 1:40 But if I make the page smaller, that collapses into again little 3 line button here, some very common design patten. 1:44 And it reveals the rest of the navigation and this drop down becomes a clickable link here that reveals what's under the dropdown. 1:53 I would like to show you one last example. 2:04 Here, we have some code on Code Pen, and if I go ahead and open this in new window here, 2:07 you can see what it looks like when the page is full width. 2:16 If I have here over, there is another dropdown here. So this is multilevel navigation once again. 2:19 And if I decrease the size of the page very similar to the 3 lines, 2:25 we have a little arrow here which reveal the rest of the navigation 2:30 and then once again for the drop down. 2:34 So in this contest, we could like you to build the coolest responsive navigation that you can possibly come up with. 2:37 It doesn't necessarily have to be multilevel responsive navigation, but we will be judging based on design and based on your code. 2:46 For more details about this contest and how to submit, when the deadline is, be sure to read the rest of this post. 2:55
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up