docs/components/top-bar.html.erb in zurb-foundation-4.0.3 vs docs/components/top-bar.html.erb in zurb-foundation-4.0.4
- old
+ new
@@ -6,10 +6,72 @@
<% @page_title = "Top Bar" %>
<div class="row">
<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 5</a></li>
+ </ul>
+ </li>
+ <li class="divider"></li>
+ </ul>
+ <!-- Right Nav Section -->
+ <ul class="right">
+ <li class="divider"></li>
+ <li><a href="#">Item 2</a></li>
+ </ul>
+ </section>
+ </nav>
+
+ <hr>
</div>
</div>
<div class="row">
<div class="large-12 columns">
@@ -28,11 +90,11 @@
<h5>Building the Nav</h5>
<p>When building your bar it is good to be aware of how many links your're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>
<h5>Other Elements</h5>
- <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-button</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
+ <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-form</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>
<h5>Sticky Top Bar</h5>
<p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.</p>
<%= code_example '
@@ -175,10 +237,11 @@
$topbar-dropdown-bg: #333;
$topbar-dropdown-link-color: #fff;
$topbar-dropdown-toggle-size: 5px;
$topbar-dropdown-toggle-color: #fff;
$topbar-dropdown-toggle-alpha: 0.5;
+$dropdown-label-color: #555;
/* Top menu icon styles */
$topbar-menu-link-transform: uppercase;
$topbar-menu-link-font-size: emCalc(13px);
$topbar-menu-link-weight: bold;
@@ -194,10 +257,10 @@
<p><strong>Note:</strong> <code>emCalc();</code> is a function we wrote to convert <code>px</code> to <code>em</code>. It is included in <strong>_foundation-global.scss</strong>.</p>
<hr>
<h3>Using the JavaScript</h3>
- <p>You don't need ths JS to create reveal modals with Foundation. The only reason you'll need to include <code>foundation.reveal.js</code> is if you want to add the ability to close an alert. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the alert plugin. Above your closing <code></body></code> tag include the following line of code and make sure you have the JS in your directory.</p>
+ <p>You'll need to include <code>foundation.topbar.js</code> to get the topbar to play nice. You'll also need to make sure to include <code>zepto.js</code> and <code>foundation.js</code> above the topbar plugin. Above your closing <code></body></code> tag include the following line of code and make sure you have the JS in your directory.</p>
<p><a href="../javascript.html" title="How to install Foundation JavaScript">Read how to install Foundation JavaScript</a></p>
<p>Required Foundation Library: <code>foundation.topbar.js</code></p>
\ No newline at end of file