DropDown Lists issue ZURB foundation

Question

Clicking on the button does not create a dropdown list as I believe it should. Does anyone know what I am doing wrong here or why it might not be working?

 <!doctype html> <html class="no-js" lang="en"> <meta charset="" /> <meta name="viewport" content="width=device-width, initial-scaler=1.0" /> <script src="js/foundation/foundation.dropdown.js"></script> <script src="js/foundation/foundation.js"></script> <link rel="stylesheet" href="css/foundation.css" /> <body> <div class="row"> <div class="column"> <a href="#" class="button dropdown" data-dropdown="drop1">dropdown</a> </div> </div> <ul class="f-dropdown" data-dropdown-content id="drop1"> <li>item</li> <li>item</li> <li>item</li> <li>item</li> </ul> <script> $(document).foundation(); </script> </body> </html>

Answer 1

You didn't have jquery loaded, also, something is wrong with your css/js files, double check your paths .

  <!doctype html> <head> <html class="no-js" lang="en"> <meta charset="" /> <meta name="viewport" content="width=device-width, initial-scaler=1.0" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css" rel="stylesheet"/> </head> <body> <div class="row"> <div class="column"> <a href="#" class="button" data-dropdown="drop">Link Dropdown &raquo;</a> <ul id="drop" class="tiny 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> </div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/js/foundation.js"></script> <script> $(document).foundation(); </script> </body> </html>

DropDown Lists issue ZURB foundation

Question

1 answers

solution1
1

DropDown Lists issue ZURB foundation

Question

1 answers

solution1 1

solution1
1