In this article I’ll discuss some more features of the Foundation 3 framework. In the previous article Introduction to Foundation 3 Framework , we saw some of the following features offered by Foundation 3 framework:
- Forming basic HTML sturucture using GRIDS
- Typography
- Buttons
In this articles I’ll cover Navigation using the foundation framework. Refer the article Introduction to Foundation 3 Framework on how to download and setup the Foundation 3 framework in your application.
also read:
Navigation Options in Foundation Framework
The framework provides navigation options for number of situations, like:
- Top Bar
- Navigation Bar
- Vertical Navigation
- Side Navigation
- Sub Navigation
- Pagination
- Breadcrumbs
Let us see an example for each one these in the sections below:
1. Top Bar
This framework provides a fixed bar on the top of the page. By default the responsive layout has width of 940px, but you can change that by updating your Scss settings file or changing it with the customizer upon download. An example is shown in the Listing 1 below:
Listing 1: Top Bar example
<head>
<meta charset="utf-8" />
<!—Defining resoluiton-->
<meta name="viewport" content="width=device-width" />
<title>Example Grid Foundation.</title>
<!-- Including CSS files -->
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">
<script src="foundation/javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div class="row">
<div class="twelve columns">
<nav class="top-bar">
<ul>
<!-- Title Area-->
<li class="name"><h1><a href="#">Top Bar Title</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<section>
<!-- Left Nav Section -->
<ul class="left">
<li class="divider"></li>
<li class="has-dropdown">
<a class="active" href="#">Item 1</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Level 1, Has Dropdown</a>
<ul class="dropdown">
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
<li class="has-dropdown"><a href="#">Level 2, Has Dropdown</a>
<ul class="dropdown">
<li><label>Section</label></li>
<li><a href="#">Level 3</a></li>
<li><a href="#">Level 3</a></li>
<li class="divider"></li>
<li><a href="#">Level 3</a></li>
</ul>
</li>
<li><a href="#">Level 2</a></li>
<li><a href="#">Level 2</a></li>
</ul>
</li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li><a href="#">Level 1</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
<li class="divider hide-for-small"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="divider show-for-medium-and-up"></li>
<li class="has-dropdown">
<a href="#">Item 2</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li><a href="#" class="">Level 1</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><label>Section Name</label></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li><a href="#">Dropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">See all →</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
</div>
</body>
</html>
Open the above html in your browser, you can observe an output as below:
Details of the above file:
The three main elements are:
- The title ul
- one of the section ul class=“right/left elements
- and the li.toggle-topbar element that will expand the menu in the responsive layout.
To position the bar we use a single nav element with a class of top-bar. It will take on full browser width by default. Depending on where you want your links, use the class ul.left and/or ul.right. Simply add items using li. To build a drop down menu you’ll need to add has-dropdown to the li and include ul.dropdownright after that anchor. Add a class of active to mark the current page. I’ve also included the divider using the class li.divider, this will give some separation. You can also include a button (has-button ) and search/text (using class search).
2. Navigation Bar
The default top nav bar provided by this framework includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content). An example is as shown in the listing 2.
Listing 2:Nav bar example
<head>
<meta charset="utf-8" />
<!—Defining resoluiton-->
<meta name="viewport" content="width=device-width" />
<title>Example Nav Bar Foundation.</title>
<!-- Including CSS files -->
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">
<script src="foundation/javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div class="row">
<div class="eight columns">
<ul class="nav-bar">
<li class="active"><a href="#">Nav Item 1</a></li>
<li class="has-flyout">
<a href="#">Nav Item 2</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<ul class="flyout" style="display: none; ">
<li><a href="#">Sub Nav Item 1</a></li>
<li><a href="#">Sub Nav Item 2</a></li>
<li><a href="#">Sub Nav 3</a></li>
<li><a href="#">Sub Nav 4</a></li>
<li><a href="#">Sub Nav Item 5</a></li>
</ul>
</li>
<li class="has-flyout">
<a href="#">Nav Item 3</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout" style="display: none; ">
<h5>Regular Dropdown</h5>
<div class="row">
<div class="four columns">
<p>This is example text. This is example text. This is example text.</p>
</div>
<div class="four columns">
<p>This is example text. This is example text. This is example text.</p>
</div>
</div>
</div>
</li>
<li class="has-flyout">
<a href="#">Nav Item 4</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout large right" style="display: none; ">
<h5>Large Dropdown</h5>
<div class="row">
<div class="four columns">
<p>This is example text. This is example text. This is example text. </p>
<p>This is example text. This is example text. This is example text. .</p>
</div>
<div class="four columns">
<p>This is example text. This is example text. This is example text. </p>
<p>This is example text. This is example text. This is example text. </p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div> <script src="foundation/javascripts/foundation.min.js"></script>
<script>
$(document).foundationNavigation();
</script>
</body>
</html>
Open the file in your browser and you would an output as below:
Details of the above file:
In the above file we observe that:
- A basic nav bar is created using class nav-bar with the ul element. Then ‘li’ elements are used to create navigation within that.
- Class ‘has-flyout’ is attached to the dropdown elements. These render more content on hover.
- Class ‘flyout‘ is attached to the ‘div‘ elements, which contains the content rendered on hover.
- Notice that direction of the flyouts are left by default. ‘right‘ class is added to set the flyout direction right.
- Lastly file ‘foundation.min.js‘ is added and then ‘$(document).foundationNavigation();‘ is used to initialize the navigation and dropdowns.
3. Vertical Nav
By adding class of .vertical to the element the above nav bar can be made vertical. The code is as in the listing below:
Listing 3: Vertical Nav Bar
<head>
<meta charset="utf-8" />
<!—Defining resoluiton-->
<meta name="viewport" content="width=device-width" />
<title>Example Vertical Nav bar Foundation.</title>
<!-- Including CSS files -->
<link rel="stylesheet" href="foundation/stylesheets/foundation.css">
<link rel="stylesheet" href="foundation/stylesheets/app.css">
<script src="foundation/javascripts/modernizr.foundation.js"></script>
</head>
<body>
<div class="row">
<div class="eight columns">
<ul class="nav-bar vertical">
<li class="active"><a href="#">Nav Item 1</a></li>
<li class="has-flyout">
<a href="#">Nav Item 2</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<ul class="flyout" style="display: none; ">
<li><a href="#">Sub Nav Item 1</a></li>
<li><a href="#">Sub Nav Item 2</a></li>
<li><a href="#">Sub Nav 3</a></li>
<li><a href="#">Sub Nav 4</a></li>
<li><a href="#">Sub Nav Item 5</a></li>
</ul>
</li>
<li class="has-flyout">
<a href="#">Nav Item 3</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout" style="display: none; ">
<h5>Regular Dropdown</h5>
<div class="row">
<div class="four columns">
<p>This is example text. This is example text. This is example text.</p>
</div>
<div class="four columns">
<p>This is example text. This is example text. This is example text.</p>
</div>
</div>
</div>
</li>
<li class="has-flyout">
<a href="#">Nav Item 4</a>
<a href="#" class="flyout-toggle"><span> </span></a>
<div class="flyout large right" style="display: none; ">
<h5>Large Dropdown</h5>
<div class="row">
<div class="four columns">
<p>This is example text. This is example text. This is example text. </p>
<p>This is example text. This is example text. This is example text. .</p>
</div>
<div class="four columns">
<p>This is example text. This is example text. This is example text. </p>
<p>This is example text. This is example text. This is example text. </p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div> <script src="foundation/javascripts/foundation.min.js"></script>
<script>
$(document).foundationNavigation();
</script>
</body>
</html>
Output:
4. Side Nav
Sometimes, instead of a nav bar (either top or vertical) it is suitable to use a side navigation. The code is as in the listing below:
Listing 4: Side Navigation
<head> <meta charset="utf-8" /> <!—Defining resoluiton--> <meta name="viewport" content="width=device-width" /> <title>Example Side bar Foundation.</title> <!-- Including CSS files --> <link rel="stylesheet" href="foundation/stylesheets/foundation.css"> <link rel="stylesheet" href="foundation/stylesheets/app.css"> <script src="foundation/javascripts/modernizr.foundation.js"></script> </head> <body> <div class="row"> <div class="eight columns"> <ul class="four side-nav"> <li class="active"><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li class="divider"></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> </ul> </div> </body> </html>
The ouput is as in the image below:
5. Sub Nav
Sub navs are useful when you need to move between different states of a page , say for example Filters. An example below demonstrates this:
Listing 5: Sub nav
<head> <meta charset="utf-8" /> <!—Defining resoluiton--> <meta name="viewport" content="width=device-width" /> <title>Example subnav Foundation.</title> <!-- Including CSS files --> <link rel="stylesheet" href="foundation/stylesheets/foundation.css"> <link rel="stylesheet" href="foundation/stylesheets/app.css"> <script src="foundation/javascripts/modernizr.foundation.js"></script> </head> <body> <div class="row"> <div class="eight columns"> <dl class="sub-nav"> <dt>Filter:</dt> <dd class="active"><a href="#">All</a></dd> <dd><a href="#">Active</a></dd> <dd><a href="#">Pending</a></dd> <dd><a href="#">Suspended</a></dd> </dl> </div> </body> </html>
Output of the above code is as in the image below:
6. Pagination
When you need iteration through a long list of items, for example you want to provide your user with a way to navigate over 50 blog posts, each page showing 10 of it, you need pagination. Here is how you may create one with Zurb Foundation 3.
Lisitng 6: Pagination example
<head> <meta charset="utf-8" /> <!—Defining resoluiton--> <meta name="viewport" content="width=device-width" /> <title>Example pagination Foundation.</title> <!-- Including CSS files --> <link rel="stylesheet" href="foundation/stylesheets/foundation.css"> <link rel="stylesheet" href="foundation/stylesheets/app.css"> <script src="foundation/javascripts/modernizr.foundation.js"></script> </head> <body> <div class="row"> <div class="eight columns"> <ul class="pagination"> <li class="arrow unavailable"><a href="">«</a></li> <li class="current"><a href="">1</a></li> <li><a href="">2</a></li> <li><a href="">3</a></li> <li><a href="">4</a></li> <li class="unavailable"><a href="">…</a></li> <li><a href="">12</a></li> <li><a href="">13</a></li> <li class="arrow"><a href="">»</a></li> </ul> </div> </body> </html>
The output of the above code would be as shown below:
7. Breadcrumbs
Breadcrumbs are a great way to show your users where they are in you site hierarchay. It may also helpful to direct your users to the flow of content. An example is as below:
Listing 7: Breadcrumbs example
<head> <meta charset="utf-8" /> <!—Defining resoluiton--> <meta name="viewport" content="width=device-width" /> <title>Example breadcrumbs Foundation.</title> <!-- Including CSS files --> <link rel="stylesheet" href="foundation/stylesheets/foundation.css"> <link rel="stylesheet" href="foundation/stylesheets/app.css"> <script src="foundation/javascripts/modernizr.foundation.js"></script> </head> <body> <div class="row"> <div class="eight columns"> <ul class="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li class="unavailable"><a href="#">Add ons</a></li> <li class="current"><a href="#">Home</a></li> </ul> <ul class="breadcrumbs"> <li><span>Home</span></li> <li><span>Features</span></li> <li><span>Add ons</span></li> <li class="current"><span>Home</span></li> </ul> </div> </body> </html>
Output would be as below:
Summary
In this article we saw one of the features provided by Foundation 3 framework, i.e the navigation. In the next articles i shall discuss some more features. Hope you liked the article.
Use Trang to Generate XSD from XML File