From the course: Advanced Responsive Layouts with CSS Flexbox

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using Flexbox to control single-level menu layout

Using Flexbox to control single-level menu layout - CSS Tutorial

From the course: Advanced Responsive Layouts with CSS Flexbox

Start my 1-month free trial

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…

Contents