Menu icon Foundation
Foundation 5.1.1 Dropdown Buttons not working

Dropdown

Downloaded Foundation 5.1.1 yesterday for a new site I'm working on - Have never had any issues with previous versions but struggling with 5.1.1 to get a lot of things working correctly.

Code is pulled directly from http://foundation.zurb.com/docs/components/dropdown.html

However as you can see the button shows the li elements without even clicking on the button. Clicking the button doesn't hide/show the elements either.

Any ideas appreciated

<!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>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic|Raleway:200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
    
  <!-- Header and Nav -->
 
	<div class="fixed">
	<nav class="top-bar" data-topbar>
		<ul class="title-area">
			<li class="name">
			  <h1><a href="#">Home</a></h1>
			</li>
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
		</ul>

		<section class="top-bar-section">
			<ul class="right">
				<li class="has-dropdown">
					<a href="#">Leadership</a>
					<ul class="dropdown">
					  <li><a href="#">Link 1</a></li>
					</ul>
				</li>
			</ul>
		</section>
	</nav>
	</div>
	
	<a href="#" class="button" data-dropdown="drop">Link Dropdown &raquo;</a>
	<ul id="drop" class="[tiny small medium large content]f-dropdown" data-dropdown-content>
	  <li><a href="#">This is a link</a></li>
	  <li><a href="#">This is another</a></li>
	  <li><a href="#">Yet another</a></li>
	</ul>
  <!-- Footer -->
 
	<footer class="row">
		<div class="large-12 columns">
		  <hr />
		  <div class="row">
			<div class="large-6 columns">
			  <p>© Copyright no one at all. Go to town.</p>
			</div>
			<div class="large-6 columns">
			  <ul class="inline-list right">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
			  </ul>
			</div>
		  </div>
		</div>
	</footer>
    
	  <script src="js/vendor/jquery.js"></script>
	  <script src="js/foundation/foundation.js"></script>
	  <script src="js/foundation/foundation.topbar.js"></script>

	  <script>
		$(document).foundation();
	  </script>
  </body>
</html>
            

         

dropdownbuttons

Dropdown

Downloaded Foundation 5.1.1 yesterday for a new site I'm working on - Have never had any issues with previous versions but struggling with 5.1.1 to get a lot of things working correctly.

Code is pulled directly from http://foundation.zurb.com/docs/components/dropdown.html

However as you can see the button shows the li elements without even clicking on the button. Clicking the button doesn't hide/show the elements either.

Any ideas appreciated

<!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>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <link rel="stylesheet" href="css/app.css" />
	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic|Raleway:200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
    
  <!-- Header and Nav -->
 
	<div class="fixed">
	<nav class="top-bar" data-topbar>
		<ul class="title-area">
			<li class="name">
			  <h1><a href="#">Home</a></h1>
			</li>
			<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
		</ul>

		<section class="top-bar-section">
			<ul class="right">
				<li class="has-dropdown">
					<a href="#">Leadership</a>
					<ul class="dropdown">
					  <li><a href="#">Link 1</a></li>
					</ul>
				</li>
			</ul>
		</section>
	</nav>
	</div>
	
	<a href="#" class="button" data-dropdown="drop">Link Dropdown &raquo;</a>
	<ul id="drop" class="[tiny small medium large content]f-dropdown" data-dropdown-content>
	  <li><a href="#">This is a link</a></li>
	  <li><a href="#">This is another</a></li>
	  <li><a href="#">Yet another</a></li>
	</ul>
  <!-- Footer -->
 
	<footer class="row">
		<div class="large-12 columns">
		  <hr />
		  <div class="row">
			<div class="large-6 columns">
			  <p>© Copyright no one at all. Go to town.</p>
			</div>
			<div class="large-6 columns">
			  <ul class="inline-list right">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
			  </ul>
			</div>
		  </div>
		</div>
	</footer>
    
	  <script src="js/vendor/jquery.js"></script>
	  <script src="js/foundation/foundation.js"></script>
	  <script src="js/foundation/foundation.topbar.js"></script>

	  <script>
		$(document).foundation();
	  </script>
  </body>
</html>
            

         

This post has been closed. No new replies can be added.

Andrea DeMers over 5 years ago

Are jquery.js & foundation.js loading?

I noticed that in 5.1.1, jquery.js is located at: bower_components/jquery/dist/jquery.js

I have the following, f5 being my Foundation project name.

    <script src="/f5/bower_components/jquery/dist/jquery.js"></script>
    <script src="/f5/bower_components/foundation/js/foundation.min.js"></script>

    <script>
      $(document).foundation();
    </script>

Rob Lampard over 5 years ago

Hi,

Yes both documents are loading fine. Can't even get it to work on just a complete fresh download of F5 with their kitchen sink so seems strange.

Rafi Benkual over 5 years ago

As Andrea suggested, Your JAvaScript is only set up to run topbar.
<script src="js/foundation/foundation.js"></script> is for loading plugins individually.

You want to use <script src="bower_components/foundation/js/foundation.min.js"></script>for the full package.

Also the size classes are for reference only. The correct markup would look like this:

<a href="#" class="button" data-dropdown="drop">Link Dropdown &raquo;</a>
<ul id="drop" class="small content f-dropdown" data-dropdown-content>
<li><a href="#">This is a link</a></li>
<li><a href="#">This is another</a></li>
<li><a href="#">Yet another</a></li>
</ul>

I took out the brackets and extra size classes [tiny small medium large content]

Working demo http://cdpn.io/jKdxf

Rob Lampard over 5 years ago

Ah okay thanks a lot. I did try calling the dropdown file individually as well but I'll give this a go! Thanks for the response.