Menu icon Foundation
Dropdown Menu Doesn't Work

Hi, i'm new to foundation and fallowing a tutorial. my problem is top-nav dropdown menu doesn't work when i hover over it or click. is there something i am missing?

i created the project using compass and copied the files inside the foundation/sass folder which is inside ruby/gems directory to my project's sass folder (these files are _foundation.scss and foundation folder).
i also included the index.html file below as a link. I appreciate your help. :)

https://www.dropbox.com/s/99dtjvvc140k24r/index.html

<nav class="top-bar">
    <ul class="title-area">
		<li class="name">
				<h1><a href="#">LOGO</a></h1>
		</li>
	</ul>
	<section class="top-bar-section">
	    <ul class="left">
			<li class="divider"></li>
			<li class="active"><a href="#">Menu Item 1</a></li>
			<li class="divider"></li>				
			<li><a href="#">Menu Item 2</a></li>
			<li class="divider"></li>
			<li class="has-dropdown"><a href="#">Menu Item 3</a></li>
				<ul class="dropdown">
					<li><a href="#">Submenu 1 </a></li>
					<li><a href="#">Submenu 2</a></li>
					<li><a href="#">Submenu 3</a></li>
					<li><a href="#">Submenu 4</a></li>
				</ul>				
		</ul>
	</section>
</nav>
            

         

dropdowntopbar

Hi, i'm new to foundation and fallowing a tutorial. my problem is top-nav dropdown menu doesn't work when i hover over it or click. is there something i am missing?

i created the project using compass and copied the files inside the foundation/sass folder which is inside ruby/gems directory to my project's sass folder (these files are _foundation.scss and foundation folder).
i also included the index.html file below as a link. I appreciate your help. :)

https://www.dropbox.com/s/99dtjvvc140k24r/index.html

<nav class="top-bar">
    <ul class="title-area">
		<li class="name">
				<h1><a href="#">LOGO</a></h1>
		</li>
	</ul>
	<section class="top-bar-section">
	    <ul class="left">
			<li class="divider"></li>
			<li class="active"><a href="#">Menu Item 1</a></li>
			<li class="divider"></li>				
			<li><a href="#">Menu Item 2</a></li>
			<li class="divider"></li>
			<li class="has-dropdown"><a href="#">Menu Item 3</a></li>
				<ul class="dropdown">
					<li><a href="#">Submenu 1 </a></li>
					<li><a href="#">Submenu 2</a></li>
					<li><a href="#">Submenu 3</a></li>
					<li><a href="#">Submenu 4</a></li>
				</ul>				
		</ul>
	</section>
</nav>
            

         
Mantis almost 6 years ago

Do you include javascript and initialise foundation?

Moreover u miss attrribute "data-topbar" .

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

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

Mantis almost 6 years ago

And :

<nav class="top-bar" data-topbar>

burak almost 6 years ago

yes all the scripts are exist in the document and directory names are correct. i added the "data-topbar" and it didn't solve the problem.

Iain Matchett almost 6 years ago

Jquery isn't loaded before the foundation scripts, add the following line to the head of the document:

I can see that you're trying to defer loading of scripts until after pageload, I'd just stick an Async tag on the foundation scripts and have the jquery line as-is in the head...

Mantis almost 6 years ago

Yes you must load jquery first after foundation script and finish with component foundation script.

The best is at the end of but u can also write it in

Rafi Benkual almost 6 years ago

@mantis is right, you need <nav class="top-bar" data-topbar> IF you are on Foundation 5.

It tells the JavaScript to load in the necessary HTML to make the topbar work as expected, saving you time and typing.


But you are using Foundation 4 right?

Foundation 4 Example:

