Skip to content

Instantly share code, notes, and snippets.

@pieterbeulque

pieterbeulque/_mobile-navigation.scss

Last active August 29, 2015 14:07
Show Gist options
  • Save pieterbeulque/0acabdf807445d678009 to your computer and use it in GitHub Desktop.
Save pieterbeulque/0acabdf807445d678009 to your computer and use it in GitHub Desktop.
Download ZIP
Site container
Raw
_mobile-navigation.scss
// @todo
$mobile-navigation-width: 280px;
$mobile-navigation-levels: 1;
.mod-mobile-navigation {
position: fixed;
top: 0;
right: 0;
bottom: 0;
background-color: $cerulean;
width: $mobile-navigation-width;
z-index: 10;
@include breakpoint-from($min-width-medium) {
display: none;
}
}
.mod-site-container,
.mod-mobile-navigation {
@include breakpoint-up-to($min-width-medium) {
@include transition(transform 440ms ease-in-out);
}
}
// .show-mobile-navigation gets toggled on the document body
.show-mobile-navigation {
overflow: hidden;
.mod-site-container {
@include transform(translate3d(-1 * $mobile-navigation-width, 0, 0));
}
// .mobile-navigation__close {
// @include transform(translate3d(0, 0, 0));
// opacity: 1;
// }
}
// .show-mobile-navigation--subnavigation gets toggled on the document body
// to show the second level
.show-mobile-navigation--subnavigation {
.mod-site-container {
@include transform(translate3d(-1 * $mobile-navigation-width, 0, 0));
}
.mod-mobile-navigation {
@include transform(translate3d(-1 * $mobile-navigation-width, 0, 0));
}
// .mobile-navigation__close {
// @include transform(translate3d($mobile-navigation-width, 0, 0));
// }
//
// .mobile-navigation__back {
// @include transform(translate3d($mobile-navigation-width, 0, 0));
// opacity: 1;
// }
}
Raw
_site-container.scss
// @todo – Cleanup
.mod-site-container {
background-color: $mercury;
overflow: hidden;
position: relative;
z-index: 20;
height: 100%;
@include breakpoint-from ($min-width-medium) {
overflow: visible;
}
}
.site-container__fixed {
background-color: $white;
height: 50px;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 20;
}
.site-container__scrollable {
box-sizing: border-box;
height: 100%;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
position: relative;
padding-top: 50px;
z-index: 10;
}
Raw
application.html.erb
<body>
<div class="mod-site-container">
<div class="site-container__header">
<!-- Header (fixed on mobile) -->
</div>
<div class="site-container__content">
<!-- All site content (including footer or anything) goes here -->
</div>
</div>
<div class="mod-mobile-navigation">
<!-- Placeholder -->
</div>
</body>
Raw
mobile-navigation.module.js
'use strict';
exports.init = function () {
var $body = $(document.body),
$toggle = $('.js-mobile-navigation-toggle'),
$navigation = $('.js-mobile-navigation');
$toggle.on('click', function (e) {
e.preventDefault();
$body.toggleClass('show-mobile-navigation');
});
$navigation.on('click', '[data-subnav-toggle]', function (e) {
e.preventDefault();
e.stopPropagation();
$navigation.find('.mobile-navigation__level--second > div').hide();
$navigation.find('.' + $(this).attr('data-subnav-toggle')).show();
$body.addClass('show-mobile-navigation--subnavigation');
return false;
}).on('click', '.js-close', function (e) {
e.preventDefault();
$body.removeClass('show-mobile-navigation--subnavigation show-mobile-navigation');
}).on('click', '.js-back', function (e) {
e.preventDefault();
$body.removeClass('show-mobile-navigation--subnavigation');
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment