W02 Learning Activity: Small Screen Animated Navigation
Overview
The objective of the activity is for you to enhance your small screen navigation with animation.
Activity Instructions
Last week, when you built your home page, you implemented responsive navigation with a hamburger and X (close) icon for small screens. You then used horizontal navigation for larger screens.
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 to make your navigation and site stand out.
Watch Responsive Navigation Part 1 Build the small screen navigation
Watch Responsive Navigation Part 2 Build the larger screen navigation
Watch Responsive Navigation Part 3 Enhance small screen with different icons for open and closed
Watch Responsive Navigation Part 4 Move the hamburger icon to the header
Watch Responsive Navigation Part 5 Animate opening and closing the small screen menu