<nav class="top-bar">
  <ul class="title-area">
    <!-- Title Area -->
    <li class="name">
      <h1><a href="#">Top Bar Title </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">
    <!-- Left Nav Section -->
    <ul class="left">
      <li class="divider"></li>
      <li class="active"><a href="#">Main Item 1</a></li>
      <li class="divider"></li>
      <li><a href="#">Main Item 2</a></li>
      <li class="divider"></li>
      <li class="has-dropdown"><a href="#">Main Item 3</a>

        <ul class="dropdown">
          <li class="has-dropdown"><a href="#">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><label>Dropdown Level 2 Label</label></li>
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><label>Dropdown Level 3 Label</label></li>
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
      <li class="divider"></li>
    </ul>

    <!-- Right Nav Section -->
    <ul class="right">
      <li class="divider hide-for-small"></li>
      <li class="has-dropdown"><a href="#">Main Item 4</a>

        <ul class="dropdown">
          <li><label>Dropdown Level 1 Label</label></li>
          <li class="has-dropdown"><a href="#" class="">Dropdown Level 1a</a>

            <ul class="dropdown">
              <li><a href="#">Dropdown Level 2a</a></li>
              <li><a href="#">Dropdown Level 2b</a></li>
              <li class="has-dropdown"><a href="#">Dropdown Level 2c</a>

                <ul class="dropdown">
                  <li><a href="#">Dropdown Level 3a</a></li>
                  <li><a href="#">Dropdown Level 3b</a></li>
                  <li><a href="#">Dropdown Level 3c</a></li>
                </ul>
              </li>
              <li><a href="#">Dropdown Level 2d</a></li>
              <li><a href="#">Dropdown Level 2e</a></li>
              <li><a href="#">Dropdown Level 2f</a></li>
            </ul>
          </li>
          <li><a href="#">Dropdown Level 1b</a></li>
          <li><a href="#">Dropdown Level 1c</a></li>
          <li class="divider"></li>
          <li><label>Dropdown Level 1 Label</label></li>
          <li><a href="#">Dropdown Level 1d</a></li>
          <li><a href="#">Dropdown Level 1e</a></li>
          <li><a href="#">Dropdown Level 1f</a></li>
          <li class="divider"></li>
          <li><a href="#">See all &rarr;</a></li>
        </ul>
      </li>
      <li class="divider"></li>
      <li class="has-form">
        <form>
          <div class="row collapse">
            <div class="small-8 columns">
              <input type="text">
            </div>
            <div class="small-4 columns">
              <a href="#" class="alert button">Search</a>
            </div>
          </div>
        </form>
      </li>
      <li class="divider show-for-small"></li>
      <li class="has-form">
        <a class="button" href="#">Button!</a>
      </li>
    </ul>
  </section>
</nav>

Rafi Benkual almost 6 years ago

Also your index file, is missing some important parts.

You are on Foundation 4 so it should look like this:

<!DOCTYPE html>
<!--[if IE 8]>          <html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Foundation 4</title>


  <link rel="stylesheet" href="css/foundation.css">


  <script src="js/vendor/custom.modernizr.js"></script>

</head>
<body>

and at the bottom:

 <script>
  document.write('<script src=' +
  ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
  '.js><\/script>')
  </script>

  <script src="js/foundation.min.js"></script>


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

burak almost 6 years ago

@Rafi Benkual, yes i have foundation ver. 4.3.2. i copied your code and pasted it still didn't work. i am using sass so there is only app.css in my css folder. _foundation.scss and other files are merged into app.css. i don't have foundation.min.js in my js folder but i have foundation.js in js/foundation folder so i linked to it.

None of the methods above worked for me, thanks for your efforts, guys. tomorrow i'll try version 5. let's see if it works..

[email protected] almost 6 years ago

I had trouble getting the drop down to show up... But similar to Mantis above, It seems that the following load order worked (in my Rails app). That is, foundation had to be loaded below the jquery requires:

//= require jquery
//= require jquery_ujs
//= require jquery-1.10.1
//= require jquery.cookie
//= require jquery.joyride-2.1
//= require foundation
//= require turbolinks
//= require_tree .