forked from data.coop/website
Better burger menu
This commit is contained in:
parent
74db92638f
commit
9a2d13b681
|
@ -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 );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
Loading…
Reference in a new issue