Intro to Foundation | Lesson #82
Nav Components Part 2: Build Off-canvas Navigation to Suit Mobile Devices Well
Learn to make off-canvas navigation components with more than just a bunch of links.
In the last lesson we built a mega-menu that favors desktop browsers. Now we're ready to build the mobile version of our mega-menu: an off-canvas navigation component (whose name isn't quite as complicated as its HTML).
You can do build one several ways: with the same content fidelity of the desktop version, or collapsed into sub menus. Because this menu is not too terribly complicated, we'll keep the content layout similar. Here's how to implement a mobile-friendly off-canvas nav component.
1. Start with a wrapper
The off-canvas component has a few distinct pieces: An overall container, a container to hold the navigation, and something to hold the content that gets out of its way.
A "off-canvas-wrap" creates a container for the whole page. That is, everything we want to get out of the way when the off-canvas menu appears.
<div class="off-canvas-wrap" data-offcanvas> <div class="inner-wrap"> <a class="left-off-canvas-toggle" href="#"> <div> <!-- custom menu icon --> <div class="top-bar"></div> <div class="middle-bar"></div> <div class="bottom-bar"></div> </div> </a> </nav> <!-- Off Canvas Menu --> <aside class="left-off-canvas-menu"> <!-- menu content goes here --> </aside> </div>
What’s all this?
- off-canvas-wrap and data-offcanvas — Turns the containing
divinto an off-canvas wrapper that will move left and right to reveal/hide the navigation.
- inner-wrap — The container that actually shifts left and right relative to off-canvas-wrap.
- left-off-canvas-toggle — The button that users click to reveal/hide the navigation.
- left-off-canvas-menu — Container for the navigation that’s initially hidden.
2. Add nav content
If there's one cool thing about off-canvas navs, it's that you can embed any content, even a grid. We'll start by adding some standard Foundation columns.
<div> <div class="small-12 columns"> </div> </div>
We'll add a search form:
<img src="#" alt="logo" /> <form> <div class="row collapse"> <label>Search Our Inventory</label> <div class="small-9 columns"> <input type="search" placeholder="find something" /> </div> <div class="small-3 columns"> <span>Search</span> </div> </div> </form>
The thumbnails get a block grid:
<h4>Shop by Style</h4> <ul class="small-block-grid-2"> <li> <img src="#" alt="product photo"> <p>Description</p> </li> <li> <img src="http://placehold.it/50x50"> <p>Description</p> </li> <li> <img src="http://placehold.it/50x50"> <p>Description</p> </li> </ul>
Categories and contact are unordered lists with icons.
<h4>Shop by Category</h4> <ul> <li><a href="#">Beds</a></li> <li><a href="#">Wardrobe</a></li> <li><a href="#">Nightstands</a></li> <li><a href="#">Mirrors</a></li> <li><a href="#">Lamps</a></li> <li><a href="#">Duvets</a></li> </ul> <h4>Contact Us</h4> <ul> <li>1-877-000-0000</li> <li>email@example.com</li> <li>@dualityfurniture</li> </ul>
3. Add body content
Your main body content goes inside this wrap.
<!-- main content goes here --> <section> <img src="#" alt="logo" /> </section> <a class="exit-off-canvas"></a>
And that's it: A wrapper, content for the navigation, and content for the page. View the complete example in our CodePen. Next time we'll talk about putting these two menus — top bar and off-canvas nav — together.
About the instructor
Ben Gremillion is a Design Writer at ZURB. He started his career in newspaper and magazine design, saw a digital future, and learned HTML in short order. He facilitates the ZURB training courses.
Product Design Lessons, Direct to Your Inbox
We're just getting started, so sign up and we'll keep you in the know with our product design lessons. No spam here.