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');
|
||||
|
||||
// Activate the mobil menu for small screens.
|
||||
if (window.matchMedia && $('.mobile-nav-wrapper').length) {
|
||||
var mq = window.matchMedia('(max-width: 666px)');
|
||||
if (window.matchMedia && $('.mobile-nav').length) {
|
||||
var mq = window.matchMedia('(max-width: 999px)');
|
||||
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.
|
||||
$('.mobile-nav-cover, .mobile-nav-toggle').click(function (e) {
|
||||
$('.mobile-nav__cover, .mobile-nav__toggle').click(function (e) {
|
||||
e.preventDefault();
|
||||
$('body').scrollTop(0).toggleClass('js-nav-open');
|
||||
});
|
||||
|
||||
// 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');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
|
|
|
|||
|
|
@ -25,12 +25,6 @@
|
|||
padding: 0 $zen-gutters;
|
||||
}
|
||||
}
|
||||
|
||||
&__grid-notice {
|
||||
margin: $zen-gutters/2;
|
||||
padding: $zen-gutters/2;
|
||||
border: 2px dashed $red;
|
||||
}
|
||||
}
|
||||
|
||||
@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/navbar/navbar';
|
||||
@import 'navigation/mobile/mobile';
|
||||
@import 'navigation/pager/pager';
|
||||
|
||||
// zen
|
||||
|
|
|
|||
|
|
@ -1,5 +1,27 @@
|
|||
<div class="mobile-nav-wrapper hidden" dir="ltr">
|
||||
<div class="mobile-nav-cover"></div>
|
||||
<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" dir="ltr">
|
||||
<div class="mobile-nav__cover"></div>
|
||||
<a href="#navigation" class="mobile-nav__toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,17 @@
|
|||
{{ $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")) -}}
|
||||
{{ $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 -}}
|
||||
{{ if eq .Hugo.Environment "dev" -}}
|
||||
{{ $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")) -}}
|
||||
{{ $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 -}}
|
||||
{{ 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="{{ $print_style.RelPermalink }}" media="print">
|
||||
|
|
|
|||
Loading…
Reference in a new issue