From 1ee64beea351fa83d92610b2fd54c588a3c184ec Mon Sep 17 00:00:00 2001 From: patryk771 Date: Tue, 19 Jan 2021 09:30:51 +0100 Subject: [PATCH] menu-burger --- dist/css/main.css | 176 +++++++++++++++++++++++++++++++++++++++++ dist/css/main.css.map | 11 +++ dist/index.html | 48 +++++++++++ dist/js/main.js | 27 +++++++ dist/scss/_config.scss | 13 +++ dist/scss/_menu.scss | 117 +++++++++++++++++++++++++++ dist/scss/main.scss | 17 ++++ index.html | 18 ----- 8 files changed, 409 insertions(+), 18 deletions(-) create mode 100644 dist/css/main.css create mode 100644 dist/css/main.css.map create mode 100644 dist/index.html create mode 100644 dist/js/main.js create mode 100644 dist/scss/_config.scss create mode 100644 dist/scss/_menu.scss create mode 100644 dist/scss/main.scss delete mode 100644 index.html diff --git a/dist/css/main.css b/dist/css/main.css new file mode 100644 index 0000000..992de9d --- /dev/null +++ b/dist/css/main.css @@ -0,0 +1,176 @@ +@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap"); +* { + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +.menu-btn { + position: absolute; + z-index: 1; + right: 1rem; + top: 1rem; + height: 20px; + width: 28px; + cursor: pointer; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} + +.menu-btn_burger { + position: absolute; + right: 0; + top: 0.5rem; + width: 28px; + height: 3px; + background: black; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} + +.menu-btn_burger::before { + content: ''; + position: absolute; + top: -8px; + width: 28px; + height: 3px; + background-color: black; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} + +.menu-btn_burger::after { + content: ''; + position: absolute; + top: 8px; + width: 20px; + height: 3px; + background-color: black; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} + +.menu-btn_burger.open { + -webkit-transform: rotate(720deg); + transform: rotate(720deg); + background: transparent; +} + +.menu-btn_burger.open::before { + -webkit-transform: rotate(45deg) translate(5px, 8px); + transform: rotate(45deg) translate(5px, 8px); +} + +.menu-btn_burger.open::after { + width: 28px; + -webkit-transform: rotate(-45deg) translate(3px, -7px); + transform: rotate(-45deg) translate(3px, -7px); +} + +.nav { + position: fixed; + top: 0; + left: 0; + width: 100vw; + opacity: 0.98; + visibility: hidden; +} + +.nav.open { + visibility: visible; +} + +.nav .menu-nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-flow: column wrap; + flex-flow: column wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + height: 100vh; + overflow: hidden; + background: #e1e1e1; + list-style-type: none; + padding-right: 1rem; + -webkit-transform: translateY(-100%); + transform: translateY(-100%); + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} + +.nav .menu-nav.open { + -webkit-transform: translateY(0); + transform: translateY(0); +} + +.nav .menu-nav_item { + -webkit-transform: translateX(100vw); + transform: translateX(100vw); + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} + +.nav .menu-nav_item.open { + -webkit-transform: translateX(0); + transform: translateX(0); +} + +.nav .menu-nav_item.active > a { + color: yellow; +} + +.nav .menu-nav_link { + display: inline-block; + font-size: 2rem; + text-transform: uppercase; + padding: 2rem 0; + font-weight: 300; + -webkit-transition: all 0.25s ease-in-out; + transition: all 0.25s ease-in-out; +} + +.nav .menu-nav_link:hover { + color: yellow; +} + +.menu-nav_item:nth-child(1) { + -webkit-transition-delay: 0.3s; + transition-delay: 0.3s; +} + +.menu-nav_item:nth-child(2) { + -webkit-transition-delay: 0.45s; + transition-delay: 0.45s; +} + +.menu-nav_item:nth-child(3) { + -webkit-transition-delay: 0.6s; + transition-delay: 0.6s; +} + +.menu-nav_item:nth-child(4) { + -webkit-transition-delay: 0.75s; + transition-delay: 0.75s; +} + +body { + width: 1440px; + color: #e1e1e1; +} + +a.menu-nav_link { + font-family: Raleway; + text-decoration: none; + color: #515151; + font-weight: 700; + font-size: 18px; +} +/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/dist/css/main.css.map b/dist/css/main.css.map new file mode 100644 index 0000000..425c2bd --- /dev/null +++ b/dist/css/main.css.map @@ -0,0 +1,11 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "../scss/main.scss", + "../scss/_config.scss", + "../scss/_menu.scss" + ], + "names": [], + "file": "main.css" +} \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 0000000..406f8b8 --- /dev/null +++ b/dist/index.html @@ -0,0 +1,48 @@ + + + + + + + + + Bussines Card + + +
+
+ + +
+ +
+ + + + + \ No newline at end of file diff --git a/dist/js/main.js b/dist/js/main.js new file mode 100644 index 0000000..296e0ef --- /dev/null +++ b/dist/js/main.js @@ -0,0 +1,27 @@ +const menuBtn = document.querySelector('.menu-btn'); +const hamburger = document.querySelector('.menu-btn_burger'); +const nav = document.querySelector('.nav'); +const menuNav = document.querySelector('.menu-nav'); +const navItems = document.querySelectorAll('.menu-nav_item'); + +let showMenu = false; + +menuBtn.addEventListener('click', toggleMenu); + +function toggleMenu() { + if(!showMenu) { + hamburger.classList.add('open'); + nav.classList.add('open'); + menuNav.classList.add('open'); + navItems.forEach(item => item.classList.add('open')); + + showMenu = true; + } else { + hamburger.classList.remove('open'); + nav.classList.remove('open'); + menuNav.classList.remove('open'); + navItems.forEach(item => item.classList.remove('open')); + + showMenu = false; + } +} \ No newline at end of file diff --git a/dist/scss/_config.scss b/dist/scss/_config.scss new file mode 100644 index 0000000..0b3f537 --- /dev/null +++ b/dist/scss/_config.scss @@ -0,0 +1,13 @@ +$background-color: #e1e1e1; +$text-color: #515151; + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +@mixin transition-ease { + transition: all 0.25s ease-in-out; +} + diff --git a/dist/scss/_menu.scss b/dist/scss/_menu.scss new file mode 100644 index 0000000..1a88418 --- /dev/null +++ b/dist/scss/_menu.scss @@ -0,0 +1,117 @@ +.menu-btn { + position: absolute; + z-index: 1; + right: 1rem; + top: 1rem; + height: 20px; + width: 28px; + cursor: pointer; + @include transition-ease; + + &_burger { + position: absolute; + right: 0; + top: 0.5rem; + width: 28px; + height: 3px; + background: black; + @include transition-ease; + + &::before { + content: ''; + position: absolute; + top: -8px; + width: 28px; + height: 3px; + background-color: black; + @include transition-ease; + } + + &::after { + content: ''; + position: absolute; + top: 8px; + width: 20px; + height: 3px; + background-color: black; + @include transition-ease; + } + + &.open { + transform: rotate(720deg); + background: transparent; + + &::before { + transform: rotate(45deg) translate(5px, 8px); + } + + &::after { + width: 28px; + transform: rotate(-45deg) translate(3px, -7px); + } + } + } +} + +.nav { + position: fixed; + top: 0; + left: 0; + width: 100vw; + opacity: 0.98; + visibility: hidden; + + &.open { + visibility: visible; + } + + .menu-nav { + display: flex; + flex-flow: column wrap; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + background: $background-color; + list-style-type: none; + padding-right: 1rem; + transform: translateY(-100%); + @include transition-ease; + + &.open { + transform:translateY(0); + } + + &_item { + transform: translateX(100vw); + @include transition-ease; + + &.open { + transform: translateX(0); + } + + &.active > a { + color: yellow; + } + } + + &_link { + display: inline-block; + font-size: 2rem; + text-transform: uppercase; + padding: 2rem 0; + font-weight: 300; + @include transition-ease; + + &:hover { + color: yellow; + } + } + } +} + +@for $i from 1 through 4 { + .menu-nav_item:nth-child(#{$i}) { + transition-delay: ($i * 0.15s) + 0.15s; + } +} \ No newline at end of file diff --git a/dist/scss/main.scss b/dist/scss/main.scss new file mode 100644 index 0000000..04ea93f --- /dev/null +++ b/dist/scss/main.scss @@ -0,0 +1,17 @@ +@import 'config'; +@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap'); +@import 'menu'; + +body { + width: 1440px; + color: $background-color; +} + +a.menu-nav_link { + font-family: Raleway; + text-decoration: none; + color: $text-color; + font-weight: 700; + font-size: 18px; +} + diff --git a/index.html b/index.html deleted file mode 100644 index 9733e74..0000000 --- a/index.html +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - CodersCamp | Projekt 1 - HTML i CSS - - - - - - -

CodersCamp - projekt 1. Tutaj możesz zacząć swoją zabawę!

-

TEST commit

- -