Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

240 lines (220 sloc) 10.436 kB
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Foundation Navigation Testing</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/styles.css">
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="row">
<div class="twelve columns">
<p><a href="index.html">&laquo; Back</a></p>
<h2>Foundation Navigation Testing</h2>
<hr />
<dl class="sub-nav">
<dt>Go to:</dt>
<dd><a href="#nav-bar">Nav Bar</a></dd>
<dd><a href="#vertical-nav">Vertical Nav</a></dd>
<dd><a href="#side-nav">Side Nav</a></dd>
<dd><a href="#sub-nav">Sub Nav</a></dd>
<dd><a href="#pagination">Pagination</a></dd>
</dl>
</div>
</div>
<!-- Test Foundation Components Here -->
<div class="row">
<div class="twelve columns">
<h3>Navigation</h3>
<h4 class="subheader">Direct users around in style. There are navigation options for a number of situations, and everything is designed to work cross-device.</h4>
<br>
<div class="row">
<div class="four columns">
<a name="nav-bar"></a>
<h4>Nav Bar</h4>
<p>The default top nav bar for Foundation includes the main nav options as well as hover dropdowns that support either a list of anchors or arbitrary content (even Grid content).</p>
</div>
<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">
<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">
<h5>Regular Dropdown</h5>
<div class="row">
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. 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">
<h5>Large Dropdown</h5>
<div class="row">
<div class="four columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. 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. This is example text. This is example text. 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. This is example text. This is example text. 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. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="four columns">
<img src="http://placehold.it/200x250" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="vertical-nav"></a>
<h4>Vertical Nav</h4>
<p>The same nav bar seen above, with the same structure, can be made a vertical nav bar that still supports flyout content by adding a class of <code>.vertical</code> to the element.</p>
</div>
<br>
<div class="five columns end">
<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">
<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">
<h5>Regular Dropdown</h5>
<div class="row">
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
<div class="six columns">
<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>
</div>
</div>
</div>
</li>
<li>
<a href="#">Nav Item 4</a>
</li>
</ul>
</div>
</div>
<br>
<div class="row">
<div class="four columns">
<a name="side-nav"></a>
<h4>Side Nav</h4>
<p>Side nav, like you'll see on the Foundation main site, is useful for sections either of a site or of the page.</p>
</div>
<div class="four columns end">
<ul class="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>
</div>
<br>
<div class="row">
<div class="four columns">
<a name="sub-nav"></a>
<h4>Sub Nav</h4>
<p>This simple subnav is great for moving between different states of a page.</p>
</div>
<br>
<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>
</div>
<br>
<div class="row">
<div class="four columns">
<a name="pagination"></a>
<h4>Pagination</h4>
<p>Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long repetitive listings or content.</p>
</div>
<br>
<div class="eight columns">
<ul class="pagination">
<li class="arrow unavailable"><a href="">&laquo;</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="">&hellip;</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li class="arrow"><a href="">&raquo;</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Included JS Files -->
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
<script type="text/javascript">
// Page-Specific JavaScript Goes Here
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.