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 single-level menu layout - CSS Tutorial
From the course: Advanced Responsive Layouts with CSS Flexbox
Using Flexbox to control single-level menu layout
- The Single Level Menu is most common and most basic type of menu you'll find on the web. It also serves as the base for other types of menus including an Advanced Menu, Drop-Down menus, Mixed menus, and Mega menus. The Single Level Menu gets its name from the fact that all the menu items are displayed on the same level, as we can see here. There are no drop-down elements or hidden elements. You just have the menu items themselves and this is what you would normally see on a site. Single Level menus are typically displayed in one of two layout molds, either a vertical stack, like you see here. This is what you would see in a sidebar or in a menu section on a page and most commonly on cell phones or you have the horizontal bar where each of the menu items are displayed one next to another in a horizontal area. This is what you would normally see on wider screens. Right now I have a mobile first menu. That's the vertical stack that's easy to access on mobile devices and smartphones…
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
-
-
-
-
-
-