Dropdown Javascript Not Working in Vocino Foundation for Middleman

Question

I'm building a site using Vocino's setup for Foundation w/ Middleman and I ran into a problem getting the dropdown links working.

Here is my layout.haml:

html.no-js
 %head
   %meta{:charset => "utf-8"}
   %meta{:content => "IE=edge,chrome=1", "http-equiv" => "X-UA-Compatible"}
   %meta{:content => "width=device-width", :name => "viewport"}

   %title= data.page.title || "ZURB Foundation"
   / Included CSS Files
   = stylesheet_link_tag "app"
   = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'
   = javascript_include_tag "vendor/custom.modernizr.js"  

 %body{:class => page_classes}
  %header
   = partial 'nav_bar'
   %section{:role => "main", :class => "main"}= yield
   %footer
   -# Application Javascript, safe to override
   = javascript_include_tag "app"

   -# Google Analytics
   = javascript_include_tag "google_analytics"

My _nav_bar.html.haml in short:

%nav.top-bar
 %ul.title-area
  / Title Area
   %li.name
    %h1
     %a{href: "#"}
      Top Bar Title
   %li.toggle-topbar.menu-icon
     %a{href: "#"}
      span menu
 %section.top-bar-section
  / Right Nav Section
  %ul.right
   %li.divider
    %li.has-dropdown
     %a{href: "#"} Main Item 1
     .......

And the start of my app.js.coffee:

#= require "vendor/jquery"

# Foundation Javascript
= require "foundation/foundation"

(($, window, undefined_) ->
  "use strict"
  $doc = $(document)
  Modernizr = window.Modernizr
  $(document).ready ->
    $(document).foundation()
  ........

Everything looks fine from a visual perspective. But the dropdown does not work when hovered over. Upon building I also get an error for app.js.coffee ever since I uncommented the line =require foundation/foundation. I've been fiddling around for half a day now and reading other posts and haven't found a fix. It might be something very simple that I'm just missing in this new environment.

Answer 1

I'm the creator of the middleman-foundation template. Recently I changed the way it works and updated the repo. Basically, if you're using the foundation gem, you don't really need to use a template since you should be pulling in the appropriate mixins from the gem directly rather than having all the Sass there.

If you'd like to use the template method (and have all the Sass files available to edit), you may want to pull the new version.

Feel free to contact me via Twitter if you need direct help with your project.

Best,

Travis