Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.
Advertisement

Build a Top Bar Off-Canvas Navigation With Foundation 5

by


In an earlier tutorial, we learned How to Customize the Foundation 4 Top Bar using CSS. Since then ZURB have released Foundation 5; faster, leaner and more powerful than its predecessor.  What’s also noticeable is that ZURB have brought back the Off Canvas functionality, which could be found in Foundation 3.

Today, we are going to combine the off-canvas feature with our top bar navigation. The result will be a nice custom navigation for desktop users and a sleek off -canvas menu for tablet and mobile users.

Note: The functionality that we use here doesn't work for IE8 and lower. I've included a fix for IE9 in the resources listed at the end of the tutorial.

Requirements

In order to follow this tutorial you'll need some intermediate experience in the following:

  • Basic understanding of Foundation and The Grid System
  • Knowledge of working with a Sass and Compass Foundation Project

Getting Started

Setting up the Environment

If you haven’t already, go ahead and set up Compass and Sass using the Foundation Sass documentation if you need direction. If you have done that already, here’s the quick setup for creating a new Foundation 5 project using the Command Prompt:

Ruby Command Prompt

Go to your preferred directory

cd c:/user/your-working-environment

Use this command to create your project

foundation new your-project

Go to your newly created project file

cd your-project

And use this command to get compass to watch and compile your Sass files

compass watch

If everything went successfully, your directory should look something like this:

Foundation 5 Project Directory

Only one thing remains and that is to create our style.scss. Do this by creating a new file in the scss folder and naming that file style.scss. We'll need this file later. If you have Compass running, your style.scss should already be compiled to a style.css file in your stylesheets folder. Great, we have everything setup, let’s get started with coding our general HTML structure.

Setting up the HTML Structure

Step 1: General Markup

Open up your index.html and remove all of the content between the body tags, except for the scripts just before the </body>. We need them for all the Foundation functions to work. Secondly, go ahead and add the following line of code in the <head>, to make sure we load in our CSS file.

<link rel="stylesheet" href="stylesheets/style.css" />

With that set up, let's add a couple of sections and provide our page with some dummy content. We'll start with some basics, by adding a header, main, service, call to action, footer and copyright section.

<!-- HEADER SECTION -->
<header>
	<div class="row">
	    <div class="small-12 medium-12 large-12 columns">
			<div class="logo">
				<h1>Foundation 5 Topbar / Offcanvas menu</h1>
			</div> <!-- END DIV.LOGO -->
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</header> <!-- END HEADER -->

<!-- MAIN SECTION -->
<section class="main-section">
	<!-- CONTENT SECTION -->
	<section class="full-width content-section">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<h2>Moving aside for the Offcanvas people!</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, minus molestias dolores blanditiis esse? Quam, accusamus, quo, eum, ipsum voluptatibus aliquam perspiciatis qui porro est sit eligendi suscipit. Expedita, eligendi, laboriosam animi itaque accusantium repudiandae dicta ullam quia ipsum amet quam nesciunt non! Porro, fuga molestiae quaerat accusantium nesciunt omnis.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, minima, quidem repellendus facilis dignissimos laboriosam doloribus sequi tempora iusto facere maxime quasi est ex qui commodi nobis aliquid id eius magnam consectetur. Ut deserunt repellat asperiores dolores odio! Incidunt, esse, distinctio modi ratione facilis iusto tempora saepe nisi nostrum culpa velit eaque quos dolore repellat facere accusamus architecto iure similique numquam autem asperiores error cumque eum. Dolor, minima aspernatur autem eaque ipsa officiis rem! Suscipit, esse, quos. Quos, perferendis, iure nobis modi perspiciatis enim error nulla asperiores dignissimos harum. Dolor, non rem in nobis illum id hic laboriosam blanditiis aliquid!</p>
			</div> <!-- END 12 COLUMNS -->
		</div> <!-- END ROW -->
	</section> <!-- END SECTION.CONTENT-SECTION -->

	<!-- SERVICES SECTION -->
	<section class="full-width services-section">
		<div class="row">
			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #1</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, nihil nemo tempore voluptatum veritatis corrupti id doloremque. Saepe, in sequi voluptatem impedit rem omnis aliquam?</p>
			</div>

			<div class="small-12 medium-4 large-4 columns">
				<h3>Service #3</h3>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate ducimus aut commodi eius! Sequi, magni labore ea iusto quibusdam autem repellendus ipsum dolorem quasi maxime!</p>
			</div>

		</div> <!-- END ROW -->
	</section> <!-- END SECTION.FULL-WIDTH.SERVICES-SECTION -->

	<!-- CALL 2 ACTION -->
	<section class="full-width call-to-action">
		<div class="row">
			<div class="small-12 medium-12 large-12 columns">
				<a href="#" class="button radius">Get in touch with us!</a>
			</div>
		</div>
	</section>
