Let's Build: A Consultancy Website - Part 36

Finishing the Mobile Menu

In part 36, I round out the styles for the mobile menu.

The example we borrowed from in part 35 of the series had a lot of unneeded CSS in my opinion. For this design I wanted the menu to be snappy and responsive to a tap of a person's finger on any device. To make this happen I omitted a lot of unnecessary transition declarations as well as any odd transforms that were going on. The end result leaves us with quick hiding and showing the effect that doesn't get in the way of me trying to navigate the site.

UX first, "icing" later

When designing for users you need to think about them first before getting too carried away with design. Ask yourself, does this thing function as it should? Am I following the function over form mantra? If you can answer yes to both of those questions you are on the right path. Only until the functionality is optimal should you bother with what I like to call "icing". By "icing" I mean all of the fancy animations, transitions, fades, and more you can do with CSS. These create really nice effects but sometimes hinder the perception of load time. If it animates slow, it feels slow and too me, you shouldn't put add any more time to the user's journey across your website.

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
• Part 35