Foundation Documentation
Download Foundation
Get a job, nerd!
via the Job Board from ZURB

Off Canvas

Off-canvas menus are positioned outside of the viewport and slide in when activated. Setting up an off-canvas layout in Foundation is super easy.


The Psychohistorians

Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.

Basic

You can create a basic, unstyled off-canvas menu with just a little bit of markup. Here's how:

HTML

<div class="off-canvas-wrap">
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" >Menu</a> 

    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
        ...
        </ul>
    </aside>

    <!-- main content goes here -->
    <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>

  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>

  </div>
</div>

Rendered HTML

Menu

Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

The basics of Off Canvas are pretty simple. The off-canvas layout is wrapped in .off-canvas-wrap. Next comes .inner-wrap. You also need to include the menu itself, which is .left-off-canvas-menu or .right-off-canvas-menu. You need a corresponding target for your off-canvas menu, either .left-off-canvas-toggle or .right-off-canvas-toggle. Finally, be sure to include .exit-off-canvas so your users can get back to the main page!

Off-Canvas Wrap

This is the outer-most element. It contains the entire off-canvas layout and hides overflows.

HTML

<div class="off-canvas-wrap"><!-- page layout goes here --></div>

Inner Wrap

This is the element that is animated. All of your page content needs to be inside here.

HTML

<div class="off-canvas-wrap">
  <div class="inner-wrap"><!-- all content goes here --></div>
</div>

Off-Canvas Menu

This is the panel that slides in and out when activated. You can place it on either the left or the right side. You can even create menus on both sides!

HTML

<aside class="left-off-canvas-menu"><!-- put your links in here --></aside>
<aside class="right-off-canvas-menu"><!-- put your links in here --></aside>

Target Off-Canvas Menu

To target an off-canvas menu, add .left-off-canvas-toggle or .right-off-canvas-toggle to your layout. Clicking on these will activate their corresponding menu.

HTML

<!-- target the leftside menu -->
<a class="left-off-canvas-toggle">Left Menu</a>
<!-- target the rightside menu -->
<a class="right-off-canvas-toggle">Right Menu</a>

<aside class="left-off-canvas-menu"></aside>
<aside class="right-off-canvas-menu"></aside>

Exit Off-Canvas Menu

Include .exit-off-canvas to provide a way back to the main page. This is an overlay that covers the .inner-wrap when an off-canvas menu is active. Clicking on it will deactivate the off-canvas menu.

HTML

<a class="exit-off-canvas"></a>

Advanced

Using our pre-built components, you can create an awesome off-canvas menu right out of the box.

HTML

<div class="off-canvas-wrap">
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Foundation</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Foundation</label></li>
        <li><a href="#">The Psychohistorians</a></li>
        ...
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Hari Seldon</a></li>
        ...
      </ul>
    </aside>

    <section class="main-section">
      <!-- content goes here -->
    </section>

  <a class="exit-off-canvas"></a>

  </div>
</div>

Rendered HTML


The Psychohistorians

Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.

Using psychohistory, Seldon has discovered the declining nature of the Empire, angering the aristocratic members of the Committee of Public Safety, the de facto rulers of the Empire. The Committee considers Seldon's views and statements treasonous, and he is arrested along with young mathematician Gaal Dornick, who has arrived on Trantor to meet Seldon. Seldon is tried by the Committee and defends his beliefs, explaining his theories and predictions, including his belief that the Empire will collapse in 500 years and enter a 30,000-year dark age, to the Committee's members.

Tab Bar Container

We've provided a simple navigation pattern called Tab Bar. It's a very plain component, designed to be easily customizable. First, we need to add the tab bar container: nav.tab-bar.

HTML

<nav class="tab-bar"></nav>

Button Containers

The button containers, section.left-small and section.right-small, contain the toggle buttons.

HTML

<nav class="tab-bar">
  <section class="left-small"></section>
  <section class="right-small"></section>
</nav>

To add the nice hamburger icon that everyone knows and loves, add a class of .menu-icon to your menu target, and nest a span inside of it.

<a class="right-off-canvas-toggle menu-icon" ><span></span></a>

Now put it all together...

HTML

<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
  </section>
  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
  </section>
</nav>

...and here's what you'll get:

 

Tab Bar Section

The last thing we need is a section for the tab bar content. Add section.tab-bar-section inside nav.tab-bar.

HTML

<nav class="tab-bar">
  <section class="left-small">
    <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
  </section>
  <section class="middle tab-bar-section">
    <h1 class="title">Foundation</h1>
  </section>
  <section class="right-small">
    <a class="right-off-canvas-toggle menu-icon" ><span></span></a>
  </section>
