From 4436b041cb6f2d08c2d9f9d0358024d83b7c3a11 Mon Sep 17 00:00:00 2001
From: Robin King <robin2.king@live.uwe.ac.uk>
Date: Tue, 21 Mar 2023 11:40:35 +0000
Subject: [PATCH] feat(styles.css-&&-scripts.js): animate hamburger on click
---
scripts.js | 2 ++
styles.css | 23 ++++++++++++++++++++---
2 files changed, 22 insertions(+), 3 deletions(-)
diff --git a/scripts.js b/scripts.js
index facc21d..cf025cc 100644
--- a/scripts.js
+++ b/scripts.js
@@ -19,6 +19,7 @@ window.addEventListener('resize', () => {
navigation.removeAttribute('style');
navigation.classList.remove('show');
burger.setAttribute('aria-expanded', 'false');
+ burger.classList.remove('open');
document.body.removeAttribute('style');
});
@@ -54,6 +55,7 @@ function desktopNavControls() {
**/
burger.addEventListener('click', () => {
navigation.classList.toggle('show');
+ burger.classList.toggle('open');
if (navigation.classList.contains('show')) {
// Stops user from scrolling while nav is open
document.body.style.overflow = 'hidden';
diff --git a/styles.css b/styles.css
index 2d29f6c..910f4eb 100644
--- a/styles.css
+++ b/styles.css
@@ -10,9 +10,9 @@
/* Segoe UI Semilight Configuration */
@font-face {
- font-family: "Segoe UI";
- font-weight: 300;
- src: local("Segoe UI Semilight");
+ font-family: "Segoe UI";
+ font-weight: 300;
+ src: local("Segoe UI Semilight");
}
/*** Global Styles ***/
@@ -459,6 +459,23 @@
background-color: white;
box-shadow: 3px 5px 19px 0px rgba(0, 0, 0, .41);
+
+ transition: all .3s;
+ }
+
+ /** Animate hamburger **/
+
+ .hamburger.open div[class|="hamburger"]:nth-of-type(1) {
+ transform: rotate(-35deg) scaleX(.5) translate(-55%, 0);
+ }
+
+ .hamburger.open div[class|="hamburger"]:nth-of-type(2) {
+ transform-origin: left;
+ transform: scaleX(.85);
+ }
+
+ .hamburger.open div[class|="hamburger"]:nth-of-type(3) {
+ transform: rotate(35deg) scaleX(.5) translate(-55%, 0);
}
/*** Footer Styles ***/
--
GitLab