Better burger menu

This commit is contained in:
Halfdan 2022-11-09 12:16:43 +01:00
parent 74db92638f
commit 9a2d13b681
2 changed files with 65 additions and 10 deletions

View file

@ -51,6 +51,8 @@
--bg-color : #fff;
--alt-bg-color : #a8f3f4;
--bar-color : #f0dcac;
--burger_size : 56px;
}
body {
@ -172,6 +174,11 @@ aside nav footer ol li a {
font-size : 1.65rem;
}
aside header a img {
width : 100%;
height : 140px;
}
@media(max-width:1000px) {
:root {
--base-grid : 40px;
@ -216,5 +223,42 @@ aside nav footer ol li a {
padding : 1.5rem 0;
font-size : 3rem;
}
header .nav-toggle {
cursor : pointer;
display : block;
height : var(--burger_size);
float : right;
margin : 40px 20px;
}
header .nav-toggle span {
display : block;
height : calc( ( var(--burger_size) / 3 ) / 2 );
width : var(--burger_size);
background : var(--text-color);
margin-bottom : calc( ( var(--burger_size) / 3 ) / 2 );
}
header .nav-toggle span {
position : relative;
top : 0;
transition : all 0.4s;
}
header .nav-toggle.display span#nav-toggle-b {
opacity : 0;
}
header .nav-toggle.display span#nav-toggle-a {
transform : rotate(45deg);
top : calc( var(--burger_size) / 3 );
}
header .nav-toggle.display span#nav-toggle-c {
transform : rotate(-45deg);
top : calc( ( var(--burger_size) / 3 ) * -1 );
}
}

View file

@ -7,8 +7,12 @@
<aside>
<header>
<a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo"></a>
<button id="menu-toggle"></button>
<a href="index.html"><img src="{{ printf "/static/img/logo_%s.svg" .Site.Language.Lang | absURL }}" alt="data coop logo" width="240" height="140"></a>
<div class="nav-toggle" id="nav-toggle-header">
<span id="nav-toggle-a"></span>
<span id="nav-toggle-b"></span>
<span id="nav-toggle-c"></span>
</div>
</header>
{{ partial "nav.html" . }}
@ -21,14 +25,21 @@
</main>
<script>
document.getElementById("menu-toggle").addEventListener("click", function() {
let d = document.getElementsByTagName("nav")[0];
let is_showing = (d.style.display == 'block');
d.style.display = is_showing ? 'none' : 'block';
document.getElementById("menu-toggle").innerHTML = is_showing ? '☰' : 'X' ;
});
</script>
<script>
var menu = document.getElementById("nav-toggle-header")
function toggleMenu() {
if ( menu.classList.contains("display") ) {
menu.classList.remove("display")
document.getElementsByTagName('nav')[0].style.display='none'
} else {
menu.classList.add("display")
document.getElementsByTagName('nav')[0].style.display='block'
}
}
menu.addEventListener( "click", toggleMenu )
</script>
</body>