Stub mobile menu
This commit is contained in:
John O'Nolan
parent
79c9548fef
commit
2a222b6ca4
|
|
@ -89,7 +89,7 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
|
||||
.gh-head-logo {
|
||||
display: block;
|
||||
padding: 10px;
|
||||
padding: 10px 0;
|
||||
font-weight: 600;
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.2em;
|
||||
|
|
@ -126,7 +126,7 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
|
||||
.burger {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -144,6 +144,21 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.burger-box::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
transition: transform 300ms cubic-bezier(.2,.6,.3,1), width 300ms cubic-bezier(.2,.6,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
.burger-inner::before,
|
||||
.burger-inner::after {
|
||||
position: absolute;
|
||||
|
|
@ -156,17 +171,125 @@ production stylesheet in assets/built/screen.css using: gulp dev
|
|||
width: 100%;
|
||||
height: 1px;
|
||||
background: #fff;
|
||||
transition: transform 250ms cubic-bezier(.2,.6,.3,1), width 250ms cubic-bezier(.2,.6,.3,1);
|
||||
transition: transform 250ms cubic-bezier(.2,.7,.3,1), width 250ms cubic-bezier(.2,.7,.3,1);
|
||||
will-change: transform, width;
|
||||
}
|
||||
|
||||
.burger-inner::before {
|
||||
transform: translatey(-5px);
|
||||
transform: translatey(-6px);
|
||||
}
|
||||
.burger-inner::after {
|
||||
transform: translatey(5px);
|
||||
transform: translatey(6px);
|
||||
}
|
||||
|
||||
body:not(.gh-head-open) .burger:hover .burger-inner::before {
|
||||
transform: translatey(-8px);
|
||||
}
|
||||
body:not(.gh-head-open) .burger:hover .burger-inner::after {
|
||||
transform: translatey(8px);
|
||||
}
|
||||
|
||||
.gh-head-open .burger-box::before {
|
||||
width: 0;
|
||||
transform: translatex(19px);
|
||||
transition: transform 200ms cubic-bezier(.2,.7,.3,1), width 200ms cubic-bezier(.2,.7,.3,1);
|
||||
}
|
||||
|
||||
.gh-head-open .burger-inner::before {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(135deg);
|
||||
}
|
||||
|
||||
.gh-head-open .burger-inner::after {
|
||||
width: 26px;
|
||||
transform: translatex(6px) rotate(-135deg);
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.burger {
|
||||
display: inline-block;
|
||||
}
|
||||
.gh-head {
|
||||
height: max-content;
|
||||
transition: all 0.4s ease-out;
|
||||
}
|
||||
.gh-head .gh-container {
|
||||
height: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
}
|
||||
.gh-head-actions,
|
||||
.gh-head-menu {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
.gh-head-brand {
|
||||
grid-column-start: auto;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
user-select: none;
|
||||
}
|
||||
.gh-head-open {
|
||||
background: rgba(255,255,255,1);
|
||||
transition: background 0.5s ease-out;
|
||||
transition-delay: 0.25;
|
||||
overflow: hidden;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.gh-head-open .gh-head {
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
transition: height 0.2s ease-in;
|
||||
}
|
||||
|
||||
.gh-head-open .gh-head-actions,
|
||||
.gh-head-open .gh-head-menu {
|
||||
position: relative;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.gh-head-menu {
|
||||
align-self: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0 0 10vh;
|
||||
font-size: 3.6rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.gh-head-menu .nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.gh-head-actions {
|
||||
padding: 20px 0;
|
||||
justify-content: center;
|
||||
text-align: left;
|
||||
}
|
||||
.gh-head-actions a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Footer
|
||||
/* ---------------------------------------------------------- */
|
||||
|
|
|
|||
11
default.hbs
11
default.hbs
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
||||
|
||||
{{#if pagination.pages}}
|
||||
<script>
|
||||
|
|
@ -71,6 +71,15 @@
|
|||
<script src="{{asset "built/infinitescroll.js"}}"></script>
|
||||
{{/if}}
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
// Mobile Menu Trigger
|
||||
$('.burger').click(function () {
|
||||
$('body').toggleClass('gh-head-open');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
{{{block "scripts"}}}
|
||||
{{!-- The #block helper will pull in data from the #contentFor other template files --}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue