1
00:00:01.04 --> 00:00:03.00
- [Chris] Hi, this is Chris Converse

2
00:00:03.00 --> 00:00:05.07
and in this episode we'll
create an expandable mobile menu

3
00:00:05.07 --> 00:00:08.05
using nothing more than html and CSS.

4
00:00:08.05 --> 00:00:10.04
So if you'd like to follow along with me

5
00:00:10.04 --> 00:00:12.01
download the exercise files and

6
00:00:12.01 --> 00:00:16.04
let's begin by opening
index.html in a text editor.

7
00:00:16.04 --> 00:00:18.00
And when you have the html file open

8
00:00:18.00 --> 00:00:19.09
you'll see we have a
pretty simple layout here.

9
00:00:19.09 --> 00:00:23.06
Up in the heading area, we have
a link to the style.css file

10
00:00:23.06 --> 00:00:25.07
which we'll be opening in a few minutes.

11
00:00:25.07 --> 00:00:27.09
Down here in the body
area we have a header,

12
00:00:27.09 --> 00:00:30.05
a navigation area, and an article.

13
00:00:30.05 --> 00:00:33.02
Inside of the navigation we
have a series of anchor links

14
00:00:33.02 --> 00:00:34.07
and these are the links that we're going

15
00:00:34.07 --> 00:00:36.07
to be showing and hiding with CSS.

16
00:00:36.07 --> 00:00:38.03
Now to preview this layout,

17
00:00:38.03 --> 00:00:40.08
you can open the index.html
file in a browser

18
00:00:40.08 --> 00:00:42.05
and the first thing that we'll need to do

19
00:00:42.05 --> 00:00:45.05
to create our mobile menu
is add a little bit of html.

20
00:00:45.05 --> 00:00:47.03
So let's come over here to the html file.

21
00:00:47.03 --> 00:00:49.00
Inside of the navigation element,

22
00:00:49.00 --> 00:00:53.08
before the word Topics,
let's add a label tag.

23
00:00:53.08 --> 00:01:00.04
So, <, type in the word
label, end the tag.

24
00:01:00.04 --> 00:01:04.00
Going to come in here and
indent all of the anchor tags,

25
00:01:04.00 --> 00:01:06.02
and then get the cursor
after the anchor tags,

26
00:01:06.02 --> 00:01:10.09
before the ending nav
and let's end the label.

27
00:01:10.09 --> 00:01:13.06
Now inside of the label
let's come up here,

28
00:01:13.06 --> 00:01:16.03
let's hit a return before
the first anchor link

29
00:01:16.03 --> 00:01:18.01
and let's add an input tag,

30
00:01:18.01 --> 00:01:23.09
so <, type input, type is a checkbox,

31
00:01:23.09 --> 00:01:25.09
and then let's end the tag.

32
00:01:25.09 --> 00:01:27.09
So we're basically using
a form element here

33
00:01:27.09 --> 00:01:30.02
inside of a label, so that the label will

34
00:01:30.02 --> 00:01:32.04
control the checkbox, allowing us to click

35
00:01:32.04 --> 00:01:35.03
on the Topics word and enable the checkbox

36
00:01:35.03 --> 00:01:37.09
and then we'll be showing
all of the anchor links.

37
00:01:37.09 --> 00:01:39.00
Now to do that we're going to need

38
00:01:39.00 --> 00:01:41.01
a container around the
anchor links as well.

39
00:01:41.01 --> 00:01:44.07
So let's get our cursor
before the first anchor link,

40
00:01:44.07 --> 00:01:51.00
let's enter return, let's
put in a beginning div tag,

41
00:01:51.00 --> 00:01:53.07
let's get our cursor
after the last anchor tag,

42
00:01:53.07 --> 00:01:56.06
let's end that div tag, and then again

43
00:01:56.06 --> 00:01:59.01
I'm going to indent all
of these anchor links.

44
00:01:59.01 --> 00:02:01.02
So we have our main navigation element,

45
00:02:01.02 --> 00:02:04.03
we have our label element
here with the word Topics,

46
00:02:04.03 --> 00:02:06.09
we have an input checkbox and a div

47
00:02:06.09 --> 00:02:08.06
with all of the anchor links.

48
00:02:08.06 --> 00:02:10.06
So now if I save my html
and go back to the browser

