From 7c90e3e6444270695f6d31ea6762af8fbd0baee4 Mon Sep 17 00:00:00 2001 From: Thefeli73 Date: Wed, 15 Jan 2020 16:16:31 +0100 Subject: [PATCH] script, html and css for menu button --- src/css/layout/_nav.scss | 4 ++-- src/index.html | 9 +++++---- src/js/main.js | 6 ++++++ 3 files changed, 13 insertions(+), 6 deletions(-) create mode 100644 src/js/main.js diff --git a/src/css/layout/_nav.scss b/src/css/layout/_nav.scss index 16f779c..8bd315d 100644 --- a/src/css/layout/_nav.scss +++ b/src/css/layout/_nav.scss @@ -17,14 +17,14 @@ width: 60px; background: _palette(accent1); margin: 15px 30px; + @include vendor('transform-origin', '55px 5px'); &.active { @include vendor('transform', 'rotate(45deg)'); - @include vendor('transform-origin', '55px 5px'); } } - &.bar1.active:first-child { + &.bar1:first-child { @include vendor('transform-origin', '5px 5px'); } diff --git a/src/index.html b/src/index.html index fef5514..c0386b0 100644 --- a/src/index.html +++ b/src/index.html @@ -47,10 +47,10 @@ @@ -62,5 +62,6 @@ + diff --git a/src/js/main.js b/src/js/main.js new file mode 100644 index 0000000..c6d9b22 --- /dev/null +++ b/src/js/main.js @@ -0,0 +1,6 @@ +function menuToggle() { + var bars = document.getElementsByClassName('bar'); + for (var i = 0; i < bars.length; i++) { + bars[i].classList.toggle('active'); + } +}