From the course: CSS: Advanced Layouts with Grid

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Bonus: Animate the sliding effect

Bonus: Animate the sliding effect - CSS Tutorial

From the course: CSS: Advanced Layouts with Grid

Start my 1-month free trial

Bonus: Animate the sliding effect

- [Narrator] To wrap up this chapter, I want to give you a little bonus to improve the user experience of both of these sliding menus we've created. You will have noticed, I keep referring to them as sliding menus, but when you click on the button, it pretty much just slams into place. There is no sliding here. It's like pop on, and pop off. Which works, but it's really jarring. Not very attractive, and it almost looks like an error. What would be better is if the menu slid into view from the left-hand side, and then slid out again when it was deactivated, and we can do that using CSS. But there's a caveat. As of this recording, there's a bug in Firefox that prevents this from working properly in Firefox. So if you are going to do this in production, and Firefox has not resolved this issue by the time you watch it, you need to make some changes to the code to get it to work across all browsers, and that means making some compromises. I'll show you what that is a little later on. But…

Contents