New mobile menu.

This commit is contained in:
Fredrik Jonsson 2017-07-16 23:06:51 +02:00
commit 110d34531e

View file

@ -11,10 +11,22 @@
$('html').addClass('js');
// Activate the SlickNav menu for small screens.
if (window.matchMedia && $.isFunction($.fn.slicknav)) {
if (window.matchMedia) {
var mq = window.matchMedia('(max-width: 666px)');
if (mq.matches) {
$('.main-menu').addClass('hidden').find('.navbar').filter(':first').slicknav();
// Create the nav toggle button and the nav sheet.
$('.page').after('<div class="js-nav-wrapper"><div class="js-nav-cover"></div><a href="#navigation" class="js-nav-toggle" aria-haspopup="true" role="button">Menu</a><nav class="js-nav-sheet"></nav></div>');
// Populate the nav sheet.
$('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation layout__full hidden hidden').addClass('js-main-menu').appendTo('.js-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
$('.header__region').addClass('hidden').clone().removeClass('header__region region hidden').addClass('js-region').appendTo('.js-nav-sheet');
// Toggle the nav sheet.
$('.js-nav-cover, .js-nav-toggle').on('click toushstart', function (e) {
e.preventDefault();
$('.js-nav-wrapper').toggleClass('js-nav-open');
});
}
}