Exploring common menu layouts

- One of the places where the advantages of the flexible box model become immediately obvious is in the design and layout of menus. If you've ever built a menu using HTML and CSS you know it can be a royal pain, even something as simple as a horizontal menu with evenly spaced items can be surprisingly tricky and if you want to create a centered or right aligned menu, well, you'll have to bring out your book on CSS Alchemy. With Flexbox however, laying out menus in pretty much any configuration you want becomes almost trivial.

In this chapter, I'm going to show you how to use Flexbox to create five different types of menus, and give you some tips and tricks along the way on how to make your menus mobile first responsive, and accessible as well as fully customizable. From the top, we'll start by building a standard horizontal Single Level Menu, then move on to an Advanced Menu with icons and menu item descriptions. From here, we'll build an accessible Multi-Level Drop-Down menu, create a social media menu, with icons in place of words, and finally, we'll use Flexbox to do the impossible, combine two different menus in the same container, and make it fully responsive.

What you'll see when we move through these examples, is just how easy it is to build menus once we harness the power of Flexbox, and remember, what I'm showing you here is just the tip of the iceberg. Once you know how to manipulate your Flexbox menus, I want you to build on what you learned here, and make your own custom solutions.