Add hamburger menu functionality

Web-Jose · Feb 29, 2024 · 7c35f56 · 7c35f56
1 parent f37982e
commit 7c35f56
Show file tree

Hide file tree

Showing 8 changed files with 208 additions and 5 deletions.
diff --git a/404.html b/404.html
@@ -91,10 +91,29 @@
         >Resume</a
       >
     </nav>
+
+    <span class="MenuButton" onclick="openNav()"
+      ><i class="fa-solid fa-bars"></i
+    ></span>
   </header>
 
   <!-- Body -->
   <body>
+    <div id="hamburger-menu" class="hamburger-menu">
+      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
+        >&times;</a
+      >
+      <a class="Title" href="/">Code By Jose</a>
+      <a href="https://codebyjose.com#Home">Home</a>
+      <a href="https://codebyjose.com#aboutmeSec">About</a>
+      <a href="https://codebyjose.com#projects">Projects</a>
+      <a href="https://codebyjose.com#contact">Contact</a>
+      <a
+        href="https://codebyjose.com/JoseCortes-Resume.pdf"
+        download="JoseCortes-Resume.pdf"
+        >Resume</a
+      >
+    </div>
     <main>
       <section class="Error404">
         <span class="ErrorTitle">404</span>

diff --git a/NavIcon.js b/NavIcon.js
@@ -9,3 +9,11 @@ navLinks.forEach((navLink) => {
     navLink.classList.remove("active");
   });
 });
+
+function openNav() {
+  document.getElementById("hamburger-menu").style.width = "100%";
+}
+
+function closeNav() {
+  document.getElementById("hamburger-menu").style.width = "0";
+}
diff --git a/index.html b/index.html
@@ -91,10 +91,28 @@
         >Resume</a
       >
     </nav>
+    <span class="MenuButton" onclick="openNav()"
+      ><i class="fa-solid fa-bars"></i
+    ></span>
   </header>
 
   <!-- Body -->
   <body>
+    <div id="hamburger-menu" class="hamburger-menu">
+      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
+        >&times;</a
+      >
+      <a class="Title" href="/">Code By Jose</a>
+      <a href="https://codebyjose.com#Home">Home</a>
+      <a href="https://codebyjose.com#aboutmeSec">About</a>
+      <a href="https://codebyjose.com#projects">Projects</a>
+      <a href="https://codebyjose.com#contact">Contact</a>
+      <a
+        href="https://codebyjose.com/JoseCortes-Resume.pdf"
+        download="JoseCortes-Resume.pdf"
+        >Resume</a
+      >
+    </div>
     <main>
       <!-- Home Section -->
       <section class="HomeSection" id="Home">

diff --git a/portfolio.css b/portfolio.css
@@ -86,6 +86,68 @@ body {
   padding-top: 15em;
   margin: 0;
 }
+
+/* The side navigation menu */
+.hamburger-menu {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #080d0c;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}
+
+/* The menu content */
+.hamburger-menu a {
+  padding: 0.5em;
+  text-decoration: none;
+  font: bold 1.5em "Lato";
+  color: #d2d9d8;
+  display: block;
+  transition: 0.3s;
+}
+
+.hamburger-menu a.Title {
+  font: bold 2em "Lora";
+}
+
+.hamburger-menu a:hover {
+  color: #a5d0e1;
+}
+
+/* The close button */
+.hamburger-menu .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+.hamburger-menu,
+.hamburger-menu-btn,
+.MenuButton {
+  display: none;
+}
+
+.MenuButton {
+  font-size: 30px;
+  cursor: pointer;
+  color: #d2d9d8;
+  margin-right: 0.5em;
+}
+
+@media screen and (max-width: 425px) {
+  .hamburger-menu,
+  .hamburger-menu-btn,
+  .MenuButton {
+    display: block;
+  }
+}
+
 /* Home Section */
 #Home {
   padding-top: 15em;

diff --git a/portfolio.js b/portfolio.js
@@ -234,3 +234,11 @@ $(document).ready(function () {
     });
   });
 });
