Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

How I Made the Slide-in Navigation on My Website

Kevin Powell via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn to create a slide-in navigation effect using modern CSS techniques in this 17-minute tutorial. Explore the process of transitioning from JavaScript-based navigation to pure CSS solutions by removing JavaScript classes, implementing scroll-state container types, and experimenting with scroll-driven animations. Discover how to build responsive navigation components that enhance user experience while maintaining clean, efficient code. The tutorial includes practical implementation examples, timestamps for easy navigation, and demonstrates real-world application through the instructor's live website. Gain insights into modern CSS animation techniques and container queries while building interactive navigation elements that work seamlessly across different devices and screen sizes.

Syllabus

- Introduction
- removing the classes the JS uses
- Adding the scroll-state container type
- Trying a scroll-driven animation instead

Taught by

Kevin Powell

Reviews

Start your review of How I Made the Slide-in Navigation on My Website

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.