Menu icon Foundation
F6 Top Bar tutorial problems

Hi all

Foundation newbie here, hoping you can help.

I've been trying to create a responsive menu that shows a hamburger icon.  

I followed this tutorial: 

https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6

and copy and pasted all the HTML from the demo: http://zurb.com/building-blocks/f6-top-bar

This is my code:

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>


    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
      <div class="title-bar-title">Menu</div>
    </div>
    
    <div class="top-bar" id="main-menu">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Site Title</li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
          <li class="has-submenu">
            <a href="#">One</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
    </div>
    

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

 

However, when I open the HTML file in Chrome and resize the browser, the hamburger menu does not appear, see image below:

Can anyone advise?

Cheers

Martin

 

top-barResponsivehamburgermenu

Hi all

Foundation newbie here, hoping you can help.

I've been trying to create a responsive menu that shows a hamburger icon.  

I followed this tutorial: 

https://zurb.com/expo/lessons/how-to-re-create-top-bar-with-foundation-6

and copy and pasted all the HTML from the demo: http://zurb.com/building-blocks/f6-top-bar

This is my code:

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>


    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
      <button class="menu-icon" type="button" data-toggle></button>
      <div class="title-bar-title">Menu</div>
    </div>
    
    <div class="top-bar" id="main-menu">
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li class="menu-text">Site Title</li>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
          <li class="has-submenu">
            <a href="#">One</a>
            <ul class="submenu menu vertical" data-submenu>
              <li><a href="#">One</a></li>
              <li><a href="#">Two</a></li>
              <li><a href="#">Three</a></li>
            </ul>
          </li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
    </div>
    

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

 

However, when I open the HTML file in Chrome and resize the browser, the hamburger menu does not appear, see image below:

Can anyone advise?

Cheers

Martin

 

Martin Black over 3 years ago

No answer.

I'll go try Bootstrap instead.

Dennis over 3 years ago

You have to call Foundation first. Place the following code right before closing the "</body>" tag

 

<script type="text/javascript">

$(document).ready(function()

{

    $(document).foundation();

});

</script>