First responsive for header

RecyLife · Oct 11, 2024 · ad9e107 · ad9e107
1 parent 7644d6e
commit ad9e107
Show file tree

Hide file tree

Showing 5 changed files with 125 additions and 8 deletions.
diff --git a/index.html b/index.html
@@ -11,19 +11,26 @@
     <title>RecyTech</title>
 </head>
 <body>
-    <header class="main-header">
+    <header id="mainHeader" class="main-header">
+        <div id="headerBackground" class="header-background"></div>
         <img class="header-logo" src="./imgs/logo.png" alt="RecyTech logo" onclick="window.location.reload()">
-        <h1 class="header-title">RecyTech</h1>
+        <h1 id="headerTitle" class="header-title">RecyTech</h1>
         <div class="header-separator"></div>
         <div class="header-links">
             <p id="headerLinkProduct" class="header-link" onclick="smoothScroll('headerLinkProduct', 'product')">Notre produit</p>
             <p id="headerLinkAbout" class="header-link" onclick="smoothScroll('headerLinkAbout', 'about')">A propos</p>
             <p id="headerLinkContact" class="header-link" onclick="smoothScroll('headerLinkContact', 'contact')">Contact</p>
         </div>
+
+        <div class="hamburger-menu" id="hamburgerMenu">
+            <div class="bar"></div>
+            <div class="bar"></div>
+            <div class="bar"></div>
+        </div>
     </header>
     <main>
         <section id="product" class="main-section product">
-            <h1 class="section-slogan">Réparer aujourd'hui <br>pour connecter demain.</h1>
+            <h1 class="section-slogan">Transformer les vieux pc <br>en de nouvelles oportunitées.</h1>
             <div class="section-buy">
                 <div class="buy-image-title">
                     <img class="buy-image" src="./imgs/template2.jpg" alt="template2">

diff --git a/scripts/script.js b/scripts/script.js
@@ -1,3 +1,4 @@
+// Navigation 
 function smoothScroll(linkId, targetId) {
     const targetElement = document.getElementById(targetId);
     let elementPosition = targetElement.getBoundingClientRect().top + window.pageYOffset;
@@ -6,6 +7,30 @@ function smoothScroll(linkId, targetId) {
     }
     window.scrollTo({
         top: elementPosition,
-        behavior: 'smooth'
+        behavior: "smooth"
     });
-}
+}
+
+// Hamgurger-menu
+const body = document.body;
+const header = document.getElementById("mainHeader");
+const headerBackground = document.getElementById("headerBackground");
+const headerTitle = document.getElementById("headerTitle");
+const hamburgerMenu = document.getElementById("hamburgerMenu");
+
+function toggleHamburgerMenu() {
+    body.classList.toggle("is-hamburger-active");
+    header.classList.toggle("is-hamburger-active");
+    headerTitle.classList.toggle("is-hamburger-active");
+    headerBackground.classList.toggle("is-hamburger-active");
+    hamburgerMenu.classList.toggle("active");
+}
+
+hamburgerMenu.addEventListener("click", toggleHamburgerMenu);
+
+// Check screen width for hamburger menu autoclosing
+window.addEventListener("resize", () => {
+    if (screen.width > 650 && header.classList.contains("is-hamburger-active")) {
+        toggleHamburgerMenu();
+    }
+});
diff --git a/styles/header.css b/styles/header.css
@@ -7,25 +7,53 @@
     align-items: center;
     width: 100%;
     height: var(--header-height);
+    z-index: 2;
+}
+
+.main-header.is-hamburger-active {
+    padding: 15px;
+    padding-left: 20px;
+    height: 100vh;
+    align-items: self-start;
+}
+
+.header-background {
+    left: 0;
+    position: fixed;
+    height: 80px;
+    width: 100%; 
     box-shadow: 0 0px 4px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(5px);
-    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
     background: rgba(255, 255, 255, 0.1);
-    z-index: 2;
+    transition: height 0.5s ease;
 }
 
+.header-background.is-hamburger-active {
+    height: 100vh;
+    box-shadow: none;
+}
+
+
 .header-logo {
     height: 50px;
     cursor: pointer;
+    z-index: 2;
 }
 
 .header-title {
+    margin-right: -10px;
+    transform: translateX(-10px);
     color: var(--text-color);
     font-family: "Raleway-SemiBold";
     user-select: none;
     -webkit-user-select: none;
 }
 
+.header-title.is-hamburger-active {
+    transform: translate(-10px,6px);
+}
+
 .header-separator {
     border-radius: var(--border-radius);
     height: 60%;
@@ -50,4 +78,54 @@
 .header-link:hover, .header-link:focus {
     color: #ffffffb4;
     outline: none;
+}
+
+.hamburger-menu {
+    position: absolute;
+    right: 28px;
+    width: 25px;
+    height: 20px;
+    display: none;
+    transform: scale(1.3);
+    flex-direction: column;
+    justify-content: space-between;
+    cursor: pointer;
+    z-index: 3;
+    user-select: none;
+}
+
+.bar {
+    border-radius: var(--border-radius);
+    width: 100%;
+    height: 3px;
+    background-color: var(--border-color);
+    transition: 0.4s;
+    transform-origin: center;
+}
+
+.hamburger-menu.active .bar:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+}
+
+.hamburger-menu.active .bar:nth-child(2) {
+    opacity: 0;
+}
+
+.hamburger-menu.active .bar:nth-child(3) {
+    transform: translateY(-10px) rotate(-45deg);
+}
+
+.hamburger-menu.active {
+    top: 35px;
+    display: flex;
+    transform: translateY(-4px) scale(1.3);
+}
+
+@media screen and (max-width: 650px) {
+    .header-separator, .header-links {
+        display: none;
+    }
+    .hamburger-menu {
+        display: flex;
+    }
 }
diff --git a/styles/main.css b/styles/main.css
@@ -1,5 +1,8 @@
 main {
     margin-top: var(--header-height);
+    overflow: hidden; /*temp*/
+    padding-left: 50px;
+    padding-right: 50px;
 }
 
 .main-section {

diff --git a/styles/styles.css b/styles/styles.css
@@ -28,3 +28,7 @@ body {
 	background-color: var(--primary-color);
 }
 
+body.is-hamburger-active {
+    overflow: hidden;
+}
+