<header class=“site-header px-responsive”>
<div class="mt2 wrap"> <nav class=""> {% include navigation.html %} </nav> </div>
</header>
<div class=“menu-btn”>
<span class="menu-line"></span> <span class="menu-line"></span> <span class="menu-text">Menu</span>
</div>
<div class=“home-btn” onclick=“window.location.href = '/'”>
<span class="static-menu-line"></span> <span class="home-text">Home</span>
</div>
<style> .menu-btn.show, [data-id=home] .menu-btn, .home-btn.show, .home-btn {
pointer-events: auto; /* not using this block at the moment */ opacity: 1;
} .header-title span:before, .menu-btn, .home-btn, .menu-text, .home-text, [data-id=home] .menu-btn {
position: absolute;
} .menu-btn, .home-btn {
cursor: pointer; height: 100px; width: 106px; z-index: 10000; pointer-events: auto; top: 0; opacity: 1;
}
.home-btn {
right: 0;
}
.home-btn > a {
position: relative; z-index: 10000;
}
.diagonal-line {
}
.menu-line:nth-of-type(1), .menu-line:nth-of-type(2), .static-menu-line:nth-of-type(1), .static-menu-line:nth-of-type(2) {
width: 2px; height: 85px; top: 15%; left: 50%; -webkit-transform: rotate(135deg); transform: rotate(135deg); position: absolute; background: #000;
}
.static-menu-line:nth-of-type(1) {
-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
- data-id=home
-
.menu-text {
visibility: visible;
}
.menu-text, .home-text {
top: 73%; font-size: .75em; font-weight: Normal; color: #000; pointer-events: none; visibility: visible; /* this was "hidden" */
}
.home-text { right: 22px; } .menu-text { left: 22px; }
.menu-text {
-webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease; -ms-transition: all 0.75s ease; transition: all 0.75s ease;
}
.menu-btn .menu-line:nth-of-type(2) {
transform: matrix(-0.7071, 0.70711, -0.70711, -0.7071, 0, 0); -webkit-transition: all 0.75s ease; -moz-transition: all 0.75s ease; -o-transition: all 0.75s ease; -ms-transition: all 0.75s ease; transition: all 0.75s ease;
}
</style>
<script> $( “.menu-btn” ).click(function() {
//alert($( this ).css( "transform" )); if ( $( ".menu-line:nth-of-type(2)" ).css( "transform" ) == 'matrix(0.71934, 0.694658, -0.694658, 0.71934, 0, 0)' ){ $(".menu-line:nth-of-type(2)").css("transform","rotate(135deg)"); $(".menu-text").css("opacity", "1") $( "#main-menu" ).css("transform", "translate(0%, -116%) matrix(1, 0, 0, 1, 0, 0)") } else { $(".menu-line:nth-of-type(2)").css("transform","rotate(44deg)") $(".menu-text").css("opacity", "0") $( "#main-menu" ).css("transform", "matrix(1, 0, 0, 1, 0, 0)") }
}); </script>