updated topbar docs example and title style

luisfdeandrade · Mar 2, 2013 · f5623c6 · f5623c6
1 parent 8ac9ecf
commit f5623c6
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 0 deletions.
diff --git a/docs/components/top-bar.html.erb b/docs/components/top-bar.html.erb
@@ -8,6 +8,69 @@
       <div class="large-12 columns">
         <h1><%= @page_title %></h1>
         <h4 class="subheader">The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.</h4>
+
+        <nav class="top-bar">
+          <ul class="title-area">
+            <!-- Title Area -->
+            <li class="name">
+              <h1><a href="/">Top Bar</a></h1>
+            </li>
+            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
+            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
+          </ul>
+
+          <section class="top-bar-section">
+            <ul class="left">
+              <li class="divider"></li>
+              <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a>
+
+                <ul class="dropdown">
+                  <li><label>Level One</label></li>
+                  <li><a href="#">Sub-item 1</a></li>
+                  <li><a href="#">Sub-item 2</a></li>
+                  <li class="divider"></li>
+                  <li><a href="#">Sub-item 3</a></li>
+                  <li class="has-dropdown"><a href="#">Sub-item 4</a>
+
+                    <ul class="dropdown">
+                      <li><label>Level Two</label></li>
+                      <li class="has-dropdown"><a href="#">Sub-item 1</a>
+
+                        <ul class="dropdown">
+                          <li><label>Level Three</label></li>
+                          <li class="has-dropdown"><a href="#">Sub-item 1</a>
+
+                            <ul class="dropdown">
+                              <li><label>Level Four</label></li>
+                              <li><a href="#">Sub-item 1</a></li>
+                            </ul>
+                          </li>
+                          <li><a href="#">Sub-item 2</a></li>
+                          <li><a href="#">Sub-item 3</a></li>
+                          <li class="divider"></li>
+                          <li><a href="#">Sub-item 4</a></li>
+                        </ul>
+                      </li>
+                      <li><a href="#">Sub-item 2</a></li>
+                      <li><a href="#">Sub-item 3</a></li>
+                      <li><a href="#">Sub-item 4</a>
+                    </ul>
+                  </li>
+                  <li><a href="#">Sub-item 1</a></li>
+                </ul>
+              </li>
+              <li class="divider"></li>
+            </ul>
+            <!-- Right Nav Section -->
+            <ul class="right">
+              <li><a href="#">Item 2</a></li>
+              <li class="divider"></li>
+              </li>
+            </ul>
+          </section>
+        </nav>
+
+        <hr>
       </div>
     </div>
 

diff --git a/scss/foundation/components/_top-bar.scss b/scss/foundation/components/_top-bar.scss
@@ -286,6 +286,14 @@ $topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")" !defa
         font-weight: normal;
         padding: 8px $topbar-height / 3;
       }
+
+      &.title h5 { margin-bottom: 0;
+        a {
+          color: $topbar-link-color;
+          line-height: $topbar-height / 2;
+          display: block;
+        }
+      }
     }
 
     label {