Add some JavaScript to open an close the mobile menu
Fixes #75 but still works in Firefox mobile without JS (and it will in Chrome/Safari too once :focus-within will be implemented there)
This commit is contained in:
parent
0f5f9101b6
commit
6c80002e43
@ -803,7 +803,7 @@ figcaption {
|
||||
}
|
||||
}
|
||||
|
||||
header:focus-within #content {
|
||||
header:focus-within #content, #content.show {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -817,7 +817,7 @@ figcaption {
|
||||
|
||||
animation: 0.2s menuOpening;
|
||||
}
|
||||
header:focus-within #content::before {
|
||||
header:focus-within #content::before, #content.show::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
transform: skewX(-10deg);
|
||||
@ -830,11 +830,11 @@ figcaption {
|
||||
|
||||
background: #7765E3;
|
||||
}
|
||||
header:focus-within #content > nav {
|
||||
header:focus-within #content > nav, #content.show > nav {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
header:focus-within #content > nav a {
|
||||
header:focus-within #content > nav a, #content.show > nav a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
@ -844,19 +844,22 @@ figcaption {
|
||||
font-size: 1.4em;
|
||||
font-weight: 300;
|
||||
}
|
||||
header:focus-within #content > nav a > *:first-child { width: 3rem; }
|
||||
header:focus-within #content > nav a > img:first-child { height: 3rem; }
|
||||
header:focus-within #content > nav a > *:last-child { margin-left: 1rem; }
|
||||
header:focus-within #content > nav a.title {
|
||||
header:focus-within #content > nav a > *:first-child,
|
||||
#content.show > nav a > *:first-child { width: 3rem; }
|
||||
header:focus-within #content > nav a > img:first-child,
|
||||
#content.show > nav a > img:first-child { height: 3rem; }
|
||||
header:focus-within #content > nav a > *:last-child,
|
||||
#content.show > nav a > *:last-child { margin-left: 1rem; }
|
||||
header:focus-within #content > nav a.title, #content.show > nav a.title {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
header:focus-within #content > nav hr {
|
||||
header:focus-within #content > nav hr, #content.show > nav hr {
|
||||
display: block;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
border: solid #F4F4F4 0.1rem;
|
||||
}
|
||||
header:focus-within #content > nav a .mobile-label {
|
||||
header:focus-within #content > nav a .mobile-label, #content.show > nav a .mobile-label {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
|
13
static/js/menu.js
Normal file
13
static/js/menu.js
Normal file
@ -0,0 +1,13 @@
|
||||
// It should normally be working fine even without this code
|
||||
// But :focus-within is not yet supported by Webkit/Blink
|
||||
|
||||
const button = document.getElementById('menu')
|
||||
const menu = document.getElementById('content')
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
menu.classList.add('show')
|
||||
})
|
||||
|
||||
menu.addEventListener('click', () => {
|
||||
menu.classList.remove('show')
|
||||
})
|
@ -65,5 +65,6 @@
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</footer>
|
||||
<script src="/static/js/menu.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
Loading…
Reference in New Issue
Block a user