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

Source Code

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24
• Part 25
• Part 26
• Part 27
• Part 28
• Part 29
• Part 30
• Part 31
• Part 32
• Part 33
• Part 34