October 22, 2017
Let's Build: A Consultancy Website - Part 35
Coding The Responsive Mobile Menu
Part 35 introduces our new responsive mobile menu of which I found as inspiration on Codepen.
To code the menu I take definite cues from the inspirational pen and later tweak it to match the site's design. To increase what seems like load time I removed all of the transitional CSS properties so the menu shows and hides nearly in an instant. While transitions and fancy animations are nice, they aren't all that beneficial. On a phone, for example, I have much less patience to wait than my computer. I'm typically trying to access things quickly and adding too many animations to the mix can really hinder the experience in my opinion.
Here's the pen we'll look to for inspiration. I'll be modifying quite a bit of this code to fit our design and also just as a matter of preference.
See the Pen Apple style mobile menu by Andy Leverenz (@justalever) on CodePen.
In this video, I integrate the menu into our site but there is still some work to be done. In later episodes, you'll see me polish this thing up and get it ready for production. Stay tuned!
Download the Source Code for this Project
The Series So Far
Categories
Collection
Part of the Let's Build: A Consultancy Website collection
