Coding Challenges #1 - Slide in Menu - The Net Ninja

This is my solution to Coding Challenge #1 - Slide in Menu from @iamshaunjp The Net Ninja

The Challenge - Slide in Menu

1. Sliding in and out of the menu nav when we hit the burger nav icon
2. Animation of the burger nav icon into the cross and vice versa
3. Burger and cross icon sit at the very top of everything else on the page (it will visible whatever menu nav sliding in or out).

My Solution - CSS Only

1. Use input type checkbox as menu toggler (make invisible)
2. Create menu bar icon using combination of label > span, psedo element ::before and ::after
3. Use psedo selector of input type checkbox :checked to set style of menu bar icon into cross and sliding in or out menu nav

Conclusion

• Thanks a lot to @iamshaunjp from The Net Ninja for always gives amazing videos
• This is my best solution that i can think of that don't need me to write any javascript code
• Feel free to point out if i make any mistake or if you have any suggestion.
• Again thanks so much to @iamshaunjp for this challange, i learned a lot while trying to complete this challenge.
• Thanks for your time.