</section> <!-- END SECTION.MAIN-SECTION -->

<!-- FOOTER SECTION -->
<footer>
	<div class="row">
    	<div class="small-12 medium-4 large-4 columns">
		    <h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>

		<div class="small-12 medium-4 large-4 columns">
			<h4>Foundation</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, veniam, asperiores fugit quas quaerat soluta in quibusdam placeat incidunt suscipit esse neque quisquam eaque rem!</p>
		</div>
	</div> <!-- END ROW -->
</footer> <!-- END FOOTER -->

<!-- COPYRIGHT SECTION -->
<section class="full-width copyright-section">
	<div class="row">
	    <div class="small-12 columns">
			<p>&copy; 2014</p>
		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.FULL-WIDTH COPYRIGHT-SECTION -->

Here we've added a header section with a logo,  then a main section divided into the content section, three services and a call to action. Lastly there's a footer section with three columns and a copyright section. Straight-forward markup so far, let's get to the top bar!

Step 2: Top Bar Markup

We're going to wrap our Top Bar within a section with the class navigation-section, for styling purposes. We are also going to give this section another class: show-for-large-up. This makes sure that the Top Bar is only displayed for devices of a certain minimum width and higher. This is one of the many Visibility Classes that Foundation provides us with (you can read more about these in the Foundation component documentation). Now for the markup:

<!-- LARGE SCREEN TOP BAR MENU -->
<section class="navigation-section show-for-large-up">
	<div class="row">
		<div class="large-12 columns">
			
            <!-- TOP BAR INITIALIZATION -->
			<nav class="top-bar" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1></h1>
					</li>
				</ul> <!-- END UL.TITLE-AREA -->

				<!-- TOP BAR MENU ELEMENTS -->
				<section class="top-bar-section">
					<ul class="left">
						<li class="active"><a href="index.html">Home</a></li>
						<li class="has-dropdown">
							<a href="blog.html">Blog</a>
							<ul class="dropdown">
								<li><a href="blog.html">Archive</a></li>
								<li><a href="post.html">Single</a></li>
							</ul>
						</li>
						<li class="has-dropdown">
							<a href="page.html">Page</a>
							<ul class="dropdown">
								<li><a href="page.html">Full-wdith</a></li>
								<li><a href="sidebar-left.html">Left Sidebar</a></li>
								<li><a href="sidebar-right.html">Right Sidebar</a></li>
							</ul>
						</li>
						<li><a href="portfolio.html">Portfolio</a></li>
						<li class="has-dropdown">
							<a href="#">Dropdown</a>
							<ul class="dropdown">
								<li><a href="#">First link in dropdown</a></li>
								<li><a href="#">Second link in dropdown</a></li>
								<li><a href="#">Third link in dropdown</a></li>
							</ul>
						</li>
					</ul>
				</section> <!-- END SECTION.TOP-BAR-SECTION -->
			</nav> <!-- END NAV.TOP-BAR -->

		</div> <!-- END 12 COLUMNS -->
	</div> <!-- END ROW -->
</section> <!-- END SECTION.NAVIGATION-SECTION -->

Note: Do include the data-topbar within your nav. This way we make sure the JavaScript for our Top Bar works properly (such as the dropdown, for example).

Step 3: Off-Canvas Markup

Our off-canvas menu will be hidden beyond the boundaries of the viewport. The moment we press menu, Offcanvas will slide in (from the left in our case) and move the page content to the right. In our setup we are going to exclude the header and the footer in this movement. Only the content area will be moved aside, leaving the header and footer in place. 

Additionally, when scrolling down, our header (which may contain a logo and maybe other content), will appear fixed to the top of the page (Note: The page should contain enough content for this to work, because otherwise the footer section would also float above our Offcanvas menu). This means we have to "wrap" Off-canvas around our main content section. After the Top Bar navigation section and before our main content section, put the following HTML:

<!-- OFF CANVAS SECTIONS WRAPPING THE MAIN CONTENT -->
<div class="off-canvas-wrap">
    <div class="inner-wrap">

		<!-- OFF CANVAS MENU BAR -->
		<nav class="tab-bar hide-for-large-up">

			<section class="left-small">
				<a class="left-off-canvas-toggle menu-icon" ><span></span></a>
			</section>

			<section class="right tab-bar-section">
				<h1 class="title">Menu</h1>
			</section>

		</nav> <!-- END NAV.TAB-BAR HIDE-FOR-LARGE-UP -->

		<!-- OFF CANVAS MENU -->
		<aside class="left-off-canvas-menu">
			<ul class="off-canvas-list">
				<li><label>Navigation</label></li>
				<li><a href="index.html">Home</a></li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="blog.html">Blog</a>
					<ul class="off-canvas-list">
						<li><a href="blog.html">Archive</a></li>
						<li><a href="post.html">Single</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li class="has-dropdown"><a href="page.html">Page</a>
					<ul class="off-canvas-list">
						<li><a href="page.html">Full-width</a></li>
						<li><a href="sidebar-left.html">Left Sidebar</a></li>
						<li><a href="sidebar-right.html">Right Sidebar</a></li>
					</ul>
				</li>
			</ul>
			<ul class="off-canvas-list">
				<li><a href="portfolio.html">Portfolio</a></li>
			</ul>
		</aside>

