Clean comments on js for the hamburger menu

deponte-designer · Nov 3, 2023 · d6064df · d6064df
1 parent 45bafbc
commit d6064df
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -85,6 +85,7 @@ Feel free to explore the code, make modifications, and provide feedback. If you
 #### For the index.html file
 - [Semantic HTML](https://www.w3schools.com/html/html5_semantic_elements.asp)
 - [The Anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a)
+- [Hamburger menu](https://www.w3schools.com/howto/howto_js_mobile_navbar.asp)
 
 #### For the style.css file
 - [CSS CheatSheet](https://htmlcheatsheet.com/css/)

diff --git a/css/style.css b/css/style.css
@@ -41,37 +41,51 @@ body {
   display: flex;
   flex-direction: column;
   line-height: 1.3;
-
+  margin: 0;
+  padding: 0;
 }
 
 /* * ----- HEADER STYLE ----- */
 header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 100px;
+  padding: 2vh 10vh;
   background-color: var(--bg-header);
   color: var(--header-color);
+  /* overflow: visible; */
+  max-height: 12vh;
+  width: 100vw;
+}
+
+figure {
+  display: flex;
+  margin-top: 6.5vh;
+  overflow: visible;
+  z-index: 1;
 }
 
 .avatar {
-  position: absolute;
-  top: 20px;
-  left: 100px;
-  width: 99px;
+  width: 100px;
   border-radius: 100%;
 }
 
 .title-header {
-  position: absolute;
-  left: 170px;
+  margin: 1vh -3vh;
+  text-shadow: 2px 2px 5px #2C3532;
 }
 
 /* * ----- NAVEGATION STYLE ----- */
-nav ul {
+
+.icon {
+  display: none;
+}
+
+header nav ul {
+  /* display: block; */
   display: flex;
   justify-content: space-between;
-  min-width: 500px;
+  min-width: 60vw;
 }
 
 nav li {
@@ -275,17 +289,50 @@ footer a {
 /* * --- Media Query for Tablets --- */
 /* applies to medium devices (tablets, less than 1000px) */
 @media only screen and (max-width: 1000px) {
-/* ! --------------------------------------------- TO BE COMPLETE */
+  /* ! --------------------------------------------- TO BE COMPLETE */
+
+  header {
+    flex-direction: column;
+    max-height: 30vh;
+    padding: 0;
+    width: 100vw;
+  }
+
+  figure {
+    /* justify-content: center; */
+    /* margin: 0 auto; */
+    margin: 1vh 1vh;
+    /* margin-left: 10vw; */
+  }
 
   .avatar {
-    position: absolute;
-    top: 20px;
-    left: 100px;
-    width: 99px;
-    border-radius: 100%;
+    width: calc(100px / 1.5);
+  }
+
+  .title-header {
+    font-size: 2.5vh;
   }
 
 
+  nav {
+    /* display: flex; */
+    /* padding: -3vh 1vh; */
+  }
+
+  header nav ul {
+    /* display: block; */
+    display: flex;
+    justify-content: space-between;
+    min-width: 60vw;
+    font-size: 2vh;
+  }
+
+  nav ul {
+    margin:  1vh 1vh;
+  }
+
+
+
   /* ---------- work ----------- */
 
   .portfolio-grid {
@@ -307,7 +354,53 @@ footer a {
 /* * --- Media Query for Smartphones --- */
 /* applies to x-small devices (portrait phones, less than 576px) */
 @media only screen and (max-width: 576px) {
-/* ! --------------------------------------------- TO BE COMPLETE */
+  /* ! --------------------------------------------- TO BE COMPLETE */
+
+  header {
+    margin: 0;
+    padding: 0;
+
+  }
+
+  nav {
+    z-index: 1;
+    background-color: #116466;
+  }
+
+  /* Hide the links inside the navigation menu (except for logo/home) */
+  header nav ul {
+    display: none;
+  }
+
+  /* Style navigation menu links */
+  header nav a {
+    color: var(--header-color);
+    padding: 1.4vh 1.6vh;
+    text-decoration: none;
+    font-size: 17px;
+    display: block;
+  }
+
+  /* Style the hamburger menu */
+  header nav a.icon {
+    background: var(--bg-header);
+    color: var(--header-color);
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  /* Add a grey background color on mouse-over */
+  header nav a:hover {
+    background-color: var(--header-color);
+    color: var(--bg-header);
+  }
 
+  /* Style the active link (or home/logo) */
+  /* .active {
+  background-color: #04AA6D;
+  color: white;
+} */
 
 }
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
   <meta name="keywords"
     content="dePonte, Designer, Web Developer, Front-End, Design, Web Development Bootcamp, Creativity, GitHub, HTML, CSS, JavaScript, Portfolio, Collaboration, Technology">
   <meta name="author" content="dePonte, Sofia">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
   <link rel="stylesheet" href="css/style.css" />
   <title>dePonte // Designer & Frontend Web Developer</title>
 </head>
@@ -24,16 +25,21 @@
   <header>
     <figure>
       <img class="avatar" src="./images/avatar.png" alt="My avatar" />
+      <h1 class="title-header">dePonte</h1>
     </figure>
-    <h1 class="title-header">dePonte</h1>
-
+
     <nav class="navigation">
-      <ul>
+      <ul id="myLinks">
         <li class="bottom-line"><a href="#about">About Me</a></li>
         <li class="bottom-line"><a href="#work">Work</a></li>
         <li class="bottom-line"><a href="#contact">Contact Me</a></li>
         <li class="bottom-line"><a href="https://github.com/deponte-designer" target="_blank">Resume</a></li>
       </ul>
+      <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
+      <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+        <i class="fa fa-bars"></i>
+      </a>
+
     </nav>
   </header>
 
@@ -77,7 +83,7 @@ <h3>Code Refactor for Horiseon Agency</h3>
         <div class="project-2" title="Second project, graphic image">
           <a href="#" target="_blank">
             <div class="project-box-titles">
-              <h3>Portfolio with grid and media queries</h3>
+              <h3>Portfolio, grid + media query</h3>
               <p>HTML/CSS</p>
             </div>
           </a>
@@ -127,6 +133,7 @@ <h2>Contact <br> Me</h2>
   <footer>
     <p>&copy; 2023 <a class="" href="https://github.com/deponte-designer" target="_blank">dePonte</a></p>
   </footer>
+<script src="./js/script.js"></script>
 
 </body>
 

diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,14 @@
+/* Toggle between showing and hiding the navigation menu links when the user clicks on the hamburger menu / bar icon */
+
+function myFunction() {
+    var x = document.getElementById("myLinks");
+    if (x.style.display === "block") {
+      x.style.display = "none";
+    } else {
+      x.style.display = "block";
+    } 
+
+  }
+
+
+