+
+function openNav() {
+  document.getElementById("hamburger-menu").style.width = "100%";
+}
+
+function closeNav() {
+  document.getElementById("hamburger-menu").style.width = "0";
+}
diff --git a/projects/index.html b/projects/index.html
@@ -73,27 +73,46 @@
     <a href="/" class="Title">Code By Jose</a>
     <!-- Navigation Bar -->
     <nav>
-      <a href="index.html#Home"
+      <a href="https://codebyjose.com#Home"
         ><i class="fa-solid fa-house" style="color: #d2d9d8"></i>Home</a
       >
-      <a href="index.html#aboutmeSec"
+      <a href="https://codebyjose.com#aboutmeSec"
         ><i class="fa-solid fa-user" style="color: #d2d9d8"></i>About</a
       >
-      <a href="index.html#projects"
+      <a href="https://codebyjose.com#projects"
         ><i class="fa-solid fa-folder" style="color: #d2d9d8"></i>Projects</a
       >
       <!--<a href="#experiences">Experiences</a>--->
-      <a href="index.html#contact"
+      <a href="https://codebyjose.com#contact"
         ><i class="fa-solid fa-message" style="color: #d2d9d8"></i>Contact</a
       >
-      <a href="JoseC-CV.pdf" download="JoseC-CV.pdf"
+      <a href="JoseCortes-Resume.pdf" download="JoseCortes-Resume.pdf"
         ><i class="fa-solid fa-cloud-arrow-down" style="color: #d2d9d8"></i
         >Resume</a
       >
     </nav>
+    <span class="MenuButton" onclick="openNav()"
+      ><i class="fa-solid fa-bars"></i
+    ></span>
   </header>
 
   <body>
+    <div id="hamburger-menu" class="hamburger-menu">
+      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()"
+        >&times;</a
+      >
+      <a class="Title" href="/">Code By Jose</a>
+      <a href="https://codebyjose.com#Home">Home</a>
+      <a href="https://codebyjose.com#aboutmeSec">About</a>
+      <a href="https://codebyjose.com#projects">Projects</a>
+      <a href="https://codebyjose.com#contact">Contact</a>
+      <a
+        href="https://codebyjose.com/JoseCortes-Resume.pdf"
+        download="JoseCortes-Resume.pdf"
+        >Resume</a
+      >
+    </div>
+
     <section class="project-hero"></section>
 
     <section class="project-section">

diff --git a/projects/projects.css b/projects/projects.css
@@ -86,6 +86,67 @@ body {
   width: 100%;
 }
 
+/* The side navigation menu */
+.hamburger-menu {
+  height: 100%;
+  width: 0;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #080d0c;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}
+
+/* The menu content */
+.hamburger-menu a {
+  padding: 0.5em;
+  text-decoration: none;
+  font: bold 1.5em "Lato";
+  color: #d2d9d8;
+  display: block;
+  transition: 0.3s;
+}
+
+.hamburger-menu a.Title {
+  font: bold 2em "Lora";
+}
+
+.hamburger-menu a:hover {
+  color: #a5d0e1;
+}
+
+/* The close button */
+.hamburger-menu .closebtn {
+  position: absolute;
+  top: 0;
+  right: 25px;
+  font-size: 36px;
+  margin-left: 50px;
+}
+.hamburger-menu,
+.hamburger-menu-btn,
+.MenuButton {
+  display: none;
+}
+
+.MenuButton {
+  font-size: 30px;
+  cursor: pointer;
+  color: #d2d9d8;
+  margin-right: 0.5em;
+}
+
+@media screen and (max-width: 425px) {
+  .hamburger-menu,
+  .hamburger-menu-btn,
+  .MenuButton {
+    display: block;
+  }
+}
+
 /* Projects */
 
 .project-section {

diff --git a/projects/projects.js b/projects/projects.js
@@ -63,3 +63,11 @@ function displayProjects(data) {
     });
   }
 }
+
+function openNav() {
+  document.getElementById("hamburger-menu").style.width = "100%";
+}
+
+function closeNav() {
+  document.getElementById("hamburger-menu").style.width = "0";
+}