CODEWITHSUNDEEP
javascriptjqueryruby-on-railszurb-foundation
sidney
sidney

Reputation: 2714

Zurb Foundation dropdown menu doesn't work

I got this error when clicking on my dropdown menu on the zurb top bar:

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

Here is my application.js:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .

$(function(){ $(document).foundation(); });

and in my view (slim template):

  nav class="top-bar"
    ul class="title-area"
      li class="name"
        h1
          a href="#" My Project
      li class="toggle-topbar menu-icon"
        a href="#" Menu
    section class="top-bar-section"
      ul class="left"
        li class="divider"
        li class="divider hide-for-small"
      ul class="right"
        li class="divider show-for-medium-and-up"
          - if current_user
            li class="has-dropdown"
              a href="#"
                = "Logged in as #{current_user.email}"
              ul class="dropdown"
                li
                  a href="#"
                    ' First link in dropdown
            li
              = link_to "Log Out", logout_path
          - else
            li
              = link_to t("layout.login"), login_path
            li
              = link_to t("layout.signup"), signup_path

The dropdown menu doesn't work (it doesn't appear when clicking or hovering)

Upvotes: 1

Views: 2944

Answers (3)

petiesbok
petiesbok

Reputation: 26

you need to add jquery.js, foundation.js and foundation.topbar.js in sequence.

example:

top - <script src="<?php echo $resources;?>plugins/foundation/js/jquery.js"></script>
2nd file - foundation.js 
3rd file - foundation.topbar.js

foundation.topbar.js AFTER the foundation.js file.

Upvotes: 0

janfoeh
janfoeh

Reputation: 10328

The dropdown seems to be not working because you forgot the data-topbar attribute on the nav element. The Topbar javascript code never ran.

Upvotes: 3

n1kkou
n1kkou

Reputation: 3142

This is not an error, this is a jQuery issue, which appears when your anchor's href attribute is prevented to be followed with e.preventDefault();

Upvotes: -1

Related Questions