Menu icon Foundation
Foundation Topbar Menu Dropdown Problem

I am trying to make the dropdown for the topbar to work, but it is not working.
I am using cdn js to load foundation.

The Link is in codepen,
http://codepen.io/jgacuca567/pen/rJsce

Kindly fork it and see whats wrong.

topbardropdown

I am trying to make the dropdown for the topbar to work, but it is not working.
I am using cdn js to load foundation.

The Link is in codepen,
http://codepen.io/jgacuca567/pen/rJsce

Kindly fork it and see whats wrong.

kevin basteleus about 5 years ago

Have you added the javascript between the body tags?

source: docs at the end of the page
"
Using the Javascript
Before you can use the top bar you'll want to verify that jQuery and foundation.js are available on your page. You can refer to the Javascript documentation on setting that up.
Just add foundation.topbar.js AFTER the foundation.js file. Your markup should look something like this:
"


`

<body>

  ...

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.topbar.js"></script>
  <!-- Other JS plugins can be included here -->

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

</body>

Lyn about 5 years ago

Hey there,

Not witnessing any issue or I did not understand what it was.
Checking from here : http://codepen.io/jgacuca567/full/rJsce/ with your code, the dropdown is working.

Regards,

Lyn.

James Van Waza about 5 years ago

Hi Lyn, I tried clicking on the right button dropdown but the menu items did not show.

Kevin, I have already included the jquery files as well.

Rafi Benkual about 5 years ago

Must be something with that cdn, works with the official
http://codepen.io/rafibomb/pen/KsaJt

Dave about 5 years ago

Looks like that version in the CDNJS library isn't the full javascript build.

You need the top bar component to make it work:

http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/js/foundation/foundation.topbar.min.js

Or, alternatively switch out the main JS file for one that includes the full build like Rafi's:

 http://cdn.foundation5.zurb.com/foundation.js

For some reason the combined version on the cloudflare CDN isn't minified at all.

http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/js/foundation.min.js

... even though it's labeled as it is. Might be a bug in the distribution?

kevin basteleus about 5 years ago

James,

ive copy pasted your code into a new html file, and added all files in the same folder and worked perfectly fine for me.

Here's the code:

Also check if the js files are included in the js folder.

PS: Don't mind the orbit.js and the custom.css etc.
I was testing my own problem for iphone in the meanwhile :-).

Hope this fixes it.

<!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>TopBartest</title>
  <!-- Foundation.css is core stylesheet & custom.css is customized stylesheet-->
    <link rel="stylesheet" href="css/foundation.css" /> 
  <link rel="stylesheet" href="css/custom.css" />

  <!-- javascript: foundation.orbit is for carousel. Rest is for mobile device support -->
  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.orbit.js"></script>
    <script src="js/vendor/modernizr.js"></script>

 <link rel="shortcut icon" href="img/favicon.ico" >

  </head>

 <body>

<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">My Site</a></h1>
    </li>
     <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  </ul>

  <section class="top-bar-section">
    <!-- Right Nav Section -->
    <ul class="right">
      <li class="active"><a href="#">Right Button Active</a></li>
      <li class="has-dropdown">
        <a href="#">Right Button Dropdown</a>
        <ul class="dropdown">
          <li><a href="#">First link in dropdown</a></li>
          <li class="active"><a href="#">Active link in dropdown</a></li>
        </ul>
      </li>
    </ul>

    <!-- Left Nav Section -->
    <ul class="left">
      <li><a href="#">Left Nav Button</a></li>
    </ul>
  </section>
</nav>
  <script>
  document.write('<script src=js/vendor/' +
  ('__proto__' in {} ? 'zepto' : 'jquery') +
  '.js><\/script>')
  </script>

    <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <!-- <script src="js/foundation/foundation.orbit.js"></script> -->
    <!-- Updating slider settings in here --> 
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script> 
</body>

James Van Waza about 5 years ago

Rafi, Dave, Ken

Thank you for the help, I don't know whats wrong with cdnjs,
Kevin I copied it in a new page and it worked.

The document. write should be included in the javascript examples page because it is not there.

Quick question though, does it mean when the javascript is put in a separate page, will it still work or?