Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

186 lines (171 sloc) 8.086 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 Top Bar 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="fixed contain-to-grid"> <!-- Could do .fixed to fix to top or .contain-to-grid for grid width -->
<nav class="top-bar">
<ul>
<!-- Title Area -->
<li class="name">
<h1>
<a href="#">
<!-- <img src="http://placehold.it/25x25"> -->
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="active has-dropdown">
<a href="#">Main Item 1</a>
<ul class="dropdown">
<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 &rarr;</a></li>
</ul>
</li>
<li class="divider"></li>
<li><a href="#">Main Item 2</a></li>
<li class="divider"></li>
<li class="has-dropdown">
<a href="#">Main Item 3</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Dropdown Level 1</a>
<ul class="dropdown">
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 3</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li class="divider"></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</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 &rarr;</a></li>
</ul>
</li>
<li class="divider"></li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="show-for-large divider"></li>
<li class="has-dropdown">
<a href="#">Main Item 4</a>
<ul class="dropdown">
<li><label>Section Name</label></li>
<li class="has-dropdown">
<a href="#" class="">Has Dropdown, Level 1</a>
<ul class="dropdown">
<li><a href="#">Dropdown Options</a></li>
<li><a href="#">Dropdown Options</a></li>
<li class="has-dropdown">
<a href="#">Has Dropdown, Level 2</a>
<ul class="dropdown test">
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
<li><a href="#">Subdropdown Option</a></li>
</ul>
</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 &rarr;</a></li>
</ul>
</li>
<li class="divider"></li>
<li class="search">
<!-- <form class="collapse">
<input type="text">
<button type="submit" class="secondary radius button">Search</button>
</form> -->
<form>
<input type="search">
</form>
</li>
<li class="divider show-for-small"></li>
<li class="has-button"><a class="small button" href="#">Button!</a></li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="twelve columns">
<p><a href="index.html">&laquo; Back</a></p>
<h2>Foundation Top Bar Testing</h2>
<hr>
</div>
</div>
<div class="row">
<div class="twelve columns">
<h4 class="subheader">We designed our responsive navigation bar to be super flexible! You have control over almost every aspect of it, including: size, colors, static, fixed and/or contained to grid width, customizable breakpoint and more. Play around with it here and see what it can do.</h4>
</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.topbar.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.