Let's break it down. We've created two div elements; one with the class off-canvas-wrap and one with the class inner-wrap.  The off-canvas-wrap hides our content until the menu button is pressed. The inner wrap contains our nav menu bar, our left side off-canvas menu and the main content section. We've given the nav a class of hide-for-large-up, to make sure it only shows for medium and small set devices. By giving the aside a class of left-off-canvas-menu, we make sure that our off-canvas menu appears on the left of the screen. The menu items in our off-canvas menu are similar to the top bar. For off-canvas we use an unordered list with a class of off-canvas-list to make the magic happen.

All there's left to do is to give the user a way to close the Offcanvas menu. After that we close the off-canvas-wrap and the inner-wrap divs. Add this right after closing the main section.

    <!-- CLOSE THE OFF-CANVAS MENU -->
    <a class="exit-off-canvas"></a>

	</div>
</div> <!-- END OFF CANVAS -->

Step 4: Results So Far

Let's open up our browser and locate the index.html file we've just edited. The result should look something like the screenshots below (try it, resize your browser!)

HTML Top Bar
HTML Offcanvas

Setting up Sass

Alright, we have a fully functioning top bar for desktop users and a nice, sleek off-canvas menu for users of smaller devices like tablets and phones. However, our page doesn't really look like a real web page yet, so let's go ahead and add some flavor to it.

Step 1: General Styling

First, we'll give our general sections (header, navigation, main, footer and copyright) some color. We'll also give our body a subtle background color and make a full-width class to have its width set to 100%. In the HTML we've added that full-width class to the different sections, to make sure they stretch to the borders of the browser. Take a look at the Sass below:

body {
    background-color: #f1f1f1;
}

.full-wdith {
	min-width: 100%;
}

header {
	background: url('../images/stary-bg.png') #074e68;
	min-height: 175px;
	h1 {
		color: #fff;
		padding-top: 50px;
	}
}

.navigation-section {
	background-color: #333;
	.top-bar {
		li {
			text-transform: uppercase;
		}
	}
}

.main-section {
	padding: 30px 0 25px 0;
}

footer {
	background-color: #074e68;
	padding: 50px 0 40px 0;
	h4, p {
		color: #fff;
	}
}

.copyright-section {
	background-color: #333;
	color: #fff;
	padding: 25px 0 0 0;
}

Note: To add the Starry BG, download the source files!

We gave our design a little more breathing room by adding some padding and made a full-width design by giving all the sections a background color and a minimum width of 100%. We also gave the menu items an uppercase text-transform.

Step 2: Top Bar Styles Using _settings.scss

To style our top bar, let's dive into the _settings.scss file. Depending on the code editor you're using, use the find option and type in "Topbar". Here you can find all the settings to alter the standard top bar. For this tutorial, we're going to use two different options; one to give our top bar a little more height and another to increase the font size a little bit. Uncomment and alter the following two settings:

$topbar-height: 65px;
$topbar-link-font-size: rem-calc(15);

Step 3: Off-Canvas Styles Using _setting.scss

We're also going to use the settings file to adjust our off-canvas menu. The standard off-canvas markup is pretty nice as it is, but let's make sure the nav section is the same height as our top bar's nav section. In adition to that, we will have to move the hamburger icon a little bit, so it stays centered from the top. In the settings file, find and type "Off-canvas". Uncomment and alter the following two settings:

$tabbar-height: rem-calc(65);
$tabbar-hamburger-icon-top: rem-calc(16);

Step 4: Enjoy Your Results

Save the file, let compass compile your files and refresh your browser. Now our page has a little more juice and it's all powered by the great top bar and off-canvas! Your results should look something like this:

Sass Top Bar
Sass Offcanavs

Conclusion

We've created a nice, responsive page using Foundation's top bar and off-canvas, adding a little Sass styling of our own to give it some juice and tweeking the page using the _settings.scss file. 

Obviously, we can do a lot more with the _settings.scss then I just demonstrated. Go ahead and play around with the settings to see how easily you can customize the Foundation elements in your site, or try them out in this demo to further customize your top bar / off-canvas menu. Have fun!

Rescources



Advertisement