1
00:00:08,567 --> 00:00:10,200
Hi, welcome back.

2
00:00:10,200 --> 00:00:10,970
Guess what?

3
00:00:10,970 --> 00:00:12,760
We're going to do another, and

4
00:00:12,760 --> 00:00:17,290
our final, navigation bar together,
in this code review.

5
00:00:17,290 --> 00:00:19,850
This one, though,
is a little bit different, not only for

6
00:00:19,850 --> 00:00:22,630
the way we set things up, but
because I want to talk to you about

7
00:00:22,630 --> 00:00:26,940
the accessibility of how many
people make their navigation bars.

8
00:00:26,940 --> 00:00:27,510
The new way,

9
00:00:27,510 --> 00:00:32,800
I've used this way, is to create your
navigation links as part of lists.

10
00:00:32,800 --> 00:00:34,840
So you can see, we already have it
a little bit different over here.

11
00:00:34,840 --> 00:00:39,620
I've got an unordered list with one,
two, three, four a list items, and

12
00:00:39,620 --> 00:00:43,170
some of those list items have
unordered lists themselves.

13
00:00:43,170 --> 00:00:45,500
So while this is very common,

14
00:00:45,500 --> 00:00:50,070
there are some usability issues,
when you realize, are these really lists?

15
00:00:50,070 --> 00:00:54,950
Because if not, that's a semantic tag
we're using, that we may want to avoid.

16
00:00:54,950 --> 00:00:58,460
But it's so common, I wanna show it
to you and let you play with it and

17
00:00:58,460 --> 00:01:00,280
make your own decisions.

18
00:01:00,280 --> 00:01:04,350
The other issue when we make
this drop down navigation bar,

19
00:01:04,350 --> 00:01:08,300
has to do with the accessibility
of people being able to hover

20
00:01:08,300 --> 00:01:10,340
over certain things that
you wanna activate.

21
00:01:10,340 --> 00:01:13,610
I think we've all been there,
when we've been in a webpage and

22
00:01:13,610 --> 00:01:16,100
we're trying to hover over
something to click a link.

23
00:01:16,100 --> 00:01:18,900
And it keeps popping away
because our hand is too shaky or

24
00:01:18,900 --> 00:01:21,910
we have to hover over three
things at the same time.

25
00:01:21,910 --> 00:01:25,030
So again, while this is a technique
I wanna share with you and

26
00:01:25,030 --> 00:01:29,880
help you to understand, I hope that you'll
make sure that any applications you do,

27
00:01:29,880 --> 00:01:33,710
you do your best to make sure
it's as accessible as possible.

28
00:01:33,710 --> 00:01:38,170
So again, let's start with this plain,
kind of boring HTML code, and

29
00:01:38,170 --> 00:01:41,900
see if we can't get it to look like
something a little bit more exciting.

30
00:01:41,900 --> 00:01:45,880
What we have here now is
a horizontal navigation bar

31
00:01:45,880 --> 00:01:48,410
that's going to have drop down elements.

32
00:01:48,410 --> 00:01:52,190
So, when I go over Home, there's nothing
extra to see, but, when I go over

33
00:01:52,190 --> 00:01:56,710
Pictures, you can see that I have three
additional links I can try to do, and

34
00:01:56,710 --> 00:02:01,360
same with Recipes, and Contact,
again, is all by itself.

35
00:02:01,360 --> 00:02:02,470
So how did I do this?

36
00:02:02,470 --> 00:02:09,060
How did I have it so that 2015, 14, and
13 don't show up unless I'm hovering?

37
00:02:09,060 --> 00:02:10,700
And the same with the recipes?

38
00:02:10,700 --> 00:02:11,300
Let's take a look.

39
00:02:13,980 --> 00:02:17,590
All right, I'm going to skip
the body in the navigation

40
00:02:17,590 --> 00:02:19,740
because I think you know
how to do all this.

41
00:02:19,740 --> 00:02:24,226
Instead, let's talk about
the different lists themselves.

42
00:02:24,226 --> 00:02:26,547
So sorry,
list items themselves in the links.

43
00:02:26,547 --> 00:02:28,614
So what I've done is I've gone in here,
kind of so

44
00:02:28,614 --> 00:02:30,630
you can see both at the same time.

45
00:02:30,630 --> 00:02:33,790
And it's very faint, and
I wish I had made a different color now.

46
00:02:33,790 --> 00:02:36,470
But I have a border between
each one of these options.

47
00:02:37,490 --> 00:02:39,730
Now, it would have looked
a little bit weird for

48
00:02:39,730 --> 00:02:42,430
me to have a border right
here along the side.

49
00:02:42,430 --> 00:02:45,500
So what I needed to do is I went and
I said you know what?

