Web Development: How to Build a Striped Navigation With Flexbox

Tuesday, September 27, 2016

How to Build a Striped Navigation With Flexbox

Thanks to flexbox, nowadays we can build some really attractive and modern layouts with relative ease. In this tutorial we’re going to look at an interface used recently for Google National Parks, and see how flexbox can help us improve on it.

As always, before going any further, let’s look at what we’ll be building (you may need to check out the larger version as the full effect kicks in on viewports wider than 800px):

Be sure to hover over the links to trigger the corresponding effects.

The Markup

First, let’s examine the markup we’ll be using to build this layout. We define a div element with five links within it (you can use whichever elements you feel are appropriate). Each of our links contains a div with the class of overlay. Below you can see the skeleton of our code:

<div class="flex-wrapper">
  <a href="" class="one">
    <div class="overlay">
      <div class="overlay-inner">
        <h2>Title #1</h2>
        <p>Fusce vulputate orci at nulla consequat, ac tincidunt quam ultrices.</p>
      </div>
    </div>
  </a>
  
  <!-- four more links here -->
</div>

Initial CSS Styles

With the markup ready, we start defining some initial CSS styles, specifically:

Specify the outermost div as a flex container and set its height equal to the viewport height with height: 100vh;.
Set an equal width for all links (flex items). To achieve that, we give them each flex: 1. Additionally, all of our links will have a background image (sourced from unsplash.com) which covers the viewport height. As a fallback (in case an image isn’t available), we also specify a unique background color for each one.
When we hover over a link, its size becomes three times bigger relative to the size of the other links. We do this by changing the value of the flex property of the target link. Happily enough this property belongs to the animated CSS properties, so we’re able to generate a smooth transition effect (at least in most recent browsers).

Here’s part of the CSS code demonstrating what we’ve described above:

.flex-wrapper {
  display: flex;
  height: 100vh;
}

.flex-wrapper a {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: flex .4s;
}

.flex-wrapper .one {
  background-image: url(IMAGE_PATH);
  background-color: red;
}

.flex-wrapper a:hover {
  flex: 3;
}

So far, if we preview the demo in a browser that supports flexbox, we’ll see this result:

Styling the Overlay

Our next step is to assign a few styles to the overlay. Here’s what we’ll do:

Give overlay the same dimensions as the parent link. We can achieve this behavior by positioning it absolutely (relative to the immediate parent) and then specifying zero values for all the offset properties.
Define the overlay as a flex container. This way, we’re able to center its direct child (i.e. .overlay-inner element) vertically and horizontally.
Add a semi-transparent grey background to the overlay when we hover over the parent link.

Here are the associated CSS styles:

.flex-wrapper .overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px; 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: background-color .4s;
}

.flex-wrapper a:hover .overlay {
  background-color: rgba(0, 0, 0, .5);
}

Inner Overlay

Now, it’s time to style the inner parts of our overlay. By default these are hidden and should appear only when we hover over the corresponding parent link. But not immediately, we’ll reveal them after a small delay. This delay is important; if we don’t define it specifically, the transition effect will look a little bit ugly. Remove it and test the demo to understand what I mean.

So just to recap, first the link gets bigger, then the overlay elements become visible. Also, we use the translate3d() to create some slide in effects. Last but not least, we use the transform-style: preserve-3d hack (or a similar one) to prevent possible flickering effects across different browsers.

And here are the related CSS styles:

.flex-wrapper .overlay-inner * {
  visibility: hidden;
  opacity: 0;
  transform-style: preserve-3d;
}

.flex-wrapper .overlay h2 {
  transform: translate3d(0, -60px, 0);
}

.flex-wrapper .overlay p {
  transform: translate3d(0, 60px, 0);
}

.flex-wrapper a:hover .overlay-inner * {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: all .3s .3s;
}

Let’s see what that’s given us.

Going Responsive

The page looks great on large screens, but perhaps on small, or even on medium screens we’ll have to make a few adjustments. For example, here are a few things we can do:

Flip the main-axis of the flex container by adding flex-direction: column to it. In doing so the flex items will flow from top to bottom.
Cancel all the transition effects and show the overlay elements by default .

Our desktop-first media query looks as follows (I’ve used 800px only because that suits the embedded demos in this post–you can choose whatever you feel is best):

@media screen and (max-width: 800px) {
  .flex-wrapper {
    flex-direction: column;
  }
  
  .flex-wrapper a:hover {
    flex: 1;
  }
  
  .flex-wrapper a:hover .overlay {
    background-color: transparent;
  }
  
  .flex-wrapper .overlay h2,
  .flex-wrapper .overlay p {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

Here’s the final appearance of our navigation:

Browser Support

The demo works in all recent browsers that support flexbox.

In some browsers you may notice that the animation of the flex property isn’t as smooth as it should be, or perhaps doesn’t work at all. For example, IE11 doesn’t animate this property, whereas Edge does. This is reasonable enough, considering the fact that flexbox is a new layout mode which is still gaining traction.

Conclusion

In this tutorial, we improved our flexbox knowledge by learning how to build a stylish navigation layout. Hopefully you enjoyed what we’ve built here and have taken some inspiration for your next projects!

If you build a similar layout, don’t forget to show us the approach (pure CSS or JavaScript-based solution) you used.

In the Wild

Before closing, I’d like to share with you a few sites which use a similar layout to what we’ve just created:

Web Development