1
00:00:00,540 --> 00:00:06,900
Well, hey everybody!  I'm Nick Pettit and today I would like to tell you about our latest Forum Contest.

2
00:00:06,900 --> 00:00:08,310
Let's check it out!

3
00:00:09,540 --> 00:00:16,300
Here I'm on the Treehouse website, and we have a couple of different examples of responsive navigation.

4
00:00:16,820 --> 00:00:20,180
And that is the theme of this contest.

5
00:00:20,510 --> 00:00:27,540
So over here on the left, we have some navigation, we have some filters up here, or actually this allow you to sort.

6
00:00:27,910 --> 00:00:38,320
And then we have some filters over on the right. Now when I resized the page, all of these filters and sorts collapsed.

7
00:00:38,710 --> 00:00:42,000
And you can see we can go ahead and display those.

8
00:00:42,520 --> 00:00:46,280
We can collapse different sections or we can hide the filters altogether.

9
00:00:46,390 --> 00:00:55,120
If I make the page even smaller, we'll noticed few more things happen, that horizontal navigation becomes vertical.

10
00:00:55,120 --> 00:01:03,910
And the navigation over on the left side becomes hidden, unless you go ahead and click this little icon here.

11
00:01:03,910 --> 00:01:08,720
So those are a few examples of responsive navigation.

12
00:01:08,720 --> 00:01:16,670
I want to show you a few other examples here in the Bootstrap frame work at getbootstrap.com.

13
00:01:16,670 --> 00:01:21,160
They have a few examples of how you can use this for an end frame work.

14
00:01:21,160 --> 00:01:30,850
And if I go ahead and resize the page here, you can see how this particular example response to the browser resizing.

15
00:01:32,480 --> 00:01:39,810
Here we have a dropdown, so I can go ahead and click that and it will reveal more menu items.

16
00:01:40,450 --> 00:01:44,130
There's some navigation over here and right here.

17
00:01:44,600 --> 00:01:53,060
But if I make the page smaller, that collapses into again little 3 line button here, some very common design patten.

18
00:01:53,060 --> 00:02:03,210
And it reveals the rest of the navigation and this drop down becomes a clickable link here that reveals what's under the dropdown.

19
00:02:04,260 --> 00:02:06,510
I would like to show you one last example.

20
00:02:07,700 --> 00:02:16,270
Here, we have some code on Code Pen, and if I go ahead and open this in new window here,

21
00:02:16,480 --> 00:02:18,960
you can see what it looks like when the page is full width.

22
00:02:19,410 --> 00:02:24,310
If I have here over, there is another dropdown here. So this is multilevel navigation once again.

23
00:02:25,220 --> 00:02:30,080
And if I decrease the size of the page very similar to the 3 lines,

24
00:02:30,080 --> 00:02:34,230
we have a little arrow here which reveal the rest of the navigation

25
00:02:34,490 --> 00:02:36,080
and then once again for the drop down.

26
00:02:37,180 --> 00:02:46,010
So in this contest, we could like you to build the coolest responsive navigation that you can possibly come up with.

27
00:02:46,010 --> 00:02:55,020
It doesn't necessarily have to be multilevel responsive navigation, but we will be judging based on design and based on your code.

28
00:02:55,020 --> 00:03:02,440
For more details about this contest and how to submit, when the deadline is, be sure to read the rest of this post.