From 885a2587e9ea4b0ac8230de453dc56ec51b16fa4 Mon Sep 17 00:00:00 2001
From: Ryan Scherf <scherf.ryan@gmail.com>
Date: Tue, 14 Mar 2017 13:07:33 -0500
Subject: [PATCH] Add dropdown to navigation elements for secondary links.

---
 scss/components/_header.scss | 52 ++++++++++++++++++++++++++++++++++++
 styleguide/index.html        | 18 ++++++++++---
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/scss/components/_header.scss b/scss/components/_header.scss
index 8de89f7..e068b35 100644
--- a/scss/components/_header.scss
+++ b/scss/components/_header.scss
@@ -74,6 +74,10 @@ header {
             a {
               text-decoration: none;
             }
+
+            ul.secondary {
+              display: block;
+            }
           }
 
           &:before {
@@ -89,6 +93,54 @@ header {
               @include prefix(mask, url('#{$bpl-svg-path}/check.svg') no-repeat 0 center);
             }
           }
+
+          ul.secondary {
+            display: none;
+            position: absolute;
+            border: 2px solid $nav-border;
+            border-top-width: 0;
+            background: #525252;
+
+            li {
+              display: block;
+              border-top: 2px solid $nav-border;
+
+              a {
+                display: block;
+                opacity: 0.7;
+                color: white;
+                display: block;
+                cursor: pointer;
+                border-top: 1px solid $nav-border;
+                background: rgba(0,0,0,0.2);
+                padding: $padding*2;
+                margin-right: 0;
+
+                @include transition(0.4s, (background), cubic-bezier(0.77, 0, 0.175, 1), 0);
+              }
+
+              &:hover {
+                background-color: rgba(255,255,255,0.1);
+              }
+            }
+
+            @include breakpoint(mobileonly) {
+              display: block;
+              position: static;
+              border-top-width: 1px;
+              border-left-width: 0;
+              border-right-width: 0;
+              border-bottom-width: 0;
+
+              li {
+                border: none;
+
+                a {
+                  padding: $padding*2 $padding*4;
+                }
+              }
+            }
+          }
         }
       }
     }
diff --git a/styleguide/index.html b/styleguide/index.html
index 19d7d91..9baac39 100644
--- a/styleguide/index.html
+++ b/styleguide/index.html
@@ -80,7 +80,17 @@
           <div class="dropdown">
             <nav>
               <ul>
-                <li><a href="#" title="Discover">Discover</a></li>
+                <li>
+                  <a href="#" title="Discover">Discover</a>
+
+                  <ul class="secondary">
+                    <li><a href="#">How it Works</a></li>
+                    <li><a href="#">News</a></li>
+                    <li><a href="#">Jobs</a></li>
+                    <li><a href="#">Contact Us</a></li>
+                  </ul>
+
+                </li>
                 <li><a href="#" title="Blog">Blog</a></li>
               </ul>
             </nav>
@@ -148,7 +158,7 @@
             <a class="dropdown-item" href="/styleguide/modals.html">Modals</a>
 
             <div class="dropdown-divider"></div>
-            
+
           </div>
         </li>
         <li class="nav-item dropdown">
@@ -156,7 +166,7 @@
           <div class="dropdown-menu">
             <a class="dropdown-item" href="/analytics/building_view.html">Building View</a>
             <a class="dropdown-item" href="/analytics/profile.html">Profile</a>
-            
+
           </div>
         </li>
         <li class="nav-item dropdown">
@@ -165,7 +175,7 @@
             <a class="dropdown-item" href="/buildings/index.html">Index</a>
             <a class="dropdown-item" href="/buildings/show.html">Show</a>
             <a class="dropdown-item" href="/buildings/show_blank.html">Show (Blank Slate)</a>
-            
+
           </div>
         </li>
       </ul>
-- 
GitLab