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

nav menu

Browse Source
This commit is contained in:
Thefeli73 2020-01-16 00:29:31 +01:00
parent 09a90e6f24
commit aa64295184
2 changed files with 82 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,47 @@
background: #f2f2f2; background: #f2f2f2;
&.scrolled { &.scrolled {
background: #ffffff; background: _palette(white);
}
> #menu {
> ul {
@include vendor('transition', (
'opacity #{_duration(transition2)} ease',
));
//display: none;
opacity: 0;
position: fixed;
color: _palette(white);
top: 50%;
left: 50%;
}
> span {
@include vendor('transition', (
'box-shadow #{_duration(transition2)} ease',
));
content: "";
display: block;
position: absolute;
height: 1px;
width: 1px;
border-radius: 50%;
box-shadow: 0 0 0 0 _palette(menu), 0 0 0 0 _palette(menu);
top: 40px;
left: 40px;
}
&.show {
> ul {
display: block;
opacity: 1;
}
> span {
box-shadow: 0 0 0 142vw _palette(menu), 0 0 0 142vh _palette(menu);
}
}
} }
> #wrapper { > #wrapper {
@ -23,40 +63,57 @@
@include vendor('transition', ( @include vendor('transition', (
'height #{_duration(transition)} ease', 'height #{_duration(transition)} ease',
'left #{_duration(transition)} ease', 'left #{_duration(transition)} ease',
'filter #{_duration(transition)} ease',
)); ));
@include vendor('filter', 'grayscale(1)');
position: absolute; position: absolute;
cursor: pointer; cursor: pointer;
height: 80px; height: 80px;
padding: 10px 23.1px; padding: 10px 23.1px;
left: calc(50% - 40px); left: calc(50% - 40px);
&:hover {
@include vendor('filter', 'grayscale(0)');
}
} }
> #menuToggle { > #menuToggle {
@include vendor('transition', (
'filter #{_duration(transition)} ease',
));
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
padding: 23.5px 18.5px; padding: 23.5px 18.5px;
user-select: none;
-webkit-tap-highlight-color: transparent;
&:hover > span.bar {
@include vendor('filter', 'grayscale(0)');
}
> span { > span {
&.bar { &.bar {
@include vendor('transition', (
'transform #{_duration(transition2)} ease',
'transform-origin #{_duration(transition2)} ease',
'width #{_duration(transition)} ease',
'filter #{_duration(transition)} ease',
));
@include vendor('filter', 'grayscale(1)');
height: 3px; height: 3px;
display: block; display: block;
border-radius: 1.5px; border-radius: 1.5px;
@include vendor('transition', (
'transform #{_duration(transition)} ease',
'transform-origin #{_duration(transition)} ease',
'width #{_duration(transition)} ease',
));
} }
&.bar1 { &.bar1 {
@include vendor('transform-origin', '30px 1.5px');
width: 30px; width: 30px;
background: _palette(accent1); background: _palette(accent1);
margin: auto; margin: auto;
@include vendor('transform-origin', '30px 1.5px');
&.active { &.active {
@include vendor('transform', 'rotate(45deg)'); @include vendor('transform', 'rotate(45deg)');
@include vendor('filter', 'grayscale(0)');
} }
} }
@ -71,7 +128,7 @@
&.active { &.active {
@include vendor('transform', 'rotate(-45deg)'); @include vendor('transform', 'rotate(-45deg)');
transform: rotate(-45deg); @include vendor('filter', 'grayscale(0)');
} }
} }
} }
@ -89,6 +146,11 @@
@include breakpoint('<=medium') { @include breakpoint('<=medium') {
height: 60px; height: 60px;
> #menu > span {
top: 30px;
left: 30px;
}
> #wrapper { > #wrapper {
> a > #logo > img { > a > #logo > img {
@ -102,8 +164,8 @@
> span { > span {
&.bar1 { &.bar1 {
width: 22px;
@include vendor('transform-origin', '22px 1.5px'); @include vendor('transform-origin', '22px 1.5px');
width: 22px;
} }
&.bar2 { &.bar2 {

14
src/index.html
View File

@ -47,6 +47,16 @@
<body> <body>
<nav id="nav"> <nav id="nav">
<div id="menu">
<span></span>
<ul>
<li>loll</li>
<li>xdd</li>
<li>loll</li>
<li>xdd</li>
</ul>
</div>
<div id="wrapper"> <div id="wrapper">
<div id="menuToggle"> <div id="menuToggle">
<span class="bar bar1"></span> <span class="bar bar1"></span>
@ -62,10 +72,6 @@
</picture> </picture>
</a> </a>
</div> </div>
<div id="menu">
dtrhyhrdtrhyhdrthtr
</div>
</nav> </nav>
<header> <header>