From the course: Advanced Responsive Layouts with CSS Flexbox
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Using Flexbox to control multilevel menus with dropdowns - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
Using Flexbox to control multilevel menus with dropdowns
- 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…
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
-
-
-
-
-
-