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 {
> div > span {
&.bar {
height: 10px;
display: block;
border-radius: 5px;
@include vendor('transition', (
'transform #{_duration(transition)} ease',
));
@include vendor('transition', (
'height #{_duration(transition)} ease',
));
height: 80px;
}
> #wrapper {
margin: auto;
line-height: 11px;
&.bar1 {
width: 60px;
background: _palette(accent1);
margin: 15px 30px;
@include vendor('transform-origin', '55px 5px');
> #menuToggle {
@include vendor('transition', (
'padding #{_duration(transition)} ease',
));
display: inline-block;
cursor: pointer;
padding: calc(47px/2);
&.active {
@include vendor('transform', 'rotate(45deg)');
}
}
> span {
&.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 {
width: 80px;
background: _palette(accent2);
margin: 7px 20px;
z-index: 99;
&.bar1 {
width: 30px;
background: _palette(accent1);
margin: auto;
@include vendor('transform-origin', '30px 1.5px');
&.active {
@include vendor('transform', 'rotate(-45deg)');
transform: rotate(-45deg);
&.active {
@include vendor('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>
<nav id="nav">
<div onclick="menuToggle();">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar1"></span>
<div id="wrapper">
<div id="menuToggle">
<span class="bar bar1"></span>
<span class="bar bar2"></span>
<span class="bar bar1"></span>
</div>
</div>
</nav>

1
src/js/main.js
View File

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