Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Create a Portfolio Using HTML and CSS!
You have completed Create a Portfolio Using HTML and CSS!
Preview
It’s time to add some JavaScript to make the mobile navigation menu interactive, ensuring it remains accessible.
Resources
What Next?
Once you've built your portfolio, head over to the Career Toolbox Track to build the skills you need to land a job in the tech industry.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Welcome back.
0:00
We're almost at the finish line.
0:00
Real quick,
0:02
I'd like to note that I've already linked
our JavaScript file in a previous video.
0:03
If you haven't been following
along up until this point,
0:08
don't forget to take that step.
0:11
All right, let's open app.js.
0:13
First, we'll need to grab a few
elements from the document and
0:16
store them into variables.
0:20
So I'm going to grab our menu button,
0:21
open icon, close icon,
and our mobile menu.
0:25
All right, I'd like to keep all of the
functionality in a separate function so
0:36
that it's easy to access
in multiple situations.
0:41
So I'll create a new
function named toggleMenu.
0:43
To help with testing,
I'm going to set up an event
0:47
listener on our menu button that
listens for clicks as well.
0:50
Inside, we'll simply
call our new function.
0:53
I first want a variable to hold
the boolean value of our aria-expanded
1:07
attribute we added earlier.
1:11
When the page loads,
1:13
it's false because we don't want
the navigation menu opened automatically.
1:14
We can utilize this to tell our JavaScript
1:18
whether we should add that
open class to our menu or not.
1:21
So I'll name the variable isExpanded and
use getAttribute for
1:24
our aria-expanded attribute.
1:28
This, however, returns a string value and
we want a Boolean, so
1:30
I'll check if this is strictly
equal to the string of true.
1:34
Now this will hold the value we need.
1:38
Now we can set this attribute
to its opposite Boolean value by
1:40
writing menuBtn.setattribute.
1:45
We want our aria-expanded and
we want to set it to not isExpanded.
1:47
If we console.log(isExpanded) and
not isExpanded and click our button,
1:58
we'll see it's false and
it's opposite, true.
2:03
Now that we've set it to true,
if we click it again, we'll see true, and
2:15
then its opposite, false, very handy.
2:19
We also need to adjust our
mobile navigation's aria-hidden
2:21
attribute to whether its
menu is now expanded or not.
2:25
We can do so with
mobileNav.setAttribute,("aria-hidden and
2:28
set it to our IsExpanded variable.
2:33
All right, now for the visuals,
I'm going to say if not isExpanded,
2:36
meaning it's false,
we should hide our menu.
2:39
I'll set the display of
2:42
our close icon to block,
2:47
the open icon to none, and
2:51
add the open class to our mobileNav.
2:57
Else I'll do the opposites.
3:04
As we can see, it's working, but
we need to bump up its z-index so
3:22
that it covers our hero images.
3:26
I'll just give it a z-index of 50.
3:28
This can really be anything greater than
0, but I usually go in increments of 50 as
3:30
a personal preference, so feel free
to make this any number you'd like.
3:35
Looks like it's working great.
3:38
If I click on a link though,
I noticed two things.
3:40
The page abruptly jumps
down to the section and
3:44
the menu stays open afterwards.
3:47
The first one is easy,
let's go up to our root selector and
3:49
add in a smooth scroll behavior.
3:53
There we go.
4:01
That's much better.
4:02
Let's head back to our JavaScript
to handle the other challenge.
4:03
I'll first save all of our anchor tags
within our mobileNav to a variable.
4:07
Down below, I'll write a for
each loop on them.
4:25
Inside, we'll attach an event listener
on each link that listens for clicks.
4:28
And inside that,
call our toggle menu function.
4:42
Let's try it out.
4:48
It's working well.
4:51
Because of how we've set this up, there
shouldn't ever be a way for a user to
4:53
click a mobile nav link unless the menu
has the open class and it is visible.
4:57
But to add another layer of certainty, and
in case you took a different approach,
5:02
we can add a conditional here,
5:06
making sure the menu has the open
class before calling this function.
5:08
And it's still working great, awesome.
5:21
That wraps up this project for me, but
I encourage you to take this even further.
5:24
You could, for example, provide layout or
font size changes at a tablet screen with.
5:28
You could try to add more animations or
transitions to the mobile navigation
5:33
links, like having them fade in
after the menu has slid on screen.
5:38
You could experiment with different
fonts and colors, and so much more.
5:42
If you'd like to host this
project easily with GitHub pages,
5:46
be sure to check the teacher's notes for
a link to instructions on how to do that.
5:50
This was a lot of fun for me,
hopefully it was for you as well.
5:55
I also hope that this provided
inspiration and ideas for
5:59
your own portfolio,
we'd love to see what you create.
6:02
Anyways, thanks everyone.
6:06
I'll see you next time.
6:08
And until then, happy coding.
6:09
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up