Merge pull request #2 from demilade211/master

Added javascript functionality to navbar

app.js

@@ -0,0 +1,40 @@
+const burger = document.querySelector(".burger");
+const nav = document.querySelector(".mobile-nav");
+const navLink = document.querySelectorAll(".mobile-nav li");
+const mobile = document.querySelectorAll(".m-link");
+// fuction to toggle nav
+let state = 0;
+const openDrop=()=> {
+  nav.style.display = "flex";
+}
+const closeDrop=()=>{
+nav.style.display = "none";
+state = 0;
+}
+
+function toggleNav(n){
+  state += n;
+   if(state==1){
+     openDrop();
+   }
+   else{
+     closeDrop();
+   }
+
+    // to animate nav
+navLink.forEach((link,index) => {
+  if(link.style.animation){ // without the if statement the list fade in will only implent on refresh of the page
+      link.style.animation = "";
+  }
+  else{
+    link.style.animation = `navLinkFade 0.5s ease forwards ${index/7 + 0.5}s`;
+  }
+});
+// to animate the burger icon
+    burger.classList.toggle("toggle");
+}
+// to close mobile nav bar on click
+const closeDropdownMenuSelectingItem = (() => mobile.forEach((item) => item.addEventListener("click", ()=>{
+closeDrop();
+toggleNav();
+})))()

index.html

@@ -33,11 +33,19 @@
                     <div><img src="img/ikeja branch NBA logo2 1.png" class="logo1" width="50px" height="40px"></div>
                     <div><img src="img/ikeja branch NBA logo 1.png" class="logo2" width="140px" height="40px"></div>
                 </div>
-                <div class="burger">
+                <div class="burger" onclick="toggleNav(1)">
                     <div class="line1"></div>
                     <div class="line2"></div>
                     <div class="line3"></div>
                 </div>
+                <nav class="mobile-nav">
+                    <ul>
+                        <li><a href="#" class="m-link">HOMES</a></li>
+                        <li><a href="#" class="m-link">NEWS & EVENTS</a></li>
+                        <li><a href="#" class="m-link">ABOUT US</a></li>
+                        <li><a href="#" class="m-link">MEMBERS PORTAL</a></li>
+                    </ul>
+             </nav>
                 <div class="nav-list">
                     <ul class="topnav">
                         <li class="active"> <a href="#">HOMES</a></li>
@@ -227,6 +235,7 @@ <h6>Contact</h6>
     <!-- Optional JavaScript; choose one of the two! -->
 
     <!-- Option 1: Bootstrap Bundle with Popper -->
+    <script src="app.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta1/js/bootstrap.bundle.min.js"></script>
     <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
 </body>

style.css

@@ -19,6 +19,9 @@
  }
 
  nav {
+     background-color: white;
+     position: fixed;
+     z-index: 10;
      width: 100%;
      height: auto;
      display: flex;
@@ -134,6 +137,7 @@
  /* Declare heights because of positioning of img element */
 
  .carousel-item {
+     margin-top: 40px;
      height: 32rem;
  }
 
@@ -397,6 +401,9 @@
      color: #000000;
      margin-top: 10px;
  }
+.mobile-nav{
+    display: none;
+}
 
  @media screen and (min-width: 768px) {
      .bd-placeholder-img-lg {
@@ -454,6 +461,32 @@
          margin-top: -290px;
          margin-right: 100px;
      }
+     .mobile-nav {
+        background-color:white;
+        display: none;
+        flex-direction: column;
+        position: absolute;
+        right: 0;
+        top: 75.5px;
+        width: 55%;
+        height: 100vh;
+        align-content: space-between;
+        transition: transform 0.5s ease-in;
+        z-index: 2;
+    }
+    .mobile-nav li{
+        padding: 20px 0;
+        width: 100%;
+        margin: 0;
+        opacity: 0;
+        padding-bottom: 5px;
+        list-style-type: none;
+    }
+    .mobile-nav li a{
+        text-decoration: none;
+        color: #2D6936;
+        font-family: 'Ubuntu', 'Montserrat', sans-serif;
+    }
  }
 
  @media screen and (max-width: 990px) {
@@ -878,4 +911,24 @@
          .PageFour-Content p {
              width: 100%;
          }
-     }
+     }
+    }
+    @keyframes navLinkFade{
+        from{
+            opacity: 0;
+            transform: translateX(50px);
+        }
+        to{
+            opacity: 1;
+            transform: translateX(0px);
+        }
+    }
+    .toggle .line1{
+        transform: rotate(-45deg) translate(-5px,6px);
+    }
+    .toggle .line2{
+        opacity: 0;
+    }
+    .toggle .line3{
+        transform: rotate(45deg) translate(-5px,-6px);
+    }