Adds static navigation

saxifrage · Aug 3, 2015 · 359bd85 · 359bd85
1 parent 8bf671f
commit 359bd85
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 1 deletion.
diff --git a/map/index.html b/map/index.html
@@ -9,6 +9,82 @@
         <script>$(document).ready(Map.init);</script>
     </head>
     <body>
+    <section class="navigation">
+        <nav class="nav primary text-center">
+            <ul class="nav-list">
+                <li class="nav-heading">
+                    <a href="#">Food &amp; Gardening</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Coding &amp; Gaming</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Main Topic</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Main Topic</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Main Topic</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Show All</a>
+                </li>
+            </ul>
+        </nav>
+
+        <nav class="nav secondary text-center">
+            <ul class="nav-list">
+                <li class="nav-heading">
+                    <a href="#">Gardening</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Nutrition</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Locavore</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Food &amp; Security</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Nourishment</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Show All</a>
+                </li>
+            </ul>
+        </nav>
+
+        <nav class="nav tertiary text-center">
+            <ul class="nav-list">
+                <li class="nav-heading">
+                    <a href="#">DIY Gardner</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">WebMD Town Hall</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">St. Francis Garden</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Homegrown Challenges</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Homegrown Hero</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Start a Garden</a>
+                </li>
+                <li class="nav-item">
+                    <a href="#">Show All</a>
+                </li>
+            </ul>
+        </nav>
+    </section>
+
+
+
         <div id="map"></div>
             <div class="tooltip">
             <div class="arrow"></div>

diff --git a/map/map.css b/map/map.css
@@ -1,4 +1,7 @@
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
+.text-center {
+  text-align: center !important; }
+
 * {
   margin: 0;
   padding: 0;
@@ -39,6 +42,46 @@ a.btn {
   background: #0099FF;
   color: #ffffff; }
 
+.navigation {
+  position: absolute; }
+
+nav {
+  float: left;
+  margin: 40px 0px 40px 40px;
+  min-width: 170px; }
+
+.nav li {
+  list-style: none;
+  border-bottom: 1px solid #9a9a9a; }
+
+nav li a {
+  background-color: #808080;
+  color: #ffffff;
+  display: block;
+  padding: 14px 20px; }
+  nav li a:hover {
+    background-color: #676767;
+    color: #ffffff;
+    text-shadow: 0px 0px 12px rgba(255, 255, 255, 0.7); }
+
+.nav-heading {
+  font-weight: 700;
+  margin-bottom: 5px;
+  background-color: #676767; }
+
+.primary {
+  font-size: 18px; }
+
+.secondary {
+  font-size: 16px; }
+
+.tertiary {
+  font-size: 14px; }
+
+.secondary li a,
+.tertiary li a {
+  padding: 10px 20px; }
+
 #map {
   display: table-cell;
   text-align: center;

diff --git a/map/map.scss b/map/map.scss
@@ -1,8 +1,13 @@
 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300);
 
-// Vars // --------------------------------------------------
+// Vars & Helpers // --------------------------------------------------
 $brand-primary: #0099FF;
 
+
+.text-center{
+  text-align: center !important;
+}
+
 // Global // --------------------------------------------------
 
 * { margin: 0; padding: 0; box-sizing: border-box; }
@@ -50,6 +55,56 @@ a.btn{
   color: #ffffff;
 }
 
+// Navigation // --------------------------------------------------
+.navigation{
+  position: absolute;
+}
+nav{
+  float: left;
+  margin: 40px 0px 40px 40px;
+  min-width: 170px;
+}
+
+.nav li{
+  list-style: none;
+  border-bottom: 1px solid lighten(#808080, 10%);
+}
+
+nav li a {
+  background-color: #808080;
+  color: #ffffff;
+  display: block;
+  padding: 14px 20px;
+  &:hover{
+    background-color: darken(#808080, 10%);
+    color: #ffffff;
+    text-shadow: 0px 0px 12px rgba(255,255,255,.7);
+  }
+}
+
+.nav-heading{
+  font-weight: 700;
+  margin-bottom: 5px;
+  background-color: darken(#808080, 10%);
+}
+
+.primary{
+  font-size: 18px;
+}
+
+.secondary{
+  font-size: 16px;
+}
+
+.tertiary{
+  font-size: 14px
+}
+
+.secondary li a,
+.tertiary li a{
+    padding: 10px 20px;
+}
+
 // Map // --------------------------------------------------
 #map {
     display: table-cell;