Join Morten Rand-Hendriksen for an in-depth discussion in this video Using Flexbox to control multiple menus, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- 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 perfect example of where Flexbox…
This course shows how to use flexible boxes to create advanced responsive layouts. Morten Rand-Hendriksen takes the viewer on a tour of Flexbox and provides actionable code snippets that can be implemented safely in almost any website. He puts it all together in a holy grail site complete with card-based layout, mixed content menus, and interactive components that provide visitors with choices about what they see.
- Creating Flexbox-powered menus
- Building a responsive card layout
- Marking up and styling the holy grail layout
- Changing displays
- Showing and hiding the sidebar
- Animating content