49
00:02:10.06 --> 00:02:12.05
we'll now see that we
have a checkbox showing

50
00:02:12.05 --> 00:02:14.08
after the word Topics.

51
00:02:14.08 --> 00:02:16.03
And so with this in place,

52
00:02:16.03 --> 00:02:18.00
let's go back to the exercise files,

53
00:02:18.00 --> 00:02:20.05
let's open style.css in our text editor,

54
00:02:20.05 --> 00:02:23.03
and let's scroll all the
way down to the bottom,

55
00:02:23.03 --> 00:02:26.08
after the nav a:first-of-type rule

56
00:02:26.08 --> 00:02:28.04
and let's start by creating a rule

57
00:02:28.04 --> 00:02:31.01
that's going to target the
label inside the nav element.

58
00:02:31.01 --> 00:02:35.04
So, we'll type nav label,
put in our brackets,

59
00:02:35.04 --> 00:02:39.01
we'll split this open, first
property's going to be display,

60
00:02:39.01 --> 00:02:43.03
we're going to set the
display type to a block,

61
00:02:43.03 --> 00:02:46.06
next line we're going to
set up background property,

62
00:02:46.06 --> 00:02:48.08
so let's set background,
now we're going to use

63
00:02:48.08 --> 00:02:51.05
shorthand style here, so
the first property's color,

64
00:02:51.05 --> 00:02:53.00
but we're going to leave that blank.

65
00:02:53.00 --> 00:02:56.06
Second is the image, so we'll type url,

66
00:02:56.06 --> 00:02:59.02
put in our parenthesis,

67
00:02:59.02 --> 00:03:03.00
we're going to go into
the images directory,

68
00:03:03.00 --> 00:03:06.02
then we're going to type menu.svg,

69
00:03:06.02 --> 00:03:09.00
outside of the parenthesis
we're going to set the repeat,

70
00:03:09.00 --> 00:03:11.00
we're going to set
no-repeat for that value,

71
00:03:11.00 --> 00:03:13.08
and then for the x-position
we're going to set zero,

72
00:03:13.08 --> 00:03:17.08
and then for the y-position
we're going to set to one pixel.

73
00:03:17.08 --> 00:03:20.03
Next property's going
to be background-size

74
00:03:20.03 --> 00:03:24.00
and we're going to set this
to 20 pixels for the width,

75
00:03:24.00 --> 00:03:27.06
and then auto for the height,

76
00:03:27.06 --> 00:03:30.05
and then the last property here
we're going to set is padding.

77
00:03:30.05 --> 00:03:32.07
That's going to be zero on
the top, zero on the right,

78
00:03:32.07 --> 00:03:37.07
10 pixels on the bottom,
and 30 pixels on the left.

79
00:03:37.07 --> 00:03:39.01
With that in place we can hit Save

80
00:03:39.01 --> 00:03:41.01
and go back to the browser and hit Reload.

81
00:03:41.01 --> 00:03:42.08
We'll now see the graphics
showing up in the background

82
00:03:42.08 --> 00:03:45.01
and all of the anchor links
with their margin-left

83
00:03:45.01 --> 00:03:48.09
now vertically align with the word Topics.

84
00:03:48.09 --> 00:03:51.00
So now let's go back over to our CSS

85
00:03:51.00 --> 00:03:54.05
and let's target the div that's
inside of the label element.

86
00:03:54.05 --> 00:03:59.05
So we'll type nav label div,

87
00:03:59.05 --> 00:04:03.01
put in our brackets,

88
00:04:03.01 --> 00:04:05.06
first property's going to be margin,

89
00:04:05.06 --> 00:04:08.00
we're going to set 10 pixels on the top,

90
00:04:08.00 --> 00:04:12.01
zero on the right, zero on the
bottom, and zero on the left.

91
00:04:12.01 --> 00:04:14.01
Save your file, if you
reload in the browser,

92
00:04:14.01 --> 00:04:16.06
you'll now see that the
first link called Properties

93
00:04:16.06 --> 00:04:19.02
is now spacing down 10 pixels.

94
00:04:19.02 --> 00:04:21.01
So now back in the CSS, let's come in here

95
00:04:21.01 --> 00:04:24.04
and set a display type of none.

96
00:04:24.04 --> 00:04:26.05
It's saved again and now in the browser,

