Menu icon Foundation
Dropdowns Not Working

Hi! So dropdowns aren't working (not even the code copy-pasted from the foundation docs). The following is the code I'm using. Any help would be appreciated.






<!DOCTYPE html>
    <head>
        <title>Welcome to Play! Forum</title>
        <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation/foundation.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"></script>
        <link rel="stylesheet" href="/assets/css/foundation.min.css">
        

    </head>
    <body>
    	<nav class="top-bar" data-topbar>
			<ul class="title-area">
				<li class="name">
			    <h1>
		          <a href="/">
		            Play! Forum
			      </a>
			    </h1>
			   </li>
		    </ul>
		    <section class="top-bar-section">
		      <ul class="right">
		        <li class="divider"></li>
			      <li><a href="/">Home</a></li>
			      <li class="divider"></li>
			      <li><a href="#">Play</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Friends</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Forum</a></li>
	           	  
		       	  <li class="divider"></li>
			      <li class="has-dropdown has-form">
					<a href="#" class="button success" data-dropdown="dropdown" data-options="is_hover:true">apple123</a>
					<ul id="dropdown" class="small f-dropdown" data-dropdown-content>
					  <li><a href="/user/apple123">Profile</a></li>
					  <li><a href="/settings">User Settings</a></li>
					  <li><a href="/logout">Log Out</a></li>
					</ul>
			      </li>     	  
		       	  <li class="divider"></li>
		       	  
			  </ul>
		  </section>
		</nav>
		<header>
		  <div class="row">
		    <div class="large-12 columns">
		      <h1>Welcome to Play! Forum</h1>
		      <h4>Built with performance in mind.</h4>
		    </div>
		  </div>
		</header>
        


      <div id="footer">
      	  	</br></br>
	  <footer class="row">
	    <div class="large-16 columns">
	      <div class="row">
	          <ul class="inline-list">
	            <li><a href="/">Home</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/terms">Terms</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/about">About</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/contact">Contact</a></li>
	          </ul>
	      </div>
	    </div>
	    <div class="large-12 columns">
	      <div class="row">
	            <center><p>Website copyright Play! Forum, 2014.</p></center>
	      </div>
	      </br>
	    </div>
	    </div>
	  </footer>
    </body>
</html>
            

         

dropdown button

Hi! So dropdowns aren't working (not even the code copy-pasted from the foundation docs). The following is the code I'm using. Any help would be appreciated.






<!DOCTYPE html>
    <head>
        <title>Welcome to Play! Forum</title>
        <link rel="shortcut icon" type="image/png" href="/assets/images/favicon.png">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation/foundation.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.1/modernizr.min.js"></script>
        <link rel="stylesheet" href="/assets/css/foundation.min.css">
        

    </head>
    <body>
    	<nav class="top-bar" data-topbar>
			<ul class="title-area">
				<li class="name">
			    <h1>
		          <a href="/">
		            Play! Forum
			      </a>
			    </h1>
			   </li>
		    </ul>
		    <section class="top-bar-section">
		      <ul class="right">
		        <li class="divider"></li>
			      <li><a href="/">Home</a></li>
			      <li class="divider"></li>
			      <li><a href="#">Play</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Friends</a></li>
			      <li class="divider"></li>
	           	  <li><a href="#">Forum</a></li>
	           	  
		       	  <li class="divider"></li>
			      <li class="has-dropdown has-form">
					<a href="#" class="button success" data-dropdown="dropdown" data-options="is_hover:true">apple123</a>
					<ul id="dropdown" class="small f-dropdown" data-dropdown-content>
					  <li><a href="/user/apple123">Profile</a></li>
					  <li><a href="/settings">User Settings</a></li>
					  <li><a href="/logout">Log Out</a></li>
					</ul>
			      </li>     	  
		       	  <li class="divider"></li>
		       	  
			  </ul>
		  </section>
		</nav>
		<header>
		  <div class="row">
		    <div class="large-12 columns">
		      <h1>Welcome to Play! Forum</h1>
		      <h4>Built with performance in mind.</h4>
		    </div>
		  </div>
		</header>
        


      <div id="footer">
      	  	</br></br>
	  <footer class="row">
	    <div class="large-16 columns">
	      <div class="row">
	          <ul class="inline-list">
	            <li><a href="/">Home</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/terms">Terms</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/about">About</a></li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
	            <li><a href="/contact">Contact</a></li>
	          </ul>
	      </div>
	    </div>
	    <div class="large-12 columns">
	      <div class="row">
	            <center><p>Website copyright Play! Forum, 2014.</p></center>
	      </div>
	      </br>
	    </div>
	    </div>
	  </footer>
    </body>
</html>
            

         
Tony Stark about 5 years ago

HI
Use 5.2.1 version of foundation.min.js into your code
Replace

<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.2/js/foundation/foundation.min.js"></script>

with

<script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.2.1/js/foundation.min.js"></script>

and add below code before closing body tag

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

so your code should be look like:::
http://pastebin.com/m5AHpwAM

Apple about 5 years ago

Thanks for the help, but it is still not working.

Tony Stark about 5 years ago

@Apple
Working fine
i checked
try in foundation 5.2.1 version