From the course: Advanced Responsive Layouts with CSS Flexbox
Unlock the full course today
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Using Flexbox to control multiple menus - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
Using Flexbox to control multiple menus
- With both the multi-level drop down menu and the social media menu complete we can combine the two of them into what I call a mixed menu. Now mixed menus have become a fairly common design pattern you see all over the web. And you can see it here on my website where you have the main menu on the left and then you have a social menu, or some other type of menu on the right. And then on smaller screens the two will fall below each other. Now if you've ever tried to do this using regular CSS, you will have discovered that this can really be challenging. That's because when you display a menu like you see here with a menu bar, you have to make it a block level element. But once it's a block level element and this social menu is also a block level element, you have to do some CSS alchemy to get them to display on top of one another. Essentially you have to take the social menu and shift it to appear on top of the other one. And it's kind of tricky and requires a lot of CSS. This is a…
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
-
-
-
-
-
-