We have discussed the usability pros and cons of the Hamburger Menu before, but haven't actually implemented the pattern into a lesson yet.
Your goal is to build a multi-page application that uses the Hamburger Menu icon to navigate between sections.
Your body copy can be Lorem Ipsum, but concentrate on applying appropriate CSS Transitions to accentuate your interface choices and interactivity.
- Make it responsive, using a combination of CSS Grid and Flexbox.
- Follow the Webpack component and router architecture we've used on other labs. You can use
mkvanilla
as you set it up last lab to create this setup. - Use the Hamburger Menu as your primary mobile navigation method.
- Implement CSS transforms, transitions, animations in a user-friendly way.
- Cloudinary should be used to serve appropriate responsive images.
- Sketch your responsive layout and animation ideas before developing.
Submit pull request URL in Canvas, and include a .zip of your sketches.
Include the answers to the following in your submission:
- How long did you spend on this lab?
- Describe the process you used to complete the lab.
- What was the hardest and easiest part of the lab?
- Sketches used to plan out responsive layout and animation ideas (2 points)
- Burger navigation present, functions as navigation between app sections (4 points)
- Thoughtful CSS transforms, transitions, animations applied (4 points)