Skip to content

Instantly share code, notes, and snippets.

@telagraphic

telagraphic/gist:6524737

Created September 11, 2013 14:51
Show Gist options
  • Save telagraphic/6524737 to your computer and use it in GitHub Desktop.
Save telagraphic/6524737 to your computer and use it in GitHub Desktop.
Download ZIP
SCSS Foundation -- js for topbar isn't executing.
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Richard Dolan Press</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="scss/foundation.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script src="js/vendor/custom.modernizr.js" type="text/javascript" charset="utf-8"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/less.js"></script>
<![endif]-->
</head>
<!-- NAVBAR
================================================== -->
<body>
<div id="content">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name">
<h1><a href="#">RICARD DOLAN PRESS</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav 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>
<li class="has-dropdown"><a href="#">Main Item 3</a>
<ul class="dropdown">
<li class="has-dropdown"><a href="#">Dropdown Level 1a</a>
<ul class="dropdown">
<li><label>Dropdown Level 2 Label</label></li>
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2c</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><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li class="divider"></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</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="divider hide-for-small"></li>
<li class="has-dropdown"><a href="#">Main Item 4</a>
<ul class="dropdown">
<li><label>Dropdown Level 1 Label</label></li>
<li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 2a</a></li>
<li><a href="#">Dropdown Level 2b</a></li>
<li class="has-dropdown"><a href="#">Dropdown Level 2c</a>
<ul class="dropdown">
<li><a href="#">Dropdown Level 3a</a></li>
<li><a href="#">Dropdown Level 3b</a></li>
<li><a href="#">Dropdown Level 3c</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 2d</a></li>
<li><a href="#">Dropdown Level 2e</a></li>
<li><a href="#">Dropdown Level 2f</a></li>
</ul>
</li>
<li><a href="#">Dropdown Level 1b</a></li>
<li><a href="#">Dropdown Level 1c</a></li>
<li class="divider"></li>
<li><label>Dropdown Level 1 Label</label></li>
<li><a href="#">Dropdown Level 1d</a></li>
<li><a href="#">Dropdown Level 1e</a></li>
<li><a href="#">Dropdown Level 1f</a></li>
<li class="divider"></li>
<li><a href="#">See all &rarr;</a></li>
</ul>
</li>
<li class="divider"></li>
<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>
<li class="divider show-for-small"></li>
<li class="has-form">
<a class="button" href="#">Button!</a>
</li>
</ul>
</section>
</nav>
</div>
<script src="js/vendor/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="js/foundation/index.js" type="text/javascript" charset="utf-8"></script>
<script src="js/foundation/foundation.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment