Skip to content

Instantly share code, notes, and snippets.

@codingdesigner
Created February 13, 2014 07:32
Show Gist options
  • Save codingdesigner/8971231 to your computer and use it in GitHub Desktop.
Save codingdesigner/8971231 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div id="skip-link">
<a href="#nav" class="menu-trigger">menu</a>
</div>
<header id="header" role="banner" class="site-header">
<a href="" >
<h1 class="site-name">Offside Nav Demo</h1>
</a>
</header>
<main id="main" role="main">
<article role="article">
<h2>Article Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
</p>
</article>
</main>
<nav role="navigation" id="nav">
<ul class="menu">
<li>
<a href="" title="">Nav 1</a>
</li>
<li>
<a href="" title="">Nav 2</a>
</li>
<li>
<a href="" title="">Nav 3</a>
</li>
<li>
<a href="" title="">Nav 4</a>
</li>
<li>
<a href="" title="">Nav 5</a>
</li>
<li>
<a href="" title="">Nav 6</a>
</li>
</ul>
</nav>
// ----
// Sass (v3.3.0.rc.3)
// Compass (v1.0.0.alpha.18)
// Breakpoint (v2.4.1)
// ----
@import "compass";
@import "breakpoint";
//////////////////////////////
// Variables
$bp-nav-offside: max-width 779px;
$bp-nav-wide: 780px;
$breakpoint-to-ems: true;
//////////////////////////////
.menu-trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 100;
@include breakpoint($bp-nav-wide) {
display: none;
}
}
// offside menu inactive
@include breakpoint($bp-nav-offside) {
body {
position: relative;
}
[role="navigation"], [role="banner"], [role="main"] {
@include transition-property(all);
@include transition-duration(.2s);
@include transition-timing-function(ease-in);
@include apply-origin(0 0, true);
@include transform3d( translateX(0) );
}
[role="navigation"] {
position: absolute;
width: 250px;
top: 0;
left: -250px;
}
}
// offside menu active
[data-nav-offside-active="true"] {
@include breakpoint($bp-nav-offside) {
[role="navigation"] {
@include transform3d( translateX(250px) );
}
[role="banner"] {
@include transform3d( translateX(250px) );
}
[role="main"] {
@include transform3d( translateX(250px) );
}
}
}
// wide menu layout
@include breakpoint($bp-nav-wide) {
body {
@include display-flex;
@include flex-direction(column);
}
[role="banner"] {
@include order(1);
}
[role="main"] {
@include order(3);
}
[role="navigation"] {
@include order(2);
}
}
.menu-trigger {
position: absolute;
top: 1em;
right: 1em;
z-index: 100;
}
@media (min-width: 48.75em) {
.menu-trigger {
display: none;
}
}
@media (max-width: 48.6875em) {
body {
position: relative;
}
[role="navigation"], [role="banner"], [role="main"] {
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
transition-property: all;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
}
[role="navigation"] {
position: absolute;
width: 250px;
top: 0;
left: -250px;
}
}
@media (max-width: 48.6875em) {
[data-nav-offside-active="true"] [role="navigation"] {
-moz-transform: translateX(250px);
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
[data-nav-offside-active="true"] [role="banner"] {
-moz-transform: translateX(250px);
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
[data-nav-offside-active="true"] [role="main"] {
-moz-transform: translateX(250px);
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
}
@media (min-width: 48.75em) {
body {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
}
[role="banner"] {
-webkit-order: 1;
order: 1;
}
[role="main"] {
-webkit-order: 3;
order: 3;
}
[role="navigation"] {
-webkit-order: 2;
order: 2;
}
}
<div id="skip-link">
<a href="#nav" class="menu-trigger">menu</a>
</div>
<header id="header" role="banner" class="site-header">
<a href="" >
<h1 class="site-name">Offside Nav Demo</h1>
</a>
</header>
<main id="main" role="main">
<article role="article">
<h2>Article Title</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
</p>
</article>
</main>
<nav role="navigation" id="nav">
<ul class="menu">
<li>
<a href="" title="">Nav 1</a>
</li>
<li>
<a href="" title="">Nav 2</a>
</li>
<li>
<a href="" title="">Nav 3</a>
</li>
<li>
<a href="" title="">Nav 4</a>
</li>
<li>
<a href="" title="">Nav 5</a>
</li>
<li>
<a href="" title="">Nav 6</a>
</li>
</ul>
</nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment