Menu icon Foundation
Navigation Dropdowns broken? ZF5.2.1

Hey all. I'm pretty new to Foundation (used 4 briefly in the past, but that was mainly just experimentation).

I'm working on developing an E-Sports site with a friend, and early on in development I ran into such a trivial problem that I just can't wrap my head around. I've tried to narrow the problem down as much as I can, but no such luck.

My problem? I can't get the dropdowns in Foundation to work.

Things I've tried:
1. Compiling just the topbar and dropdown components of Foundation SCSS
2. Using pre-compiled Foundation CSS
3. Using the click-only (disabling hover) behavior mod added to the nav class.

What can I do here..? Version of Foundation is 5.2.1
Any help whatsoever would be GREATLY appreciated.

P.S., I included my .jade file in case anyone has the same problem I do with focusing on mundane .html files.

doctype html
html(lang="en")
    head
        title= pageTitle
        
        // meta data
        
        // call js
        script(src="assets/js/foundation.min.js")
        script(src="assets/js/vendor/fastclick.js")
        script(src="assets/js/vendor/jquery.cookie.js")
        script(src="assets/js/vendor/jquery.js")
        script(src="assets/js/vendor/modernizer.js")
        script(src="assets/js/vendor/placeholder.js")
        
        // call css
        link(rel="stylesheet", type="text/css", href="assets/stylesheets/css/foundation.min.css")
        link(rel="stylesheet", type="text/css", href="assets/stylesheets/css/normalize.css")
    
    body

        nav(data-topbar, data-options="is_hover: false").top-bar
            //title-area
            ul.title-area
                li.name
                    h1
                        a(href="#") My Site
                
                li.toggle-topbar.menu-icon
                    a(href="#") Menu
            // /title-area
            
            
            section.top-bar-section
                // Right Nav Section
                ul.right
                    li.active
                        a(href="#") Right Button Active
                        
                    li.has-dropdown
                        a(href="#") Right Button Dropdown
                        
                        ul.dropdown
                            li
                                a(href="#") First link in dropdown

                // Left Nav Section
                ul.left
                    li
                        a(href="#") Left Nav Button
            

         

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <!-- meta data-->
    <!-- call js-->
    <script src="assets/js/foundation.min.js"></script>
    <script src="assets/js/vendor/fastclick.js"></script>
    <script src="assets/js/vendor/jquery.cookie.js"></script>
    <script src="assets/js/vendor/jquery.js"></script>
    <script src="assets/js/vendor/modernizer.js"></script>
    <script src="assets/js/vendor/placeholder.js"></script>
    <!-- call css-->
    <link rel="stylesheet" type="text/css" href="assets/stylesheets/css/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="assets/stylesheets/css/normalize.css">
  </head>
  <body>
    <nav data-topbar data-options="is_hover: false" class="top-bar">
      <!--title-area-->
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
      </ul>
      <!-- /title-area-->
      <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>
            </ul>
          </li>
        </ul>
        <!-- Left Nav Section-->
        <ul class="left">
          <li><a href="#">Left Nav Button</a></li>
        </ul>
      </section>
    </nav>
  </body>
</html>
            

         

navigationdropdownBroken

Hey all. I'm pretty new to Foundation (used 4 briefly in the past, but that was mainly just experimentation).

I'm working on developing an E-Sports site with a friend, and early on in development I ran into such a trivial problem that I just can't wrap my head around. I've tried to narrow the problem down as much as I can, but no such luck.

My problem? I can't get the dropdowns in Foundation to work.

Things I've tried:
1. Compiling just the topbar and dropdown components of Foundation SCSS
2. Using pre-compiled Foundation CSS
3. Using the click-only (disabling hover) behavior mod added to the nav class.

What can I do here..? Version of Foundation is 5.2.1
Any help whatsoever would be GREATLY appreciated.

P.S., I included my .jade file in case anyone has the same problem I do with focusing on mundane .html files.

doctype html
html(lang="en")
    head
        title= pageTitle
        
        // meta data
        
        // call js
        script(src="assets/js/foundation.min.js")
        script(src="assets/js/vendor/fastclick.js")
        script(src="assets/js/vendor/jquery.cookie.js")
        script(src="assets/js/vendor/jquery.js")
        script(src="assets/js/vendor/modernizer.js")
        script(src="assets/js/vendor/placeholder.js")
        
        // call css
        link(rel="stylesheet", type="text/css", href="assets/stylesheets/css/foundation.min.css")
        link(rel="stylesheet", type="text/css", href="assets/stylesheets/css/normalize.css")
    
    body

        nav(data-topbar, data-options="is_hover: false").top-bar
            //title-area
            ul.title-area
                li.name
                    h1
                        a(href="#") My Site
                
                li.toggle-topbar.menu-icon
                    a(href="#") Menu
            // /title-area
            
            
            section.top-bar-section
                // Right Nav Section
                ul.right
                    li.active
                        a(href="#") Right Button Active
                        
                    li.has-dropdown
                        a(href="#") Right Button Dropdown
                        
                        ul.dropdown
                            li
                                a(href="#") First link in dropdown

                // Left Nav Section
                ul.left
                    li
                        a(href="#") Left Nav Button
            

         

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <!-- meta data-->
    <!-- call js-->
    <script src="assets/js/foundation.min.js"></script>
    <script src="assets/js/vendor/fastclick.js"></script>
    <script src="assets/js/vendor/jquery.cookie.js"></script>
    <script src="assets/js/vendor/jquery.js"></script>
    <script src="assets/js/vendor/modernizer.js"></script>
    <script src="assets/js/vendor/placeholder.js"></script>
    <!-- call css-->
    <link rel="stylesheet" type="text/css" href="assets/stylesheets/css/foundation.min.css">
    <link rel="stylesheet" type="text/css" href="assets/stylesheets/css/normalize.css">
  </head>
  <body>
    <nav data-topbar data-options="is_hover: false" class="top-bar">
      <!--title-area-->
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">My Site</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
      </ul>
      <!-- /title-area-->
      <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>
            </ul>
          </li>
        </ul>
        <!-- Left Nav Section-->
        <ul class="left">
          <li><a href="#">Left Nav Button</a></li>
        </ul>
      </section>
    </nav>
  </body>
</html>
            

         
Marc McGee over 5 years ago

Maybe try putting you js calls down right before the closing body tag?

Marc McGee over 5 years ago

Also maybe change the load order of your .css

normalize.css first followed by foundation.css

One exception on the js. Put modernizer.js below the css just before the closing head tag.

head
normalize.css
foundation.css
modernizer.js
/head

body

all other .js calls here

/body

James Sterling over 5 years ago

@Marc, I appreciate the reply and the help. Oddly enough, I forgot to abide by common practice in organizing the js and css calls, but that wasn't the problem.

Turns out I missed something incredibly simple:
html(class="no-js", lang="en")

facepalming for the rest of the night.

Thanks for you help, though.