New dropdown menu top nav bar

_data/navigation/main.yml

@@ -1,18 +1,19 @@
-- name: Events
-  link: /events
+- name: Our Work
+  link: /#our-work
+  link-name: ourwork
 
-- name: Projects
-  link: /projects
+- name: Join Us
+  link: /join
+  link-name: joinus
 
 # Link below to remain inactive until About page is completed and live
 # - name: About Us
 #   link: /about
 
-- name: Join Us
-  link: /join
+- name: Get in Touch
+  link: /#get-in-touch
+  link-name: getintouch
 
 - name: Toolkit
   link: /toolkit
-
-- name: Wins
-  link: /wins
+  link-name: toolkit

_includes/home-page/home-program-areas.html

@@ -1,5 +1,5 @@
 <section class="home--program-areas home--section">
-
+    <a id="our-work" class="anchor"></a>
     <div class="program-areas--header">
         <h2 class="title2">Explore our projects by <a href="./program-areas.html">Program Area</a></h2>
     </div>

_includes/main-nav.html

@@ -1,14 +1,31 @@
 <nav class="header-nav" id="headerNav" aria-label="Primary">
   <ul class="inline-list" id="mobileNavLink">
     {% for item in site.data.navigation.main %}
-    <li class="{{ item.list_class_name }}">
-      <a href="{{ item.link }}" role="menuitem">
+    <li id="{{ item.link-name }}" class="dropdown">
+      <a href="{{ item.link }}" role="menu-item" class="menu-item">
         {% if item.icon %} {%- include {{ site.baseurl
         }}{{ item.icon }} -%} {% endif %}
         {{- item.name -}}
       </a>
+
+      <div>
+        <ul class="dropdown-content">
+          {% assign list_link_name = site.data.navigation[item.link-name] %}
+          {% for link in list_link_name %}
+          {% unless link.bolded %}
+          <li id="{{ link.name }}">
+            <a href="{{ link.link }}" role="dropdown-item">
+              {{ link.name }}
+            </a>
+          </li>
+          {% endunless %}
+          {% endfor %}
+        </ul>
+      </div>
     </li>
 
     {% endfor %}
   </ul>
 </nav>
+
+<script src="{{ '/assets/js/nav-accessibility.js' | absolute_url }}"></script>

_sass/components/_header-nav.scss

@@ -3,7 +3,7 @@ $nav-width: 240px;
 .header-nav {
   position: fixed;
   left: 0;
-  right:0;
+  right: 0;
   bottom: 0;
   background: $color-white;
   box-shadow: 0 -1px 0 0 rgba($color-black, 0.12);
@@ -17,6 +17,7 @@ $nav-width: 240px;
     margin: 0;
     text-align: center;
     width: 25%;
+    list-style: none;
   }
 
   a {
@@ -27,11 +28,6 @@ $nav-width: 240px;
       color: $color-black;
     }
 
-    &:hover,
-    &:active,
-    &:focus {
-      color: $color-red;
-    }
   }
 
   @media #{$bp-below-tablet} {
@@ -48,13 +44,70 @@ $nav-width: 240px;
     position: static;
 
     ul {
-      margin-right: 20px;
+      margin-left: 50px;
     }
 
     li {
-      margin-left: 2em;
+      margin-left: 3em;
       width: auto;
     }
+
+    .menu-item {
+      &:hover,
+      &:active,
+      &:focus {
+        padding-bottom: 19px;
+        border-bottom: $color-red 2px solid;
+      }
+    }
+
+    // The following styles apply to the dropdowns in the header nav
+
+    .dropdown {
+      display: inline-block;
+      position: relative;
+      margin: 0 30px;
+      width: auto;
+    }
+
+    .dropdown-content {
+      display: none;
+      position: absolute;
+      top: 41px;
+      left: -65px;
+      background-color: rgba(255, 255, 255, 0.93);
+      box-shadow: 0px 8px 16px 0px rgba($color-black, .2);
+      z-index: 1000;
+      min-width: 180px;
+      padding: 15px 20px;
+      font-weight: 400;
+    }
+
+    .dropdown-content ul,
+    .dropdown-content li {
+      display: auto;
+      margin-left: 0;
+      margin-right: 0;
+      padding: 0;
+      text-align: left;
+    }
+
+    .dropdown-content li {
+      margin: 10px auto;
+      text-decoration: none;
+      display: block;
+      width: 100%;
+    }
+
+    .dropdown-content a:hover {
+      color: $color-red;
+      text-decoration: underline;
+    }
+
+    .dropdown:hover .dropdown-content {
+      display: block;
+    }
+
   }
 }
 
@@ -87,11 +140,11 @@ body {
   #swapButton {
     display: none;
   }
-}  
+}
 
 // This styles the hamburger nav and menus on mobile
 @media #{$bp-below-tablet} {
-  #burgerImage { 
+  #burgerImage {
     background-color: $color-white;
     display: block;
     height: 25px;
@@ -100,10 +153,10 @@ body {
     padding-right: 41px;
     padding-top: 5px;
     margin: 5px 0;
-  } 
+  }
 
-  #burgerImageX { 
-    display: none; 
+  #burgerImageX {
+    display: none;
     height: 25px;
     width: 25px;
     border: none;
@@ -119,7 +172,7 @@ body {
   // Hide the nav icons
   .nav-icon {
     display: none;
-  }  
+  }
 
   // This is the position of the white box of the menu
   .header-nav {
@@ -163,4 +216,4 @@ body {
       text-decoration: underline;
     }
   }
-}
+}

assets/js/nav-accessibility.js

@@ -0,0 +1,16 @@
+// Keyboard accessibility for header nav
+
+let menuItems = document.querySelectorAll('li.dropdown');
+let dropdownContent = document.querySelectorAll('ul.dropdown-content');
+
+menuItems.forEach((item) => {
+    item.addEventListener('keydown', (event) => {
+        if (event.target.className === "menu-item") {
+            dropdownContent.forEach((item => {
+                item.style.display = "";
+            }))
+            let menuContent = event.target.nextElementSibling.children[0];
+            menuContent.style.display = "block";
+        }
+    });
+});