schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

add blocker to make site opaque when in menu

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/css/layout/_nav.scss
View File

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

1
src/index.html
View File

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