forked from mirror/Mainroad
Update main menu: avoid third-party JS library (#99)
* Reduce JS asset size (avoid third-party JS lib) * Use absolute position on mobile to prevent reflow * Load inline JS feature detection script from head * Fix #96 issue
This commit is contained in:
Vimux
GitHub
parent
7273801931
commit
08ff4c67f9
6 changed files with 123 additions and 78 deletions
|
|
@ -1,10 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode | default "en-us" }}">
|
||||
<html class="no-js" lang="{{ .Site.LanguageCode | default "en-us" }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>{{ block "title" . }}{{ .Title }}{{ end }}</title>
|
||||
<script>(function(d,e){d[e]=d[e].replace("no-js","js");})(document.documentElement,"className");</script>
|
||||
<meta name="description" content="{{ if .IsHome }}{{ .Site.Params.description }}{{else}}{{ .Params.Description }}{{end}}">
|
||||
{{ .Hugo.Generator }}
|
||||
{{ if .Site.Params.opengraph }}{{ template "_internal/opengraph.html" . }}{{ end }}
|
||||
|
|
@ -16,7 +17,6 @@
|
|||
{{ end -}}
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700">
|
||||
<link rel="stylesheet" href="{{ "css/style.css" | relURL }}">
|
||||
<script type="text/javascript" src="{{ "js/scripts.js" | relURL }}"></script>
|
||||
<link rel="shortcut icon" href="{{ "favicon.ico" | relURL }}">
|
||||
{{- if not .Site.IsServer }}
|
||||
{{ template "_internal/google_analytics_async.html" . }}
|
||||
|
|
@ -39,12 +39,7 @@
|
|||
</div>
|
||||
{{ partial "footer" . }}
|
||||
</div>
|
||||
<script>
|
||||
var navigation = responsiveNav(".menu", {
|
||||
navClass: "menu--collapse",
|
||||
label: "{{ T "menu_label" }}",
|
||||
});
|
||||
</script>
|
||||
<script async defer src="{{ "js/menu.js" | relURL }}"></script>
|
||||
{{- partial "mathjax.html" . -}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -6,6 +6,6 @@
|
|||
{{ with .Site.Params.subtitle }}<div class="logo__tagline">{{ . }}</div>{{ end }}
|
||||
</a>
|
||||
</div>
|
||||
{{ partial "menu.html" . }}
|
||||
</div>
|
||||
{{ partial "menu.html" . }}
|
||||
</header>
|
||||
|
|
@ -1,10 +1,15 @@
|
|||
{{- if .Site.Menus.main }}
|
||||
<nav class="menu">
|
||||
<button class="menu__btn" aria-haspopup="true" aria-expanded="false" tabindex="0">
|
||||
<span class="menu__btn-title" tabindex="-1">{{ T "menu_label" }}</span>
|
||||
</button>
|
||||
<ul class="menu__list">
|
||||
{{- $currentNode := . }}
|
||||
{{- range sort .Site.Menus.main }}
|
||||
{{- if .Name}}
|
||||
<li class="menu__item{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{end}}"><a class="menu__link" href="{{ .URL }}">{{ .Name | upper }}</a></li>
|
||||
<li class="menu__item{{if or ($currentNode.IsMenuCurrent "main" .) ($currentNode.HasMenuCurrent "main" .) }} menu__item--active{{end}}">
|
||||
<a class="menu__link" href="{{ .URL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -429,106 +429,133 @@ select {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
/* Navigation — Responsive-nav.js */
|
||||
.menu {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
text-transform: uppercase;
|
||||
background: #2a2a2a;
|
||||
/* Main menu */
|
||||
.no-js .menu__btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__toggle {
|
||||
.menu__btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
font: inherit;
|
||||
color: #fff;
|
||||
background: #2a2a2a;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.menu__btn-title {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
padding: .625rem .9375rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
background: #2a2a2a;
|
||||
-webkit-tap-highlight-color: #000;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
:focus > .menu__btn-title {
|
||||
box-shadow: inset 0 0 1px 3px #e64946;
|
||||
}
|
||||
|
||||
button:not(:-moz-focusring):focus > .menu__btn-title {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.menu__btn:focus,
|
||||
.menu__btn-title:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.js .menu__btn--active {
|
||||
color: #e64946;
|
||||
}
|
||||
|
||||
.menu__list {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu__link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.js .menu--collapse {
|
||||
position: absolute;
|
||||
display: block;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
.menu--collapse.opened {
|
||||
max-height: 9999px;
|
||||
}
|
||||
|
||||
.opened.menu__list {
|
||||
border-top: 1px solid #e64946;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.menu__item:hover {
|
||||
background: #e64946;
|
||||
}
|
||||
|
||||
.menu__item:first-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.menu__item--active {
|
||||
background: #e64946;
|
||||
}
|
||||
|
||||
.menu__item:first-child {
|
||||
border: none;
|
||||
.menu__link {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
padding: .625rem .9375rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.menu__link:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.js .menu__list {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
visibility: hidden;
|
||||
-webkit-transform: scaleY(0);
|
||||
transform: scaleY(0);
|
||||
-webkit-transform-origin: top left;
|
||||
transform-origin: top left;
|
||||
}
|
||||
|
||||
.js .menu__list--active {
|
||||
visibility: visible;
|
||||
border-top: 1px solid rgba(255, 255, 255, .1);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
||||
-webkit-transform: scaleY(1);
|
||||
transform: scaleY(1);
|
||||
}
|
||||
|
||||
.menu__list--transition {
|
||||
transition: visibility .15s ease, transform .15s ease, -webkit-transform .15s ease;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 767px) {
|
||||
.js .menu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.js .menu.closed {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
.menu__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
border-bottom: 5px solid #e64946;
|
||||
}
|
||||
|
||||
.menu__list {
|
||||
min-height: 42px;
|
||||
.menu__btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu__list,
|
||||
.js .menu__list {
|
||||
position: relative;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
visibility: visible;
|
||||
border: 0;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.menu__item {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.menu__link {
|
||||
border-left: 1px solid rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
|
|
@ -1110,7 +1137,7 @@ textarea {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/*** Media Queries ***/
|
||||
/* Media Queries */
|
||||
@media screen and (max-width: 1475px) {
|
||||
.container--outer {
|
||||
width: 95%;
|
||||
|
|
|
|||
21
static/js/menu.js
Normal file
21
static/js/menu.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
'use strict';
|
||||
|
||||
var menuBtn = document.querySelector('.menu__btn');
|
||||
var menu = document.querySelector('.menu__list');
|
||||
|
||||
function toggleMenu() {
|
||||
menu.classList.toggle('menu__list--active');
|
||||
menu.classList.toggle('menu__list--transition');
|
||||
this.classList.toggle('menu__btn--active');
|
||||
this.setAttribute(
|
||||
'aria-expanded',
|
||||
this.getAttribute('aria-expanded') === 'true' ? 'false' : 'true'
|
||||
);
|
||||
}
|
||||
|
||||
function removeMenuTransition() {
|
||||
this.classList.remove('menu__list--transition');
|
||||
}
|
||||
|
||||
menuBtn.addEventListener('click', toggleMenu, false);
|
||||
menu.addEventListener('transitionend', removeMenuTransition, false);
|
||||
File diff suppressed because one or more lines are too long
Loading…
Add table
Reference in a new issue