Menu icon Foundation
I can't get the Javascript in F6 to work

I can't seem to make any of the dropdowns to work. I've been using Foundation 5 and I decided to try using F6.

-I copied the sample code in the dropdownMenu docs here: http://foundation.zurb.com/sites/docs/dropdown-menu.html

-All scripts are being loaded following the instructions here: http://foundation.zurb.com/sites/docs/javascript.html

I'm using the CSS version btw.

I've spent quite a while on this and am stumped.

112

<html>
<head>
    <link rel="stylesheet" href="css/foundation.css">
</head>
<body>
	<ul class="dropdown menu" data-dropdown-menu>
	  <li>
		<a>Item 1</a>
		<ul class="menu">
		  <li><a href="#">Item 1A Loooong</a></li>
		  <li>
			<a href='#'> Item 1 sub</a>
			<ul class='menu'>
			  <li><a href='#'>Item 1 subA</a></li>
			  <li><a href='#'>Item 1 subB</a></li>
			  <li>
				<a href='#'> Item 1 sub</a>
				<ul class='menu'>
				  <li><a href='#'>Item 1 subA</a></li>
				  <li><a href='#'>Item 1 subB</a></li>
				</ul>
			  </li>
			  <li>
				<a href='#'> Item 1 sub</a>
				<ul class='menu'>
				  <li><a href='#'>Item 1 subA</a></li>
				</ul>
			  </li>
			</ul>
		  </li>
		  <li><a href="#">Item 1B</a></li>
		</ul>
	  </li>
	  <li>
		<a href="#">Item 2</a>
		<ul class="menu">
		  <li><a href="#">Item 2A</a></li>
		  <li><a href="#">Item 2B</a></li>
		</ul>
	  </li>
	  <li><a href="#">Item 3</a></li>
	  <li><a href='#'>Item 4</a></li>
	</ul>
	
	<script src="js/jquery.min.js"></script>  
	<script src="js/foundation.min.js"></script>
	
</body>
</html>
            

         

F6javascript

I can't seem to make any of the dropdowns to work. I've been using Foundation 5 and I decided to try using F6.

-I copied the sample code in the dropdownMenu docs here: http://foundation.zurb.com/sites/docs/dropdown-menu.html

-All scripts are being loaded following the instructions here: http://foundation.zurb.com/sites/docs/javascript.html

I'm using the CSS version btw.

I've spent quite a while on this and am stumped.

112

<html>
<head>
    <link rel="stylesheet" href="css/foundation.css">
</head>
<body>
	<ul class="dropdown menu" data-dropdown-menu>
	  <li>
		<a>Item 1</a>
		<ul class="menu">
		  <li><a href="#">Item 1A Loooong</a></li>
		  <li>
			<a href='#'> Item 1 sub</a>
			<ul class='menu'>
			  <li><a href='#'>Item 1 subA</a></li>
			  <li><a href='#'>Item 1 subB</a></li>
			  <li>
				<a href='#'> Item 1 sub</a>
				<ul class='menu'>
				  <li><a href='#'>Item 1 subA</a></li>
				  <li><a href='#'>Item 1 subB</a></li>
				</ul>
			  </li>
			  <li>
				<a href='#'> Item 1 sub</a>
				<ul class='menu'>
				  <li><a href='#'>Item 1 subA</a></li>
				</ul>
			  </li>
			</ul>
		  </li>
		  <li><a href="#">Item 1B</a></li>
		</ul>
	  </li>
	  <li>
		<a href="#">Item 2</a>
		<ul class="menu">
		  <li><a href="#">Item 2A</a></li>
		  <li><a href="#">Item 2B</a></li>
		</ul>
	  </li>
	  <li><a href="#">Item 3</a></li>
	  <li><a href='#'>Item 4</a></li>
	</ul>
	
	<script src="js/jquery.min.js"></script>  
	<script src="js/foundation.min.js"></script>
	
</body>
</html>
            

         
Knight Yoshi over 3 years ago

Goes above the fold, in the HEAD

HTML
<script src="js/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>

and in the body you initialize Foundation with
HTML
<script type="text/javascript">
$(document).foundation()
</script>

Franz Andrei M. Cruspero over 3 years ago

Thanks it worked! I'm wondering why they instructed to put the links on the bottom. Anyways, thanks for the help!