add blocker to make site opaque when in menu
This commit is contained in:
parent
30d2217f06
commit
4052bef988
@ -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 {
|
||||
|
@ -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>
|
||||
|
Reference in New Issue
Block a user