Animated Small Screen Navigation
Overview
The objective of the activity is for you to enhance you small screen navigation.
Last week, when you built your “Course Home Page” you implemented responsive navigation with a hamburger and X for small screens. You then used horizontal navigation for larger screens. This was a review of what you learned in a previous class.
This week, when you build your “Chamber of Commerce Directory Page”, you will improve on what you already know by animating the small screen navigation open and closed.
The first four videos will cover what you should already know about building a responsive menu for small and large screens. They are provided again in case you need a review. The final video in the series will provide instruction on how to animate the small screen navigation. It looks great and will make your site stand out.
Prepare
- Trigram for Heaven ☰ Entity
- A Complete Guide to Flexbox
- Navigation and Wayfinding
- A Complete Guide to CSS Grid
Activity Instructions
- Watch Responsive Navigation Part 1 [8:22] Build the small screen navigation
- Watch Responsive Navigation Part 2 [3:28] Build the larger screen navigation
- Watch Responsive Navigation Part 3 [1:14] Enhance small screen with different icons for open and closed
- Watch Responsive Navigation Part 4 [2:48] Move the hamburger icon to the header
- Watch Responsive Navigation Part 5 [3:37] Animate opening and closing the small screen menu