From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Bonus: Animate the sliding effect - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Different off-screen navigation options2m 7s
-
(Locked)
Off-screen to cover navigation overview2m 43s
-
(Locked)
Set up the main grid3m 36s
-
(Locked)
Position the navigation area on the grid4m 15s
-
(Locked)
Hide the navigation area off canvas1m 50s
-
(Locked)
Create a reveal effect using JavaScript3m 45s
-
(Locked)
Improve accessibility of off-screen navigation3m
-
(Locked)
Overview of sliding navigation panel1m 15s
-
(Locked)
Create an overflowing grid3m 30s
-
(Locked)
Slide content in and out of the canvas4m 7s
-
(Locked)
Bonus: Animate the sliding effect6m 53s
-
(Locked)
-
-