better mobile navbar complete

This commit is contained in:
zzossig 2020-02-20 23:08:34 +09:00
parent 3155e374df
commit 71e457e19e
10 changed files with 44 additions and 16 deletions

View File

@ -293,7 +293,7 @@
}
&--item {
padding: 0.5rem 2.25rem !important;
padding: 0.25rem 0.75rem;
height: auto;
margin: auto;
min-width: 40px;
@ -349,14 +349,6 @@
height: $grid_navbar_height !important;
position: relative;
@include themify($themes) {
color: themed('burger-menu-color');
@include on-event {
color: themed('link-hover');
background-color: themed('navbar-menu-hover-background-color');
}
}
@include flexbox();
@include align-items(center);
@include justify-content(center);
@ -364,7 +356,7 @@
color: themed('burger-menu-color');
@include on-event {
color: themed('navbar-title-hover-color');
background-color: themed('navbar-menu-hover-background-color');
background-color: themed('navbar-background-color');
}
}
@ -487,12 +479,12 @@
&--item {
height: $grid-navbar-height;
padding: 0rem 0.75rem;
& > a {
height: 100%;
font-family: $title-font;
font-size: 16.8px;
font-size: 1rem;
font-weight: bold;
color: inherit;
text-decoration: none !important;
@ -507,6 +499,10 @@
font-weight: bold;
color: themed('navbar-title-active-color');
}
@include on-event {
background-color: themed('navbar-menu-hover-background-color');
}
}
}
}

View File

@ -3,7 +3,7 @@
<head prefix="og: http://ogp.me/ns#">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{ block "title" . }}{{ .Title }} {{ .Site.Title }}{{ end }}</title>
{{ partial "head/scripts" . }}
@ -19,9 +19,14 @@
var localTheme = localStorage.getItem('theme');
if (localTheme) {
document.getElementById('root').className = 'theme__' + localTheme;
}
}
function resetHeight() {
document.body.style.height = window.innerHeight + "px";
}
window.addEventListener("resize", resetHeight);
resetHeight();
</script>
<div id="container">
{{ partial "body/main-left" . }}
<div class="wrapper" data-type="{{ .Type }}" data-kind="{{ .Kind }}">

View File

@ -80,10 +80,12 @@
}
}
var navCollapseBtn = document.querySelector('.navbar__burger');
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
if (navCollapse) {
navCollapse.setAttribute('data-open', false);
navCollapse.style.maxHeight = 0;
navCollapseBtn.classList.remove('is-active');
}
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
document.getElementsByClassName('mobile-search')[0].classList.add('hide');

View File

@ -85,10 +85,12 @@
}
}
var navCollapseBtn = document.querySelector('.navbar__burger');
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
if (navCollapse) {
navCollapse.setAttribute('data-open', false);
navCollapse.style.maxHeight = 0;
navCollapseBtn.classList.remove('is-active');
}
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
document.getElementsByClassName('mobile-search')[0].classList.add('hide');

View File

@ -80,10 +80,12 @@
}
}
var navCollapseBtn = document.querySelector('.navbar__burger');
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
if (navCollapse) {
navCollapse.setAttribute('data-open', false);
navCollapse.style.maxHeight = 0;
navCollapseBtn.classList.remove('is-active');
}
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
document.getElementsByClassName('mobile-search')[0].classList.add('hide');

View File

@ -77,10 +77,12 @@
}
}
var navCollapseBtn = document.querySelector('.navbar__burger');
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
if (navCollapse) {
navCollapse.setAttribute('data-open', false);
navCollapse.style.maxHeight = 0;
navCollapseBtn.classList.remove('is-active');
}
if (document.getElementsByClassName('navbar__menu')[0]) {
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');

View File

@ -78,6 +78,7 @@
}
// ===============================================================
document.addEventListener('DOMContentLoaded', function () {
// ===================== navbar collapse ======================
var navCollapseBtn = document.querySelector('.navbar__burger');
@ -90,9 +91,11 @@
if (dataOpen === 'true') {
navCollapse.setAttribute('data-open', 'false');
navCollapse.style.maxHeight = 0;
navCollapseBtn.classList.remove('is-active');
} else {
navCollapse.setAttribute('data-open', 'true');
navCollapse.style.maxHeight = navCollapse.scrollHeight + "px";
navCollapseBtn.classList.add('is-active');
}
}
}) : null;

View File

@ -31,6 +31,14 @@
elem.classList.add('half');
elem.classList.remove('full');
});
var navCollapseBtn = document.querySelector('.navbar__burger');
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
if (navCollapse) {
navCollapse.setAttribute('data-open', false);
navCollapse.style.maxHeight = 0;
navCollapseBtn.classList.remove('is-active');
}
},
});
// ===========================================================

View File

@ -59,6 +59,14 @@
sectionElem.classList.remove(gridFull);
sectionElem.classList.add(gridFull);
}
var navCollapseBtn = document.querySelector('.navbar__burger');
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
if (navCollapse) {
navCollapse.setAttribute('data-open', false);
navCollapse.style.maxHeight = 0;
navCollapseBtn.classList.remove('is-active');
}
},
setup: function () { },
deferSetup: true,