From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

A transition for your mobile menu

A transition for your mobile menu - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

A transition for your mobile menu

“

- [Narrator] Hi, this is Chris Converse and in this episode we'll be adding an animation to a mobile menu when it's opened and closed. So if you'd like to follow along, download the exercise files and let's begin by opening the html file in a text editor. So once you have the html file open, up in the head area you'll see a link to style.css. We'll be opening this in a moment. Inside of the body area we have a header. We have an input checkbox that shows up right here. And this uses a similar technique that we explored in an earlier episode. And then inside of the nav element we have a div with all of our links. And we also have the label for the mobile menu. Now since the for attribute of the label matches the id name of the checkbox, if I come over here and click on the label you'll see that the checkbox selects and un-selects. And if we scroll down you'll just see the content that's showing up here. So to make this mobile menu work, let's go back to the exercise files and let's…

Contents