50
00:02:45,500 --> 00:02:50,840
For that last list item, the very
last one, let's not put a border in.

51
00:02:50,840 --> 00:02:54,340
It's that little tiny tweaks
that you can put in your code

52
00:02:54,340 --> 00:02:57,070
to make it look a little
bit more professional.

53
00:02:57,070 --> 00:03:01,330
We also don't want borders
on the sub items, right?

54
00:03:01,330 --> 00:03:02,290
Because there's nothing.

55
00:03:02,290 --> 00:03:05,120
Since those are blocked,
we don't need borders on the side.

56
00:03:05,120 --> 00:03:08,450
So, I did the same thing over here,
where I said, you know what?

57
00:03:08,450 --> 00:03:11,320
I don't want to use any borders over here.

58
00:03:11,320 --> 00:03:13,350
Pretty straight forward, I hope.

59
00:03:13,350 --> 00:03:15,540
Now, let's look again.

60
00:03:15,540 --> 00:03:18,880
I did simple styling on my
navigation links, all right?

61
00:03:18,880 --> 00:03:20,880
The one thing I did put in is, again,

62
00:03:20,880 --> 00:03:23,610
I wanted to show you an example
of using transition.

63
00:03:23,610 --> 00:03:28,410
The transition here is what slowly
changes the color when you hover over,

64
00:03:28,410 --> 00:03:29,420
rather than a quick change.

65
00:03:29,420 --> 00:03:34,030
So you can see, it's a little bit
more gradual than sudden, all right?

66
00:03:34,030 --> 00:03:36,840
The active is just like last time.

67
00:03:36,840 --> 00:03:38,740
Now, here's the interesting part.

68
00:03:38,740 --> 00:03:41,580
We're going to talk about the sub menus,
all right?

69
00:03:41,580 --> 00:03:45,127
So how does the browser know
when something's a sub menu?

70
00:03:45,127 --> 00:03:49,585
Well, it can look at the DOM, and it can
look down and go, oh, I'm in navigation.

71
00:03:49,585 --> 00:03:54,670
And now I'm in an unordered list,
and here I am in a list item.

72
00:03:54,670 --> 00:03:58,230
If it finds another list item lower down,
it's kind of chaining down,

73
00:03:58,230 --> 00:04:00,930
it knows, oh, oh, I'm in a sub menu.

74
00:04:00,930 --> 00:04:04,950
So right here, it knows I'm in the nav,
I'm inside of a list,

75
00:04:04,950 --> 00:04:08,680
and I just found an unordered
list inside of there.

76
00:04:08,680 --> 00:04:12,060
So how we have it set up so that it
doesn't show at the beginning is that I've

77
00:04:12,060 --> 00:04:17,620
set the position to absolute,
and I've set the display to none.

78
00:04:17,620 --> 00:04:20,200
So it's not going to show up by default.

79
00:04:20,200 --> 00:04:21,810
Not going to happen.

80
00:04:21,810 --> 00:04:22,840
Okay?

81
00:04:22,840 --> 00:04:23,986
So, how do I get it so

82
00:04:23,986 --> 00:04:28,428
that it suddenly does show up if we
wanna do something along that line?

83
00:04:28,428 --> 00:04:35,280
Well, we wanna find out how to change
it here, when I hover over a list item

84
00:04:35,280 --> 00:04:40,760
that has an unordered list underneath it,
change that display from none to block.

85
00:04:40,760 --> 00:04:45,875
So, these two lines of code right here,
this is really setting it up.

86
00:04:45,875 --> 00:04:48,533
So that when I go over here, by default,

87
00:04:48,533 --> 00:04:52,539
display is none, but when I hover,
display becomes block.

88
00:04:52,539 --> 00:04:58,450
It's a very simple, very short code,
very powerful concept to understand.

89
00:04:58,450 --> 00:05:02,900
So I've shown you a few different ways
that you can style your navigation bars.

90
00:05:02,900 --> 00:05:06,800
We have horizontal,
we have vertical, we have drop down.

91
00:05:06,800 --> 00:05:10,320
I really hope that you'll pick one that
you feel the most comfortable with, or

92
00:05:10,320 --> 00:05:13,320
actually really, the most excited about,
and create one for

93
00:05:13,320 --> 00:05:16,830
your final project here in this CSS class.

94
00:05:16,830 --> 00:05:18,950
Don't worry if you run into problems.

95
00:05:18,950 --> 00:05:20,650
Post to the discussion board.

96
00:05:20,650 --> 00:05:22,510
Go online and look up answers.

97
00:05:22,510 --> 00:05:26,100
But what I really hope is that you can
create something that you're proud of,

98
00:05:26,100 --> 00:05:28,840
that is both beautiful and accessible.

99
00:05:28,840 --> 00:05:29,340
Good luck.