Skip to content
This repository has been archived by the owner on Sep 10, 2019. It is now read-only.

Commit

Permalink
Menu bar: fix alignment and flexbox issues, clean up docs page, fixes #…
Browse files Browse the repository at this point in the history 
…567
  • Loading branch information
@gakimball
gakimball committed Apr 16, 2015
1 parent f185594 commit 7e6cfd1
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 29 deletions.
52 changes: 24 additions & 28 deletions docs/templates/menu-bar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,7 @@ <h4>Coloring</h4>
<li><a href="#">Menu</a></li>
<li><a href="#">Bar</a></li>
</ul>
<br>
<ul class="primary menu-bar">
<li><a href="#">Primary</a></li>
<li><a href="#">Menu</a></li>
Expand All @@ -166,60 +167,55 @@ <h4>Coloring</h4>

<h4>Icons</h4>

<p>The menu bar supports icons, which can be positioned above, below, to the left, or to the right of the text. Icons can also be used standalone.</p>
<p>The menu bar supports icons, which can be positioned above, below, to the left, or to the right of the text. Icons can also be used standalone&mdash;just drop the image into the <code>&lt;a&gt;</code> by itself.</p>

<ul class="primary menu-bar">
<li><a href="https://twitter.com/ZURBfoundation"><span class="fi-social-twitter" style="font-size: 2rem;"></span>Twitter</a></li>
<li><a href="https://www.facebook.com/ZURB"><span class="fi-social-facebook" style="font-size: 2rem;"></span>Facebook</a></li>
<li><a href="https://github.com/zurb/foundation-apps"><span class="fi-social-github" style="font-size: 2rem;"></span>GitHub</a></li>
</ul>

<br>

<p>By default, the icon is positioned above the text. However, this can be changed by adding the classes <code>icon-left</code>, <code>icon-right</code>, or <code>icon-bottom</code> to the menu bar container.</p>

<div class="grid-block">
<div class="small-12 medium-6 grid-content">
<hljs>
<ul class="icon-left primary menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>
</hljs>
</div>
<div class="small-12 medium-6 grid-content">
<ul class="icon-left primary menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>
<ul class="icon-right dark menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>
</div>
</div>

<ul class="icon-left primary menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>
<br>
<ul class="icon-right dark menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>

<br>

<p>These classes can also be used responsively! In the below code example, the menu bar's icons are top-aligned on small screens, and left-aligned on large screens.</p>

<div class="grid-block">
<div class="small-12 medium-6 grid-content">
<hljs>
<ul class="icon-top large-icon-left menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>
</hljs>
</div>
<div class="small-12 medium-6 grid-content">
<ul class="icon-top large-icon-left menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>
</div>
</div>

<ul class="icon-top large-icon-left menu-bar">
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Thumbs Up</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Like</a></li>
<li><a href="#"><img zf-iconic icon="thumb" size="small" class="iconic-color-primary">Bro!</a></li>
</ul>

<hr>

Expand Down
20 changes: 19 additions & 1 deletion scss/components/_menu-bar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,13 @@ $menubar-icon-spacing: $menubar-item-padding !default;
// Menu item
> li {
// This flex setting makes each item an equal width
flex: 1 0 auto;
flex: 1 0 0;
align-items: center;

// The list item itself is also a flex container, to center links in case they have different height
display: flex;
align-items: stretch;

// Link inside menu item
> a {
display: flex;
Expand All @@ -61,12 +65,20 @@ $menubar-icon-spacing: $menubar-item-padding !default;
@if $orientation == horizontal {
overflow-x: hidden;
flex-flow: row nowrap;

> li > a {
flex: 1 0 0;
}
> li > a {
flex-flow: column nowrap;
}
}
@else {
flex-flow: column nowrap;

> li {
flex: 1 0 auto;
}
> li > a {
flex-flow: row nowrap;
}
Expand Down Expand Up @@ -132,10 +144,16 @@ $menubar-icon-spacing: $menubar-item-padding !default;
// Sizing
> img, > .iconic {
margin: 0;

@if $menubar-icon-size != false {
width: $menubar-icon-size;
height: $menubar-icon-size;
}

// Remove any margins from standalone icons
&:first-child:last-child {
margin: 0;
}
}

// Position
Expand Down

0 comments on commit 7e6cfd1

Please sign in to comment.