ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add the mobile menu directly in baseof template instead of via js. Translate menu terms.

Browse source
This commit is contained in:
Fredrik Jonsson 2017-07-25 11:18:16 +02:00
commit 8dfb9c8763
2 changed files with 72 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

2
static/css/styles.css
View file

File diff suppressed because one or more lines are too long

18
static/js/script.js
View file

@ -10,21 +10,21 @@
// Add a js class to the html-tag when JavsScript is active.
$('html').addClass('js');
// Activate the SlickNav menu for small screens.
// Activate the mobil menu for small screens.
if (window.matchMedia) {
var mq = window.matchMedia('(max-width: 666px)');
if (mq.matches) {
// 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><div class="js-nav-sheet"></div></div>');
// Show mobile menu.
$('.mobile-nav-wrapper').removeClass('hidden');
// 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');
// Populate the mobile nav sheet.
$('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation layout__full hidden hidden').addClass('js-main-menu').appendTo('.mobile-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
$('.header__region').addClass('hidden').clone().removeClass('header__region region hidden').addClass('js-region').appendTo('.mobile-nav-sheet');
// Toggle the nav sheet.
$('.js-nav-cover, .js-nav-toggle').on('click toushstart', function (e) {
// Toggle the mobile nav sheet.
$('.mobile-nav-cover, .mobile-nav-toggle').on('click toushstart', function (e) {
e.preventDefault();
$('.js-nav-wrapper').toggleClass('js-nav-open');
$('.mobile-nav-wrapper').toggleClass('js-nav-open');
});
}