As you are probably aware, Flexbox has recently gained momentum with increasing browser support. It allows developers to build complex user interfaces without dealing with unwanted CSS and JavaScript hacks.
Flexbox uses a linear layout model, which allows us to lay our content horizontally or vertically without involving calculations for spacing. The flex layout reacts responsively to the elements within the container, thus requiring fewer media queries.
In this article I will make use of this layout model to build a mega navigation menu and in the process you’ll see how simple it is to build and extend user interface components with flexbox.
I won’t discuss individual Flexbox properties in detail here, but instead the focus will be on the practical use of the features. For a basic introduction to Flexbox, please refer the following resources:
What Are We Building?
To get an idea of what I'll be showing you how to build, take a look at the full-screen CodePen.
This tutorial is divided into three parts:
- Building the navigation bar: Using flexbox to build a simple navigation bar for our imaginary e-commerce platform
- Building a single drop-down section
- Limiting a single drop-down section to three columns
Building the Navigation Bar
The markup for the navigation bar is simple. I will handle everything with two classes (navbar and menu) for the sake of this demo. The CSS here will exclude any styles unrelated to the tutorial.
[code language="html"]
<nav class="navbar">
<ul class="menu">
<li>
<a href="#">
Electronics
<!-- FontAwesome icon -->
<i class="fa fa-angle-down"></i>
</a>
</li>
<!-- ... More nav items here... -->
<ul>
</nav>
[/code]
The navbar class is responsible for centering our navigation bar in the available space, but I’m going to focus on the menu class where I will use flexbox.
I want my navigation items to be laid out horizontally. Also, I want each item to be spaced equally and shrink as needed if there is not enough space.
First, I need to establish a flex formatting context on the .menu element, which I’ll do with display: flex. Now, all the direct children of the .menu element (which is the flex container) will be flex items.
Next, I want the menu items to be equal in width. I’ve added flex: 1 to make them grow uniformly with equal width. Here is the code:
[code language="css"]
.navbar .menu {
display: flex;
position: relative;
}
.navbar .menu li {
flex: 1;
display: flex;
text-align: center;
}
.navbar .menu a {
flex: 1;
justify-content: center;
color: #ffffff;
padding: 20px;
}
[/code]
Looking at the code, you might be wondering why I repeated display: flex for all the flex items (.navbar .menu li).
In the demo, when you hover over a menu item, its background color changes. If I don’t set the display property of the flex items to flex, then only the li elements will have equal width and not the content inside them (i.e. some highlighted part will be clickable and others will not).
Continue reading %Building Mega Menus with Flexbox%
by Kalpesh Singh via SitePoint
Peter Cooper recommends
Brian Rinaldi recommends
Chris Brandrick recommends
