Forum Contest | Responsive Navigation3:03 with Nick Pettit
In this forum contest video Nick Pettit shows examples of Responsive Navigation.
Well, 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 up