Having trouble understanding the docs on how to initialize a Magellan menu (http://foundation.zurb.com/sites/docs/magellan.html)
Error:
Uncaught TypeError: this.$element.data is not a function
Magellan @ foundation.js:4192
(anonymous function) @ test2.php:174
Code:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test</title>
<link rel='stylesheet' href='css/foundation.css'/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="js/foundation.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div class="row">
<div class="large-8 columns">
<div class="sections">
<section id="first" data-magellan-target="first">
<div class="row">
<div class="large-12 columns">
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
<br><br><br>
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<br><br><br><br><br><br><br><br><br>
</p>
</div>
</div>
</section>
<section id="second" data-magellan-target="second">
<div class="row">
<div class="large-12 columns">
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
<br><br><br>
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<br><br><br><br><br><br><br><br><br>
</p>
</div>
</div>
</section>
<section id="third" data-magellan-target="third">
<div class="row">
<div class="large-12 columns">
<p>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
<br><br><br>
ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<br><br><br><br><br><br><br><br><br>
</p>
</div>
</div>
</section>
</div>
</div>
<div class="large-4 columns">
<ul id="nav" class="vertical menu" data-magellan>
<li><a href="#first">First Arrival</a></li>
<li><a href="#second">Second Arrival</a></li>
<li><a href="#third">Third Arrival</a></li>
</ul>
</div>
</div>
</body>
<script>
$(document).foundation();
var target = document.getElementById('nav');
var elem = new Foundation.Magellan(target);
</script>
</html>