- [Chris] Hi, this is Chris Converse
and in this episode we'll create an expandable mobile menu
using nothing more than html and CSS.
So if you'd like to follow along with me
download the exercise files and
let's begin by opening index.html in a text editor.
And when you have the html file open
you'll see we have a pretty simple layout here.
Up in the heading area, we have a link to the style.css file
which we'll be opening in a few minutes.
Down here in the body area we have a header,
a navigation area, and an article.
Inside of the navigation we have a series of anchor links
and these are the links that we're going
to be showing and hiding with CSS.
Now to preview this layout,
you can open the index.html file in a browser
and the first thing that we'll need to do
to create our mobile menu is add a little bit of html.
So let's come over here to the html file.
Inside of the navigation element,
before the word Topics, let's add a label tag.
So, <, type in the word label, end the tag.
Going to come in here and indent all of the anchor tags,
and then get the cursor after the anchor tags,
before the ending nav and let's end the label.
Now inside of the label let's come up here,
let's hit a return before the first anchor link
and let's add an input tag,
so <, type input, type is a checkbox,
and then let's end the tag.
So we're basically using a form element here
inside of a label, so that the label will
control the checkbox, allowing us to click
on the Topics word and enable the checkbox
and then we'll be showing all of the anchor links.
Now to do that we're going to need
a container around the anchor links as well.
So let's get our cursor before the first anchor link,
let's enter return, let's put in a beginning div tag,
let's get our cursor after the last anchor tag,
let's end that div tag, and then again
I'm going to indent all of these anchor links.
So we have our main navigation element,
we have our label element here with the word Topics,
we have an input checkbox and a div
with all of the anchor links.
So now if I save my html and go back to the browser
we'll now see that we have a checkbox showing
after the word Topics.
And so with this in place,
let's go back to the exercise files,
let's open style.css in our text editor,
and let's scroll all the way down to the bottom,
after the nav a:first-of-type rule
and let's start by creating a rule
that's going to target the label inside the nav element.
So, we'll type nav label, put in our brackets,
we'll split this open, first property's going to be display,
we're going to set the display type to a block,
next line we're going to set up background property,
so let's set background, now we're going to use
shorthand style here, so the first property's color,
but we're going to leave that blank.
Second is the image, so we'll type url,
put in our parenthesis,
we're going to go into the images directory,
then we're going to type menu.svg,
outside of the parenthesis we're going to set the repeat,
we're going to set no-repeat for that value,
and then for the x-position we're going to set zero,
and then for the y-position we're going to set to one pixel.
Next property's going to be background-size
and we're going to set this to 20 pixels for the width,
and then auto for the height,
and then the last property here we're going to set is padding.
That's going to be zero on the top, zero on the right,
10 pixels on the bottom, and 30 pixels on the left.
With that in place we can hit Save
and go back to the browser and hit Reload.
We'll now see the graphics showing up in the background
and all of the anchor links with their margin-left
now vertically align with the word Topics.
So now let's go back over to our CSS
and let's target the div that's inside of the label element.
So we'll type nav label div,
put in our brackets,
first property's going to be margin,
we're going to set 10 pixels on the top,
zero on the right, zero on the bottom, and zero on the left.
Save your file, if you reload in the browser,
you'll now see that the first link called Properties
is now spacing down 10 pixels.
So now back in the CSS, let's come in here
and set a display type of none.
It's saved again and now in the browser,
all of those links that are inside
of that div element are not displaying.
Now in order to show these links,
we're going to use something called
the adjacent sibling selector.
We're basically going to turn on those links
if the checkbox is in a checked state.
So in the CSS, let's come in here and create a new rule.
So type nav label input:
let's add the pseudo-class of checked,
then a space, then we're going to add a tilde,
which is the adjacent sibling selector
and then type in div.
So again, what this means is we're going to target
this div element if the input field,
which is at the same level or a sibling
of this div, is in a checked state.
So if this is the case, we're going to come in here
and reset the display type to a block.
So with that in place you can hit Save on your CSS,
go back to the browser, hit reload,
and if we come in here and check the checkbox,
now we'll see all of the links will show up.
If I uncheck the checkbox, the links will disappear.
And since the word Topics and everything in here
is inside of that label element,
we can click anywhere inside of here
and activate the checkbox.
And so with that working, the last thing
we need to do is hide the input field.
So back to the CSS, I'm going to put this above the
label input:checked, so nav label input,
put in our brackets, and we'll come in here
and simply set the input field to display: none.
Save your work, go back to the browser,
we no longer see the input field,
and if click anywhere on Topics,
this will open up the menu,
if we click it again, it will close the menu.
And so with a few lines of CSS, we were able to create
an interactive expandable mobile menu.
Now if you'd like to add some additional
user experience touches to your menu,
like animations, or maybe sensitivity to a user screen size,
I'd recommend taking a look at chapter one
of Advanced Techniques in Creating a Responsive Web Design,
which is also available here in the library.
And so with that I'll conclude this episode,
and as always, thanks for watching.