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

add wrapper, eventlistner, css optimize

Browse Source
This commit is contained in:
Thefeli73 2020-01-15 18:08:42 +01:00
parent 7c90e3e644
commit 1da0437812
3 changed files with 97 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,42 +2,103 @@
/* Nav */ /* Nav */
#nav { #nav {
> div > span { @include vendor('transition', (
&.bar { 'height #{_duration(transition)} ease',
height: 10px; ));
display: block; height: 80px;
border-radius: 5px;
@include vendor('transition', (
'transform #{_duration(transition)} ease',
));
} > #wrapper {
margin: auto;
line-height: 11px;
&.bar1 { > #menuToggle {
width: 60px; @include vendor('transition', (
background: _palette(accent1); 'padding #{_duration(transition)} ease',
margin: 15px 30px; ));
@include vendor('transform-origin', '55px 5px'); display: inline-block;
cursor: pointer;
padding: calc(47px/2);
&.active { > span {
@include vendor('transform', 'rotate(45deg)'); &.bar {
} height: 3px;
} display: block;
border-radius: 1.5px;
@include vendor('transition', (
'transform #{_duration(transition)} ease',
'transform-origin #{_duration(transition)} ease',
'width #{_duration(transition)} ease',
'margin #{_duration(transition)} ease',
));
&.bar1:first-child { }
@include vendor('transform-origin', '5px 5px');
}
&.bar2 { &.bar1 {
width: 80px; width: 30px;
background: _palette(accent2); background: _palette(accent1);
margin: 7px 20px; margin: auto;
z-index: 99; @include vendor('transform-origin', '30px 1.5px');
&.active { &.active {
@include vendor('transform', 'rotate(-45deg)'); @include vendor('transform', 'rotate(45deg)');
transform: rotate(-45deg); }
}
&.bar1:first-child {
@include vendor('transform-origin', '0 1.5px');
}
&.bar2 {
width: 43px;
background: _palette(accent2);
margin: 12px 0;
&.active {
@include vendor('transform', 'rotate(-45deg)');
transform: rotate(-45deg);
}
}
} }
} }
} }
@include breakpoint('<=xlarge') {
}
@include breakpoint('<=large') {
}
@include breakpoint('<=medium') {
height: 60px;
> #wrapper > #menuToggle {
padding: calc(35px/2);
> span {
&.bar1 {
width: 22px;
@include vendor('transform-origin', '22px 1.5px');
}
&.bar2 {
width: 32px;
margin: 8px 0;
}
}
}
}
@include breakpoint('<=small') {
}
@include breakpoint('<=xsmall') {
}
@include breakpoint('<=xxsmall') {
}
} }

10
src/index.html
View File

@ -47,10 +47,12 @@
<body> <body>
<nav id="nav"> <nav id="nav">
<div onclick="menuToggle();"> <div id="wrapper">
<span class="bar bar1"></span> <div id="menuToggle">
<span class="bar bar2"></span> <span class="bar bar1"></span>
<span class="bar bar1"></span> <span class="bar bar2"></span>
<span class="bar bar1"></span>
</div>
</div> </div>
</nav> </nav>

1
src/js/main.js
View File

@ -1,3 +1,4 @@
document.getElementById("menuToggle").addEventListener("click", menuToggle);
function menuToggle() { function menuToggle() {
var bars = document.getElementsByClassName('bar'); var bars = document.getElementsByClassName('bar');
for (var i = 0; i < bars.length; i++) { for (var i = 0; i < bars.length; i++) {