<header id="header">
<div>
<div>
<a href="/" id="logo">
<img src="logo.svg">
</a>
<h1>Page Title</h1>
</div>
<div>
<a id="show-dropdown" href="#header-dropdown">MENU</a>
</div>
</div>
</div>
<div id="header-dropdown">
<div>
<nav id="main-mav">
<ul>
<li>
<a href="/home">Home</a>
</li>
</ul>
</nav>
</div>
<div>
<div id="main-nav-infopanel">
Pictures and shit
</div>
</div>
</div>
#header {
&:before, &:after {
display: table;
content: '';
clear: both;
}
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%:
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 1em;
> div {
&:first-child:not(:last-child) {
float: left;
width: 50%;
& + div {
float: right;
}
}
}
}
#show-dropdown {
display: block;
}
#header-dropdown {
postion: fixed;
top: 0;
left: 0;
right: 0;
transform: translateY(-100%);
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
padding: 1em;
&:focus, &:target, &.focus {
trransform: translateY(0);
}
}
$('#header-dropdown').click(function(e){
e.preventDefault();
$('#header-dropdown').addClass('focus');
})