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

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

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

4
src/index.html
View File

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

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++) {