</nav>

Add a class of .left, .right, or .middle depending on which space you want the section to occupy. For example, if you have a Button Container on the left, add the class .right.

HTML

<nav class="tab-bar">
  <section class="left-small"></section>
  <section class="right tab-bar-section"><!-- I stretch all the way to the right --></section>
</nav>

<nav class="tab-bar">
  <section class="left-small"></section>
  <section class="middle tab-bar-section"><!-- I'm in the middle --></section>
  <section class="right-small"></section>
</nav>

<nav class="tab-bar">
  <section class="left tab-bar-section"><!-- I stretch all the way to the left --></section>
  <section class="right-small"></section>
</nav>

 

 

 

Off-Canvas List

We've included a nice list pattern for list in the off-canvas menu. Include ul.off-canvas-list inside your off-canvas menu. For section titles, wrap the li contents in a label.

HTML

<aside class="left-off-canvas-menu">
  <ul class="off-canvas-list">
    <li><label>Foundation</label></li>
    <li><a href="#">The Psychohistorians</a></li>
    <li><a href="#">The Encyclopedists</a></li>
    <li><a href="#">The Mayors</a></li>
    <li><a href="#">The Traders</a></li>
    <li><a href="#">The Merchant Princes</a></li>
  </ul>
</aside>

Rendered HTML

Customize With Sass

Off-canvas layouts can be easily customized using our provided Sass variables.

SCSS

// OFF CANVAS VARIABLES
// Off Canvas Tab Bar Variables
$tabbar-bg: #333 !default;
$tabbar-height: rem-calc(45) !default;
$tabbar-line-height: $tabbar-height !default;
$tabbar-color: #FFF !default;
$tabbar-middle-padding: 0 rem-calc(10) !default;

// Off Canvas Divider Styles
$tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%) !default;
$tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);

// Off Canvas Tab Bar Headers
$tabbar-header-color: #FFF !default;
$tabbar-header-weight: bold !default;
$tabbar-header-line-height: $tabbar-height !default;
$tabbar-header-margin: 0 !default;

// Off Canvas Menu Variables
$off-canvas-width: 250px !default;
$off-canvas-bg: #333 !default;

// Off Canvas Menu List Variables
$off-canvas-label-padding: 0.3rem rem-calc(15) !default;
$off-canvas-label-color: #999 !default;
$off-canvas-label-text-transform: uppercase !default;
$off-canvas-label-font-weight: bold !default;
$off-canvas-label-bg: #444 !default;
$off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%) !default;
$off-canvas-label-border-bottom: none !default;
$off-canvas-label-margin:0 !default;
$off-canvas-link-padding: rem-calc(10, 15) !default;
$off-canvas-link-color: rgba(#FFF, 0.7) !default;
$off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);

// Off Canvas Menu Icon Variables
$tabbar-menu-icon-color: #FFF !default;
$tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);

$tabbar-menu-icon-text-indent: rem-calc(35) !default;
$tabbar-menu-icon-width: $tabbar-height !default;
$tabbar-menu-icon-height: $tabbar-height !default;
$tabbar-menu-icon-line-height: rem-calc(33) !default;
$tabbar-menu-icon-padding: 0 !default;

$tabbar-hamburger-icon-width: rem-calc(16) !default;
$tabbar-hamburger-icon-left: rem-calc(13) !default;
$tabbar-hamburger-icon-top: rem-calc(5) !default;

// Off Canvas Back-Link Overlay
$off-canvas-overlay-transition: background 300ms ease !default;
$off-canvas-overlay-cursor: pointer !default;
$off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5) !default;
$off-canvas-overlay-background: rgba(#FFF, 0.2) !default;
$off-canvas-overlay-background-hover: rgba(#FFF, 0.05) !default;

// Transition Variabls
$menu-slide: "transform 500ms ease" !default;

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/offcanvas";
Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition ยป

Foundation

Foundation is made by ZURB, a product design company in Campbell, California. We've put more than 15 years of experience building web products, services and websites into this framework.

Want more?

Talk to us

Tweet us at
@foundationzurb

Email us at
foundation@zurb.com
or check our support page

Stay in touch

Keep up with the latest on Foundation. Find us on Github.

Stay Connected
Studios Helping more than 200 startups succeed since 1998.
Foundation The most advanced front-end framework in the world.
Design Apps Prototype, iterate and collect feedback on your products.
University Ideas, thoughts and design resources shared with you.

© 1998‐2013 ZURB, Inc. All rights reserved.