docs/components/top-bar.html.erb in zurb-foundation-4.1.6 vs docs/components/top-bar.html.erb in zurb-foundation-4.2.0
- old
+ new
@@ -74,11 +74,11 @@
<div class="row">
<div class="large-12 columns">
<h3>Build With HTML Classes</h3>
- <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>
+ <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS. The top bar is hoverable by default but can be changed to a click event by adding a simple <code>data-option="is_hover:false"</code> to the <code><nav></code> element. <a href="#clickable">See an example below</a>.</p>
<h5>Basic Needs</h5>
<p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, a <code>ul class="right/left</code> element enclosed in a <code>section class="top-bar-section"</code>, and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>
<h5>Positioning the Bar</h5>
@@ -89,11 +89,11 @@
<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-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>
+ <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. <strong>Note:</strong> If you are using Scss, you can control the default <code>sticky</code> class by adjusting the <code>$topbar-sticky-class</code> variable. <strong>Make sure the JS variable for <code>stickyClass</code> matches whatever class you use in the variable.</strong></p>
<%= code_example '
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
@@ -204,56 +204,133 @@
</li>
</ul>
</section>
</nav>', :html %>
+ <a name="clickable"></a>
+ <h4>Clickable Topbar</h4>
+ <p>You can now make the top bar clickable by adding a data-attribute to the nav element. Here's an example:</p>
+ <nav class="top-bar" data-options="is_hover:false">
+ <ul class="title-area">
+ <!-- Title Area -->
+ <li class="name">
+ <h1><a href="#">Clickable 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">
+
+ <!-- Right Nav Section -->
+ <ul class="right">
+ <li class="divider hide-for-small"></li>
+ <li class="has-dropdown"><a href="#">Main Item 1</a>
+
+ <ul class="dropdown">
+ <li><label>Dropdown Level 1 Label</label></li>
+ <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
+
+ <ul class="dropdown">
+ <li><a href="#">Dropdown Level 2a</a></li>
+ <li><a href="#">Dropdown Level 2b</a></li>
+ <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
+
+ <ul class="dropdown">
+ <li><a href="#">Dropdown Level 3a</a></li>
+ <li><a href="#">Dropdown Level 3b</a></li>
+ <li><a href="#">Dropdown Level 3c</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Dropdown Level 2d</a></li>
+ <li><a href="#">Dropdown Level 2e</a></li>
+ <li><a href="#">Dropdown Level 2f</a></li>
+ </ul>
+ </li>
+ <li><a href="#">Dropdown Level 1b</a></li>
+ <li><a href="#">Dropdown Level 1c</a></li>
+ <li class="divider"></li>
+ <li><label>Dropdown Level 1 Label</label></li>
+ <li><a href="#">Dropdown Level 1d</a></li>
+ <li><a href="#">Dropdown Level 1e</a></li>
+ <li><a href="#">Dropdown Level 1f</a></li>
+ <li class="divider"></li>
+ <li><a href="#">See all →</a></li>
+ </ul>
+ </li>
+ </ul>
+ </section>
+ </nav>
+
+<%= code_example '
+<nav class="top-bar" data-options="is_hover:false">', :html %>
+ <hr>
+
<h4>Available SCSS Variables</h4>
<p>We do include SCSS variable to help you control some of the styles for the top bar. Overall the styles are written mobile first, so they are much easier to override than the previous iteration of the top bar.</p>
<%= code_example '
/* Background color for the top bar */
-$topbar-bg: #111;
+$topbar-bg: #111;
/* Height and margin */
-$topbar-height: 45px;
-$topbar-margin-bottom: emCalc(30px);
+$topbar-height: 45px;
+$topbar-margin-bottom: emCalc(30px);
/* Control Input height for top bar */
-$topbar-input-height: 2.45em;
+$topbar-input-height: 2.45em;
/* Controlling the styles for the title in the top bar */
-$topbar-title-weight: bold;
-$topbar-title-font-size: emCalc(17px);
+$topbar-title-weight: bold;
+$topbar-title-font-size: emCalc(17px);
+/* Style the top bar dropdown elements */
+$topbar-dropdown-bg: #222;
+$topbar-dropdown-link-color: #fff;
+$topbar-dropdown-link-bg: lighten($topbar-bg, 5%);
+$topbar-dropdown-toggle-size: 5px;
+$topbar-dropdown-toggle-color: #fff;
+$topbar-dropdown-toggle-alpha: 0.5;
+
/* Set the link colors and styles for top-level nav */
-$topbar-link-color: #fff;
-$topbar-link-weight: bold;
-$topbar-link-font-size: emCalc(13px);
+$topbar-link-color: #fff;
+$topbar-link-color-hover: #fff;
+$topbar-link-color-active: #fff;
+$topbar-link-weight: bold;
+$topbar-link-font-size: emCalc(13px);
+$topbar-link-hover-lightness: -30%; /* Darken by 30% */
+$topbar-link-bg-hover: darken($topbar-bg, 3%);
+$topbar-link-bg-active: darken($topbar-bg, 3%);
-/* Style the top bar dropdown elements */
-$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;
+$topbar-dropdown-label-color: #555;
+$topbar-dropdown-label-text-transform: uppercase;
+$topbar-dropdown-label-font-weight: bold;
+$topbar-dropdown-label-font-size: emCalc(10px);
/* Top menu icon styles */
-$topbar-menu-link-transform: uppercase;
-$topbar-menu-link-font-size: emCalc(13px);
-$topbar-menu-link-weight: bold;
-$topbar-menu-link-color: #fff;
-$topbar-menu-icon-color: #fff;
-$topbar-menu-link-color-toggled: #888;
-$topbar-menu-icon-color-toggled: #888;
+$topbar-menu-link-transform: uppercase;
+$topbar-menu-link-font-size: emCalc(13px);
+$topbar-menu-link-weight: bold;
+$topbar-menu-link-color: #fff;
+$topbar-menu-icon-color: #fff;
+$topbar-menu-link-color-toggled: #888;
+$topbar-menu-icon-color-toggled: #888;
/* Transitions and breakpoint styles */
-$topbar-transition-speed: 300ms;
-$topbar-breakpoint: emCalc(940px); // Change to 9999px for always mobile layout', :css %>
+$topbar-transition-speed: 300ms;
+$topbar-breakpoint: emCalc(940px); /* Change to 9999px for always mobile layout */
+$topbar-media-query: "only screen and (min-width:"#{$topbar-breakpoint}")";
- <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>
+/* Divider Styles */
+$topbar-divider-border-bottom: solid 1px lighten($topbar-bg, 10%);
+$topbar-divider-border-top: solid 1px darken($topbar-bg, 10%);
+/* Sticky Class */
+$topbar-sticky-class: ".sticky";', :css %>
+
+ <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>_variables.scss</strong>.</p>
+
<hr>
<h3>Using the JavaScript</h3>
<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>
@@ -261,17 +338,19 @@
<p>Required Foundation Library: <code>foundation.topbar.js</code></p>
<h5>Optional JavaScript Configuration</h5>
- <p>Top bar options can only be passed in during initialization at this time.</p>
+ <p>Top bar now supports <code>data-options</code> configuration.</p>
<%= code_example "
{
index : 0,
stickyClass : 'sticky',
custom_back_text: true, // Set this to false and it will pull the top level link name as the back text
back_text: 'Back', // Define what you want your custom back text to be if custom_back_text: true
+ is_hover: true,
+ scrolltop : true, // jump to top when sticky nav menu toggle is clicked
init : false
}", :js %>
</div>
</div>
</div>