97
00:04:26.05 --> 00:04:27.08
all of those links that are inside

98
00:04:27.08 --> 00:04:30.06
of that div element are not displaying.

99
00:04:30.06 --> 00:04:32.00
Now in order to show these links,

100
00:04:32.00 --> 00:04:33.00
we're going to use something called

101
00:04:33.00 --> 00:04:35.00
the adjacent sibling selector.

102
00:04:35.00 --> 00:04:37.03
We're basically going
to turn on those links

103
00:04:37.03 --> 00:04:40.02
if the checkbox is in a checked state.

104
00:04:40.02 --> 00:04:43.02
So in the CSS, let's come in
here and create a new rule.

105
00:04:43.02 --> 00:04:50.08
So type nav label input:

106
00:04:50.08 --> 00:04:53.07
let's add the pseudo-class of checked,

107
00:04:53.07 --> 00:04:56.01
then a space, then we're
going to add a tilde,

108
00:04:56.01 --> 00:04:58.01
which is the adjacent sibling selector

109
00:04:58.01 --> 00:05:00.02
and then type in div.

110
00:05:00.02 --> 00:05:02.04
So again, what this means
is we're going to target

111
00:05:02.04 --> 00:05:05.04
this div element if the input field,

112
00:05:05.04 --> 00:05:07.09
which is at the same level or a sibling

113
00:05:07.09 --> 00:05:10.04
of this div, is in a checked state.

114
00:05:10.04 --> 00:05:12.08
So if this is the case,
we're going to come in here

115
00:05:12.08 --> 00:05:16.01
and reset the display type to a block.

116
00:05:16.01 --> 00:05:19.03
So with that in place you
can hit Save on your CSS,

117
00:05:19.03 --> 00:05:21.03
go back to the browser, hit reload,

118
00:05:21.03 --> 00:05:23.08
and if we come in here
and check the checkbox,

119
00:05:23.08 --> 00:05:26.06
now we'll see all of
the links will show up.

120
00:05:26.06 --> 00:05:28.09
If I uncheck the checkbox,
the links will disappear.

121
00:05:28.09 --> 00:05:31.06
And since the word Topics
and everything in here

122
00:05:31.06 --> 00:05:33.04
is inside of that label element,

123
00:05:33.04 --> 00:05:35.04
we can click anywhere inside of here

124
00:05:35.04 --> 00:05:37.08
and activate the checkbox.

125
00:05:37.08 --> 00:05:39.01
And so with that working, the last thing

126
00:05:39.01 --> 00:05:41.04
we need to do is hide the input field.

127
00:05:41.04 --> 00:05:44.05
So back to the CSS, I'm
going to put this above the

128
00:05:44.05 --> 00:05:52.05
label input:checked, so nav label input,

129
00:05:52.05 --> 00:05:55.01
put in our brackets,
and we'll come in here

130
00:05:55.01 --> 00:06:00.03
and simply set the input
field to display: none.

131
00:06:00.03 --> 00:06:02.00
Save your work, go back to the browser,

132
00:06:02.00 --> 00:06:03.05
we no longer see the input field,

133
00:06:03.05 --> 00:06:05.07
and if click anywhere on Topics,

134
00:06:05.07 --> 00:06:07.04
this will open up the menu,

135
00:06:07.04 --> 00:06:10.08
if we click it again,
it will close the menu.

136
00:06:10.08 --> 00:06:13.08
And so with a few lines of
CSS, we were able to create

137
00:06:13.08 --> 00:06:17.09
an interactive expandable mobile menu.

138
00:06:17.09 --> 00:06:19.05
Now if you'd like to add some additional

139
00:06:19.05 --> 00:06:21.04
user experience touches to your menu,

140
00:06:21.04 --> 00:06:24.06
like animations, or maybe
sensitivity to a user screen size,

141
00:06:24.06 --> 00:06:27.00
I'd recommend taking a look at chapter one

142
00:06:27.00 --> 00:06:30.00
of Advanced Techniques in
Creating a Responsive Web Design,

143
00:06:30.00 --> 00:06:32.02
which is also available
here in the library.

144
00:06:32.02 --> 00:06:34.01
And so with that I'll
conclude this episode,

145
00:06:34.01 --> 00:06:37.00
and as always, thanks for watching.