Rebuild the mobile menu to depend less on javascript.
This commit is contained in:
Fredrik Jonsson
parent
3c444048f3
commit
d3761ce353
7 changed files with 166 additions and 132 deletions
|
|
@ -11,32 +11,20 @@
|
||||||
$('html').removeClass('nojs').addClass('js');
|
$('html').removeClass('nojs').addClass('js');
|
||||||
|
|
||||||
// Activate the mobil menu for small screens.
|
// Activate the mobil menu for small screens.
|
||||||
if (window.matchMedia && $('.mobile-nav-wrapper').length) {
|
if (window.matchMedia && $('.mobile-nav').length) {
|
||||||
var mq = window.matchMedia('(max-width: 666px)');
|
var mq = window.matchMedia('(max-width: 999px)');
|
||||||
if (mq.matches) {
|
if (mq.matches) {
|
||||||
// Show mobile menu.
|
|
||||||
$('.mobile-nav-wrapper').removeClass('hidden');
|
|
||||||
|
|
||||||
// Populate the mobile nav sheet.
|
|
||||||
$('.header__region').filter(':not(:empty)').removeClass('header__region region hidden').addClass('js-region').appendTo('.mobile-nav-sheet');
|
|
||||||
$('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation hidden').addClass('js-main-menu').appendTo('.mobile-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
|
|
||||||
|
|
||||||
// Toggle the mobile nav sheet.
|
// Toggle the mobile nav sheet.
|
||||||
$('.mobile-nav-cover, .mobile-nav-toggle').click(function (e) {
|
$('.mobile-nav__cover, .mobile-nav__toggle').click(function (e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
$('body').scrollTop(0).toggleClass('js-nav-open');
|
$('body').scrollTop(0).toggleClass('js-nav-open');
|
||||||
});
|
});
|
||||||
|
|
||||||
// Close the nav sheet after click (needed for anchor links).
|
// Close the nav sheet after click (needed for anchor links).
|
||||||
$('.mobile-nav-sheet').find('a').click(function () {
|
$('.mobile-nav__sheet').find('a').click(function () {
|
||||||
$('body').removeClass('js-nav-open');
|
$('body').removeClass('js-nav-open');
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Display CSS grid layout warning to old browsers.
|
|
||||||
// if (!window.CSS || !window.CSS.supports || !window.CSS.supports('display', 'grid')) {
|
|
||||||
// $('.header').after('<div class="layout__grid-notice" role="complementary">Your browsers does not support modern grid layout so this page will not look or behave as it should. Resent versions of Chrome, Firefox and Safari all works so please update. Support is coming in Microsoft Edge as well, until then use another browser. <a href="https://www.whatbrowser.org/">What Browser?</a></div>');
|
|
||||||
// }
|
|
||||||
|
|
||||||
})(jQuery);
|
})(jQuery);
|
||||||
|
|
|
||||||
|
|
@ -25,12 +25,6 @@
|
||||||
padding: 0 $zen-gutters;
|
padding: 0 $zen-gutters;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__grid-notice {
|
|
||||||
margin: $zen-gutters/2;
|
|
||||||
padding: $zen-gutters/2;
|
|
||||||
border: 2px dashed $red;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@supports (display: grid) {
|
@supports (display: grid) {
|
||||||
|
|
|
||||||
131
assets/sass/mobile.scss
Normal file
131
assets/sass/mobile.scss
Normal file
|
|
@ -0,0 +1,131 @@
|
||||||
|
// @file
|
||||||
|
// The mobile navigation stylesheet for this theme.
|
||||||
|
|
||||||
|
@import 'init';
|
||||||
|
|
||||||
|
.main-menu,
|
||||||
|
.header__region {
|
||||||
|
display: none;
|
||||||
|
@include respond-to(s) {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobile-nav {
|
||||||
|
@include typeface(headings);
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 20;
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
@include respond-to(s) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-nav-open & {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cover {
|
||||||
|
position: absolute;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
background-color: $mobile-menu-cover;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
.js-nav-open & {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__toggle {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: $zen-gutters / 2;
|
||||||
|
right: $zen-gutters / 2;
|
||||||
|
padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px;
|
||||||
|
z-index: 22;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 1;
|
||||||
|
border: 1px solid $border;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: $text;
|
||||||
|
pointer-events: auto;
|
||||||
|
|
||||||
|
@include respond-to(s) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-nav-open & {
|
||||||
|
color: $text-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
margin-left: $zen-gutters / 4;
|
||||||
|
width: $zen-gutters;
|
||||||
|
height: $zen-gutters;
|
||||||
|
border-top: 12px double $text;
|
||||||
|
border-bottom: 4px solid $text;
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-nav-open &::after {
|
||||||
|
border-color: $text-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__sheet {
|
||||||
|
background-color: $mobile-menu;
|
||||||
|
width: 90vw;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 2rem;
|
||||||
|
transform: translateX(100vw);
|
||||||
|
z-index: 21;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: $text-bg;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
color: $text-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.js-nav-open & {
|
||||||
|
pointer-events: auto;
|
||||||
|
box-shadow: -10px 0 10px -10px $nearblack;
|
||||||
|
transform: translateX(10vw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__navbar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: .4rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&__cover,
|
||||||
|
&__toggle,
|
||||||
|
&__toggle::after,
|
||||||
|
&__sheet {
|
||||||
|
transition: all 130ms ease-in;
|
||||||
|
|
||||||
|
.js-nav-open & {
|
||||||
|
transition: all 330ms ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
.mobile-nav-wrapper {
|
|
||||||
@include typeface(headings);
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 20;
|
|
||||||
pointer-events: none;
|
|
||||||
|
|
||||||
.js-nav-open & {
|
|
||||||
position: fixed;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-nav-cover {
|
|
||||||
position: absolute;
|
|
||||||
width: 100vw;
|
|
||||||
height: 100vh;
|
|
||||||
background-color: $mobile-menu-cover;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
.js-nav-open & {
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-nav-toggle {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
top: $zen-gutters / 2;
|
|
||||||
right: $zen-gutters / 2;
|
|
||||||
padding: 6px ($zen-gutters + $zen-gutters / 4 + 4px) 4px 4px;
|
|
||||||
z-index: 22;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 1;
|
|
||||||
border: 1px solid $border;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: $text;
|
|
||||||
pointer-events: auto;
|
|
||||||
|
|
||||||
.js-nav-open & {
|
|
||||||
color: $text-bg;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
position: absolute;
|
|
||||||
content: '';
|
|
||||||
margin-left: $zen-gutters / 4;
|
|
||||||
width: $zen-gutters;
|
|
||||||
height: $zen-gutters;
|
|
||||||
border-top: 12px double $text;
|
|
||||||
border-bottom: 4px solid $text;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-nav-open &::after {
|
|
||||||
border-color: $text-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-nav-sheet {
|
|
||||||
background-color: $mobile-menu;
|
|
||||||
width: 90vw;
|
|
||||||
height: 100vh;
|
|
||||||
padding: 2rem;
|
|
||||||
transform: translateX(100vw);
|
|
||||||
z-index: 21;
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: $text-bg;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-nav-open & {
|
|
||||||
pointer-events: auto;
|
|
||||||
box-shadow: -10px 0 10px -10px $nearblack;
|
|
||||||
transform: translateX(10vw);
|
|
||||||
}
|
|
||||||
|
|
||||||
.js-navbar {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: .4rem 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.mobile-nav-cover,
|
|
||||||
.mobile-nav-toggle,
|
|
||||||
.mobile-nav-toggle::after,
|
|
||||||
.mobile-nav-sheet {
|
|
||||||
transition: all 130ms ease-in;
|
|
||||||
|
|
||||||
.js-nav-open & {
|
|
||||||
transition: all 330ms ease-out;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -62,7 +62,6 @@
|
||||||
|
|
||||||
@import 'navigation/more-link/more-link';
|
@import 'navigation/more-link/more-link';
|
||||||
@import 'navigation/navbar/navbar';
|
@import 'navigation/navbar/navbar';
|
||||||
@import 'navigation/mobile/mobile';
|
|
||||||
@import 'navigation/pager/pager';
|
@import 'navigation/pager/pager';
|
||||||
|
|
||||||
// zen
|
// zen
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,27 @@
|
||||||
<div class="mobile-nav-wrapper hidden" dir="ltr">
|
<div class="mobile-nav" dir="ltr">
|
||||||
<div class="mobile-nav-cover"></div>
|
<div class="mobile-nav__cover"></div>
|
||||||
<a href="#navigation" class="mobile-nav-toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
|
<a href="#navigation" class="mobile-nav__toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
|
||||||
<div class="mobile-nav-sheet"></div>
|
<div class="mobile-nav__sheet">
|
||||||
|
<div class="mobile-nav__region">
|
||||||
|
{{ if .Site.IsMultiLingual }}{{ partial "language-selector.html" . }}{{ end }}
|
||||||
|
{{ if $.Param "search" }}{{ partialCached "search.html" . }}{{ end }}
|
||||||
|
</div>
|
||||||
|
{{ $home := relLangURL "/" }}
|
||||||
|
{{ $currentSection := .Section }}
|
||||||
|
{{ $currentID := .UniqueID }}
|
||||||
|
<nav class="mobile-nav__main-menu" role="navigation">
|
||||||
|
<h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
|
||||||
|
<ul class="mobile-nav__navbar">
|
||||||
|
<li><a class="{{ if .IsHome }}active{{ end }}" href="{{ $home }}">{{ i18n "menu_home" }}</a></li>
|
||||||
|
{{ range where .Site.Pages "Section" "" -}}
|
||||||
|
{{ if ne .RelPermalink (string $home) -}}
|
||||||
|
<li><a class="{{ if eq $currentID .UniqueID }}active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
||||||
|
{{ end -}}
|
||||||
|
{{ end -}}
|
||||||
|
{{ range $.Site.Home.Sections -}}
|
||||||
|
<li><a class="{{ if eq $currentSection .Section }}active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a></li>
|
||||||
|
{{ end -}}
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,17 @@
|
||||||
{{ $main_options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
{{ $main_options := (dict "targetPath" "css/styles.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
||||||
|
{{ $mobile_options := (dict "targetPath" "css/mobile.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
||||||
{{ $print_options := (dict "targetPath" "css/print.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
{{ $print_options := (dict "targetPath" "css/print.css" "outputStyle" "compressed" "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
||||||
{{ $main_style := resources.Get "sass/styles.scss" | toCSS $main_options | fingerprint -}}
|
{{ $main_style := resources.Get "sass/styles.scss" | toCSS $main_options | fingerprint -}}
|
||||||
|
{{ $mobile_style := resources.Get "sass/mobile.scss" | toCSS $mobile_options | fingerprint -}}
|
||||||
{{ $print_style := resources.Get "sass/print.scss" | toCSS $print_options | fingerprint -}}
|
{{ $print_style := resources.Get "sass/print.scss" | toCSS $print_options | fingerprint -}}
|
||||||
{{ if eq .Hugo.Environment "dev" -}}
|
{{ if eq .Hugo.Environment "dev" -}}
|
||||||
{{ $main_options = (dict "targetPath" "css/styles.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
{{ $main_options = (dict "targetPath" "css/styles.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
||||||
|
{{ $mobile_options = (dict "targetPath" "css/mobile.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
||||||
{{ $print_options = (dict "targetPath" "css/print.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
{{ $print_options = (dict "targetPath" "css/print.css" "outputStyle" "nested" "enableSourceMap" true "includePaths" (slice "assets/lib/typey/stylesheets")) -}}
|
||||||
{{ $main_style = resources.Get "sass/styles.scss" | toCSS $main_options -}}
|
{{ $main_style = resources.Get "sass/styles.scss" | toCSS $main_options -}}
|
||||||
|
{{ $mobile_style := resources.Get "sass/mobile.scss" | toCSS $mobile_options -}}
|
||||||
{{ $print_style = resources.Get "sass/print.scss" | toCSS $print_options -}}
|
{{ $print_style = resources.Get "sass/print.scss" | toCSS $print_options -}}
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
|
{{ if $.Param "mobilemenu" }}<link rel="stylesheet" href="{{ $mobile_style.RelPermalink }}" media="screen">{{ end -}}
|
||||||
<link rel="stylesheet" href="{{ $main_style.RelPermalink }}">
|
<link rel="stylesheet" href="{{ $main_style.RelPermalink }}">
|
||||||
<link rel="stylesheet" href="{{ $print_style.RelPermalink }}" media="print">
|
<link rel="stylesheet" href="{{ $print_style.RelPermalink }}" media="print">
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue