Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo
Let's take a look at the top bar included within the Foundation framework. As there’s quite a lot to cover we’ll break it down into easy chunks.
Top Bar, or no Top Bar
Foundation's top bar is a very useful little component, but it's by no means obligatory to use it in your builds. I'd estimate that I've made use of it in around 40% of the projects I've built with Foundation. Give careful consideration to whether or not it fits the needs of your project; the top bar component is as easy to style as any other, but the interaction is pretty much set.
The Essential Structure
To begin building up the top bar we need a
<nav> tag, with the requisite class of "top-bar".
Inside that lies a
<ul> and two
<li>’s, one of which will hold our title/logo the other our "mobile" menu.
Note: you can remove either the class "menu-icon", or the content "Menu", if you prefer to have just one of the two showing.
<nav class="top-bar"> <ul class="title-area"> <li class="name"> <h1><a href="#">Top Bar Title </a></h1> </li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a> </li> </ul> </nav>
Adding Parent Links
Adding parent links is our next objective, so before our closing nav tag add in a
<section> with the class "top-bar-section". In this section we need to add an unordered list with several list items.
Foundation has a useful class "divider" which can be applied to empty list items, allowing you to separate each menu link with an attractive line. They're used in the following example to divide our menu links.
You’ll also notice that the ul has the "left" class applied to it, which sends things to the left. You could, for example, have two sets of menu links, one floating left and one (using the “right” class) floating right.
<section class="top-bar-section"> <ul class="left"> <li class="divider"></li> <li class="active"><a href="#">Main Item 1</a></li> <li class="divider"></li> <li><a href="#">Main Item 2</a></li> <li class="divider"></li> </ul> </section>
All the links we've added so far will be displayed horizontally along the bar. On smaller screens they'll become a dropdown, activated by the Menu button we added earlier.
Each list item can contain a nested unordered list for sub menus. In order for this to work and be displayed properly, the “has-dropdown” class must be applied to the parent link, with the class "dropdown" being applied to the nested unordered list:
<li class="has-dropdown"><a href="#">Main Item 3</a> <ul class="dropdown"> <li><label>Dropdown Level 3 Label</label></li> <li><a href="#">Dropdown Level 3a</a></li> <li><a href="#">Dropdown Level 3b</a></li> <li class="divider"></li> <li><a href="#">Dropdown Level 3c</a></li> </ul> </li> <li class="divider"></li>
Note: To mark the current page link active, add an “active” class.
Submenus are displayed as a standard dropdown under "large screen" circumstances. On smaller screens they slide in from "off screen".
In spite of being referred to as the ‘top’ bar, you can place this component anywhere in your layout. If you need the bar to stay fixed on the page whilst you scroll, you can wrap the top bar in a div with the class “fixed”. Alternatively, if you want to keep the top bar within your main container you can set the width of the top bar to the grid width by using the “contain-to-grid” class. Happily, you can use both of these classes (“contain-to-grid” and “fixed”) in combination.
Let’s say you want the top bar in the center of the layout, but need the bar to stick to the top of the page when the user scrolls down. This is possible by wrapping the top bar in the “contain-to-grid” and “sticky” classes.
<div class="contain-to-grid sticky"> <nav class="top-bar"> <!--nav content--> </nav> </div>
Adding a Search Input
If all those handy features weren’t enough, you might also want to add an input which you could use for search, or a mailing list signup, or anything you want. When adding form elements within a menu list item, we need to add a class of “has-form”. You can see from the code below that we are actually making use of the grid within the top bar. This makes placement of the elements easy - and of course responsive, as the columns shift layout on small screens.
<li class="has-form"> <form> <div class="row collapse"> <div class="small-8 columns"> <input type="text"> </div> <div class="small-4 columns"> <a href="#" class="alert button">Search</a> </div> </div> </form> </li>
Breadcrumbs are commonplace on CMS-based websites, such as Wordpress, where multi-level page hierarchy can get a little complex. These can be used in any Foundation project by simply adding the “breadcrumbs” class to either a
<ul> tag or a
<nav> tag. When using the unordered list, all links need to be in list items, whereas the links inside the nav element need to be anchor tags.
The only additional classes included in the breadcrumb markup are “unavailable” and “current”.
<ul class="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li class="unavailable"><a href="#">Gene Splicing</a></li> <li class="current"><a href="#">Cloning</a></li> </ul>
Coming up Next
The top bar is very flexible and is simple enough to incorporate in any of your foundation-based projects. In the next part of this session we’ll talk about buttons, dropdowns and the clearing plugin.