From the course: Advanced Responsive Layouts with CSS Flexbox
Exploring common menu layouts - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
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.
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
Exploring common menu layouts1m 28s
-
(Locked)
Marking up five types of menus4m 53s
-
(Locked)
Using Flexbox to control single-level menu layout7m 21s
-
(Locked)
Using Flexbox to control advanced menus6m 51s
-
(Locked)
Using Flexbox to control multilevel menus with dropdowns6m 24s
-
(Locked)
Creating a social media menu3m 17s
-
(Locked)
Using Flexbox to control multiple menus4m 38s
-
-
-
-
-
-