Mastering CSS

Mobile menu

So far in this chapter, you've learned about Ethan Marcotte's three fundamentals of responsive web design – fluid grids, flexible images that squish, and media queries. That's kind of the easy part in a way. The hard part is figuring out the multitude of tricky design challenges; for example, what to do with our menu on a mobile, especially as we decide to add more menus. Luckily, this is the one area where a decent design pattern has emerged. We are going to forgo the horizontal menu that shows each button on the nav in lieu of a hidden menu that is activated by a click or touch. Upon being clicked or touched, the hidden menu will slide down vertically and show all the menu choices. We'll achieve this by styling the mobile nav ...