CODEWITHSUNDEEP
cssresponsive-designsasszurb-foundation
Brett DeWoody
Brett DeWoody

Reputation: 62743

Foundation 5 - Evenly-spaced Top Bar nav items

Zurb Foundation's top-bar is extremely useful. It works great as a main navigation for a site/app, and collapses to a mobile-friendly format on smaller devices.

Its one major shortcoming is the ability to make the top-bar full-width with evenly spaced nav items. Is there a way to make the top-bar full-width and the nav items evenly spaced?

Example

If the top-bar has 6 nav items (width varying length titles) and we're using the default width of 1000px for .rows (with 15px gutters) the 6 nav items should evenly space themselves across the 970px top-bar. The first and last nav items should be left and right justified respectively.

As the screen size reduces the nav items should shrink in width to maintain their even spacing until the $topbar-breakpoint causes the top-bar to collapse to the mobile format.

Requirements

Here's a jsFiddle with the Foundation 5 resources already loaded.

Upvotes: 5

Views: 3896

Answers (3)

Stan Quinn
Stan Quinn

Reputation: 503

Here's a solution using some built in foundation classes...basically I added 4 classes to your fiddle.

http://jsfiddle.net/x6jvS/7/

<div class="row">
<div class="small-12 columns">
<nav class="top-bar  contain-to-grid" data-topbar>
<ul class="title-area">
<li class="name">
  <h1><a href="#"></a></h1>
</li>
<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
</ul>

<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="full-width web button-group large-block-grid-6">
  <li><a href="#">Link 1</a></li>
  <li class="has-dropdown">
    <a href="#">Long Link 2</a>
    <ul class="dropdown">
      <li><a href="#">First link in dropdown</a></li>
    </ul>
  </li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Even Longer Link 5</a></li>
  <li><a href="#">Link 6</a></li>
</ul>
</section>
</nav>
</div>
</div>

added class "contain-to-grid" to the nav element added classes "web button-group large-block-grid-6" to the "section.top-bar-section > ul" (first ul in that section)

and blammo...seems to work fairly well cross-browser

Upvotes: 0

Mathias
Mathias

Reputation: 5672

Here is another solution. It is based on flexbox which hasn't been supported by browser for very long and it is still only a candidate recommendation: CSS Flexible Box Layout Module

jsFiddle

If you provide a good fallback, like the original Foundation CSS it can be used.

Update

You could also use this jQuery solution as a fallback as I haven't found any polyfills for flexbox: http://jsfiddle.net/borglinm/x6jvS/14/

.top-bar-section > ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
}
.top-bar-section > ul > li {
    float: none;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
}
.top-bar-section > ul > li > a {
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    overflow: hidden;
}

Upvotes: 5

Irvin Zhan
Irvin Zhan

Reputation: 824

Here's a solution that might need a bit of tweaking

JSFiddle Here

Sticking to the CSS-only requirements, the only feasible way I can think of is using CSS tables. We create nested table, table-rows and table-cells. The table-cells, by default, will try to maintain equal spacing between itself and other table-cells.

The table-row needs to span the entire topbar minus any Foundation topbar title-areas. To do this, we use an overflow: hidden trick to make the .top-bar-section span the remaining width of the topbar. Finally, we wrap our topbar with a div that has display: table and spans its parent.

Here's the relevant CSS

.top-bar-section {
    overflow: hidden;
}
.center-topbar {
    display: table;
    width: 100%;
}
.center-topbar .full-width {
    display: table-row;
}
.center-topbar .full-width li {
    display: table-cell;
    float: none;
    text-align: center;
}

What we are left is with a topbar whose elements are centered and have widths that vary depending on its contents. The $topbar-breakpoint works as normal as well.

Improvements?

Works on Chrome + Safari well on my end (OS X). For Firefox, the dropdown arrow is not displaying due to the removal of the left float. Just wanted to post this to get the conversation going. Anyone have any improvements?

Upvotes: 2

Related Questions