Update mobile menu
This commit is contained in:
Henk Verlinde
parent
7aee74b851
commit
a466f90a74
|
|
@ -194,3 +194,12 @@ body.dark .card {
|
|||
body.dark .card.bg-light {
|
||||
background: $body-overlay-dark !important;
|
||||
}
|
||||
|
||||
body.dark .navbar .menu-icon .navicon {
|
||||
background: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .navbar .menu-icon .navicon:before,
|
||||
body.dark .navbar .menu-icon .navicon:after {
|
||||
background: $navbar-dark-color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,3 +108,76 @@
|
|||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
}
|
||||
|
||||
/*
|
||||
* Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99
|
||||
*/
|
||||
|
||||
|
||||
/* Style the menu icon for the dropdown */
|
||||
|
||||
.navbar .menu-icon {
|
||||
cursor: pointer;
|
||||
/* display: inline-block; */
|
||||
/* float: right; */
|
||||
padding: 1.125rem 0.625rem;
|
||||
margin: 0 0 0 -0.625rem;
|
||||
/* position: relative; */
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.navbar .menu-icon .navicon {
|
||||
background: $navbar-light-color;
|
||||
display: block;
|
||||
height: 2px;
|
||||
position: relative;
|
||||
transition: background .2s ease-out;
|
||||
width: 18px;
|
||||
}
|
||||
|
||||
.navbar .menu-icon .navicon:before,
|
||||
.navbar .menu-icon .navicon:after {
|
||||
background: $navbar-light-color;
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition: all .2s ease-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navbar .menu-icon .navicon:before {
|
||||
top: 5px;
|
||||
}
|
||||
|
||||
.navbar .menu-icon .navicon:after {
|
||||
top: -5px;
|
||||
}
|
||||
|
||||
/* Add the icon and menu animations when the checkbox is clicked */
|
||||
|
||||
.navbar .menu-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar .menu-btn:checked ~ .navbar-collapse {
|
||||
display: block;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.navbar .menu-btn:checked ~ .menu-icon .navicon {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.navbar .menu-btn:checked ~ .menu-icon .navicon:before {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.navbar .menu-btn:checked ~ .menu-icon .navicon:after {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
|
||||
.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
|
||||
top: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
|
||||
X-Content-Type-Options: nosniff
|
||||
X-XSS-Protection: 1; mode=block
|
||||
Content-Security-Policy: default-src 'self'; img-src 'self' data:; script-src 'self' 'unsafe-eval'; style-src 'self'
|
||||
Content-Security-Policy: default-src 'self'; img-src 'self' data:; script-src 'self'; style-src 'self'
|
||||
X-Frame-Options: SAMEORIGIN
|
||||
Referrer-Policy: strict-origin
|
||||
Feature-Policy: geolocation 'self'
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<!-- <div class="header-bar fixed-top"></div> -->
|
||||
<header x-data="{ open: false }" class="navbar fixed-top navbar-expand-md navbar-light">
|
||||
<header class="navbar fixed-top navbar-expand-md navbar-light">
|
||||
<div class="container">
|
||||
|
||||
<input class="menu-btn order-3" type="checkbox" id="menu-btn">
|
||||
<label class="menu-icon d-md-none" for="menu-btn"><span class="navicon"></span></label>
|
||||
|
||||
<a class="navbar-brand order-0 mr-auto" href="{{ .Site.BaseURL }}">{{ .Site.Params.Title }}</a>
|
||||
<button id="mode" class="btn btn-link order-1 order-md-4" type="button" aria-label="Toggle mode">
|
||||
<span class="toggle-dark"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-moon"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
|
||||
|
|
@ -13,11 +17,16 @@
|
|||
</li>
|
||||
{{ end -}}
|
||||
</ul>
|
||||
<button @click="open = true" id="navigation" class="btn btn-link order-3 d-md-none" type="button" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg x-bind:class="{ 'd-none': open }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
<svg class="d-none" x-bind:class="{ 'd-block': open }" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
<button id="navigation" class="btn btn-link order-3 d-md-none" type="button" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
|
||||
</button>
|
||||
<div x-show="open" @click.away="open = false" x-bind:class="{ 'd-block': open }" class="navbar-collapse order-4 order-md-1">
|
||||
-->
|
||||
<div class="collapse navbar-collapse order-4 order-md-1">
|
||||
<ul class="navbar-nav main-nav mr-auto order-5 order-md-2">
|
||||
{{- $current := . -}}
|
||||
{{ range .Site.Menus.main -}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue