Off screen navigation

Off screen menu is an off canvas menu positioned outside the viewport, and slides in when activated. You'll be up and running in no time, seriously.

Building the markup

You can create a simple off screen menu with a little bit of markup. You just need to wrap all of your content into one div with a class name off-screen and a off-screen id.

     
<div class="off-screen">
   <nav class="navigation-bar" id="off-screen">

  </nav>
  <!--all of your page content-->
</div>
     
  

An off screen tip

You will notice nothing really changed, you will have to add some more links and markup, so keep reading...

Off screen menu

Here is the tricky part, not so tricky but still, just a bunch of HTML. So we will add some navigation for the off screen menu.

1. Add an off-screen-navigation nav class element. Also add an off-screen id.
2. Add a off-screen-level div class element. We support multiple levels for nesting, cool haa!?. We talk about them down below.
3. Start adding menu items wrapped on a ul element.

  
<nav class="off-screen-navigation" id="off-screen">
  <div class="off-screen-level">
     <ul>
       <li><a href="#">A link</a></li>
       <li><a href="#">A link</a></li>
       <li><a href="#">A link</a></li>
       <li><a href="#">A link</a></li>
       <li><a href="#">A link</a></li>
     </ul>
  </div>
</nav> 
  

Off screen multilevels

It is fairl easy to add multiple levels to the off screen menu, just like the one in here, just resize your window to see it.

The HTML structure stays the same, you just need to wrap the ul elements inside a list item with a off-screen-level div element. Say what?!?

Example

  
<nav class="off-screen-navigation" id="off-screen">
  <div class="off-screen-level">
     <ul>
      <li>
        <a href="#">Setup</a>
        <div class="off-screen-level">
          <div class="off-screen-header">
            <h3 class="header">Setup</h3>
          </div>
          <a class="navigation-back" href="#">back</a>
          <ul>
            <li><a href="/docs">Getting Started</a></li>
            <li><a href="/whats_included">What's included?</a></li>
            <li><a href="/basic_setup">Basic Setup</a></li>
            <li><a href="/browser_support">Browser Support</a></li>
            <li><a href="/using_rails">Using Rails</a></li>
            <li><a href="/examples">Apps Examples</a></li>
          </ul>
        </div>
      </li>  
     </ul>
  </div>
</nav>
  

A brief on off screen

You can nest as much as levels as you want, just keep in mind the basic structure we provided, and nest the necessary elements inside list items.

If you feel like need a bit more help, check out the examples we provided, there is a really cool one on off screen.

Off screen components

We provide a little bit of more functionality to the off screen, it is still a work in progress, so wait for more interesting things.

      
<li>
  <a href="#">Setup</a>
  <div class="off-screen-level">
    <div class="off-screen-header">
      <h3 class="header">Setup</h3>
    </div>
    <!--back navigation link-->
    <a class="navigation-back" href="#">back</a>
    <!--back navigation link-->
    <ul>
      <li><a href="/docs">Getting Started</a></li>
      <li><a href="/whats_included">What's included?</a></li>
      <li><a href="/basic_setup">Basic Setup</a></li>
      <li><a href="/browser_support">Browser Support</a></li>
      <li><a href="/using_rails">Using Rails</a></li>
      <li><a href="/examples">Apps Examples</a></li>
    </ul>
  </div>
</li> 
      
    

      
<div class="off-screen-level">
  <div class="off-screen-header">
    <h3 class="header">Setup</h3>
  </div>
</div>
      
    

      
<div class="off-screen-level">
  <ul>
    <li class="off-screen-list-header">A header</li>
  </ul>
</div>
      
    

Available sass variables

Furatto provides sass variables for you to customize the off screen default values.

  
//General
$off-screen-navigation-color: #EFEFEF !default;
$off-screen-navigation-width: 80% !default;
$off-screen-navigation-font-weight: 100 !default;
$off-screen-navigation-background-color: #333 !default;
$off-screen-z-index: 1 !default;
$off-screen-left-padding: 1rem !default;
$off-screen-vertical-padding: 0.7rem !default;
$off-screen-text-shadow-color: $off-screen-navigation-color !default;
$off-screen-text-shadow-alpha: 0.1 !default;

//Links
$off-screen-font-size: 1.2rem !default;
$off-screen-include-link-hover-transition: true !default;
$off-screen-link-padding: 1rem !default;
$include-separator-to-links: true !default;

//List Header
$off-screen-list-header-transform: uppercase !default;
$off-screen-list-header-font-weight: bold !default;
$off-screen-list-header-font-size: 0.7rem !default;

//Divider
$off-screen-divider-color: lighten($off-screen-navigation-background-color, 10%) !default;
$off-screen-divider-margin: 0.21428571rem !default;

//Back link
$off-screen-back-link-padding: 0.5rem 1rem !default;
$off-screen-back-link-font-weight: 300 !default;
$off-screen-back-link-letter-spacing: 1px !default;
$off-screen-back-link-font-size: 0.9rem !default;
$off-screen-back-link-background: rgba(#000, 0.1) !default;
$off-screen-back-link-text-transform: uppercase !default;
$off-screen-back-link-border-color: #000 !default;
$off-screen-back-link-border-alpha: 0.2 !default;

//Header
$off-screen-header-padding: 1rem !default;
$off-screen-header-font-weight: 200 !default;

$off-screen-toggle-menu-left-position: 0.71428571rem !default;
$off-screen-toggle-menu-brand-name-padding-left: $off-screen-toggle-menu-left-position + 1.42857143rem !default;
$off-screen-toggle-color: #FFF !default;

//Menu toggle
$off-screen-toggle-padding-left: px-to-rems(34) !default;

  

Using off screen plugin

Just add the furatto.off-screen.js file or the furatto.js