This is a HTML/CSS only solution because it is lightweight and very reliable across different browsers. It is composed of four main elements which should all be directly adjacent to each other in the markup and in the order specified below.
Any content placed inside the off screen menu will be moved off screen below 768px viewport width. At the same time, a label becomes visible with which the user can toggle the visibility of the off screen menu. It is intended to be used with navigation elements to give you a mobile menu solution without writing additional markup.
Some browsers do not support the css selectors used in this off-screen menu (
:checked pseudo-class and
~ general sibling combinator) but this can be addressed by including pistachio.js and adding the attribute
data-p-module="offScreen" to the
off-screen-trigger element. Affected browsers:
A hidden checkbox input that is toggled by clicking the label. Must be a sibling of the menu content and page wrapper.
<input type="checkbox" id="off-screen-trigger" class="off-screen-trigger" data-p-module="offScreen">
This should be positioned at the top of the page directly after the opening
body tag. This contains various elements such as the site logo and the off-screen menu trigger label.
Please note the empty
onclick attribute on the
<label> is required to make it trigger the menu on ios < 6.0
<div class="off-screen-header page-section page-section--xs"> <div class="container"> <div class="grid grid--align-center grid--bleed"> <div class="grid__col-auto off-screen-trigger-spacer"> <label for="off-screen-trigger" class="off-screen-trigger-label" onclick> <i class="fa fa-bars fa-2x"></i> <span class="sr-only">toggle menu</span> </label> </div> <div class="grid__col-auto off-screen-header__logo"> <a href="#" class="off-screen-header__logo__link pull-left link-img"> <img src="https://cdn.graze.com/static/11-1443792395/images/graze/en/header/logo.png" class="off-screen-header__logo__link__img"> </a> </div> </div> </div> </div>
The content of the off screen menu is visible at all times but below the 768px viewport width it is moved into the off-screen menu. this allows you to re-use the same markup for dekstop and mobile. When using navigation elements these are re-styled in the off screen menu to be more mobile friendly.
<div class="off-screen-menu"> <div class="page-section page-section--bleed"> <div class="container"> <div class="row"> <div class="col-xs-12"> <!-- pistachio navigation element --> </div> </div> </div> </div> <div class="page-section page-section--brand page-section--bleed"> <div class="container"> <div class="row"> <div class="col-xs-12"> <!-- pistachio navigation element --> </div> </div> </div> </div> </div>
The content of the page that follows should be entirely wrapped in a
.page-wrapper class. If you're using the bootstrap or flexbox grid then you should already have a container element and this class can be appended to that.
<div class="page-wrapper container"> <!-- page content --> </div>
This off-screen menu should only be used at the top of a page. For that reason you should visit the full page example for a demo.