add blocker to make site opaque when in menu

This commit is contained in:
Thefeli73 2020-02-17 23:16:53 +01:00
parent 30d2217f06
commit 4052bef988
2 changed files with 23 additions and 3 deletions

View File

@ -87,12 +87,25 @@
top: 40px;
left: 40px;
}
> #blocker {
top: 80px;
width: 100vw;
height: 100vh;
position: absolute;
display: none;
}
&.show {
> ul {
display: block;
opacity: 1;
}
> #blocker {
display: block;
}
> span {
box-shadow: 0 0 0 142vw _palette(menu), 0 0 0 142vh _palette(menu);
}
@ -191,9 +204,15 @@
@include breakpoint('<=medium') {
height: 60px;
> #menu > span {
top: 30px;
left: 30px;
> #menu {
> span {
top: 30px;
left: 30px;
}
> #blocker {
top: 60px;
}
}
> #wrapper {

View File

@ -49,6 +49,7 @@
<nav id="nav">
<div id="menu">
<span></span>
<div id="blocker"></div>
<ul>
<li data-text="Home"><a href="/">Home</a></li>
<li data-text="Websites"><a href="#">Websites</a></li>