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 advanced menus - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
Using Flexbox to control advanced menus
- In the Advanced menu we're gonna use multiple Flexboxes nested inside of one another to change the display of not only the menu itself, but also the individual menu items. As you see right now the menu items look a bit strange. They each have an icon followed by a sentence. But the design calls for the icon to be displayed in a large format on the left with the first word from each of the sentences, so Home, Food, Recipes, and News displayed equally sized on the right and then the rest of the words displayed below the first word in cursive and smaller font. We could do this using positioning and negative margins but it would be really clunky. So instead we're gonna use Flexbox to change this display. In the Code Editor I go to the Exercise Files movie 02_04 and find menus.html. And here I'm gonna scroll down until I find the advanced menu. We can see the advanced menu is again, nested inside of nav with the class advanced-nav. Then we have an unordered list, list items, and within…
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
-
Marking up five types of menus4m 53s
-
Using Flexbox to control single-level menu layout7m 21s
-
Using Flexbox to control advanced menus6m 51s
-
Using Flexbox to control multilevel menus with dropdowns6m 24s
-
Creating a social media menu3m 17s
-
Using Flexbox to control multiple menus4m 38s
-
-
-
-
-
-