Join Morten Rand-Hendriksen for an in-depth discussion in this video Using Flexbox to control multilevel menus with dropdowns, part of Advanced Responsive Layouts with CSS Flexbox.
- View Offline
- If you go out today and talk to industry experts…on user experience or design or accessibility or mobile,…you'll quickly discover a strong resistance…to the traditional drop-down menu.…Now there are several reasons for this,…most notably that drop-down menus are not accessible,…they're not easy to use…if you use keyboard navigation or voice navigation…and also because drop-down menus…are not accessible if you use touchscreen devices.…If you've ever tried to use a touchscreen device…to open a drop-down menu,…you'll know what I'm talking about.…
Even so, there are certain situations…where you need to have a drop-down menu…and in those cases, we can use Flexbox…to change the behavior of the drop-down menu…and style it the way we want…but before we get to the Flexbox part,…I need to explain how my drop-down menu works…because it's a bit different from what you're used to.…If you go to the Exercise Files for 02_05…and you go to menus.html in your browser,…you will see the drop-down menu…and if you look at the regular menu items,…
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