[Beginner] Stuck with off-canvas and button to toggle menu

Hi everyone (first post),

Sorry for the beginner question (I started foundation less than 24 hours ago …). I got most of the desired design for my website, except for the off-canvas vertical-menu. The menu itself works perfectly (off for small and medium, and on for large). However, I can’t succeed with having a (working) toggle button for the menu. The button should appear only for small and medium.
I have tried the examples in the doc without success.

Here is my working example without the toggle button mentioned above. Any tip?

<!doctype html>
<html class="no-js" lang="en">

<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>J.-F. Baffier: homepage</title>
  <link rel="stylesheet" href="assets/css/foundation.css">
  <link rel="stylesheet" href="assets/css/swp.css">
</head>


<body>

  <div class="off-canvas position-left reveal-for-large" id="offCanvas" data-off-canvas>
    <div class="top-bar">
      <ul class="vertical dropdown menu" id="menu" data-dropdown-menu>
        <!-- <img src="pic.jpg" alt="J.-F. Baffier" class="avatar"> -->
        <li class="menu-text">Jean-François BAFFIER</li>
        <li class="is-active"><a href="index.html">Home</a></li>
        <li><a href="publications.html">Publications</a></li>
        <li><a href="#">Research</a></li>
        <li><a href="#">Teachings</a></li>
        <li><a href="#">Softwares</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">CV</a></li>
        <li><a href="#">Icon: RG etc</a></li>
      </ul>
    </div>
  </div>

  <div class="off-canvas-content" data-off-canvas-content>
    <div class="grid-x content-odd">
      <div class="cell medium-8 large-9">
        <h1>Biography</h1>
        <hr>
        Jean-Francois Baffier graduated Master course at University Paris-Sud in 2011 and got his Ph.D. from the University of Tokyo in 2015. He was a member of the ERATO Kawarabayashi Large Project from May 2015 to August 2017 in Tokyo and Sendai.
        His main research topic covers modeling of failures and routing in Networks. Other research topics involve Game analysis and AI for Games (in particular Starcraft), but also Local Search algorithm (HPC) and limited memory algorithms. He is
        currently supported by the Japanese Society for the Promotion of Science as a JSPS-CNRS research fellow (Sept. 2017-2019) and hosted at the Tokyo Institute of Technology (Japan). He also was a JFLI member from October 2011 to August 2018
        (record of JFLI longevity).
      </div>
      <div class="cell medium-4 large-3">
        <!-- <img src="cs.png" alt="Compressed Stack">
        <img src="bmilp.png" alt="BMILP Adaptive Flow">
        <img src="knowledge.png" alt="Flow of Knowledge"> -->

      </div>
    </div>

    <div class="grid-x content-even">
      <div class="cell small-6">6 cells 1</div>
      <div class="cell small-6">6 cells 2</div>
    </div>

    <div class="grid-x content-odd">
      <div class="cell">grants</div>
    </div>

  </div>

  <script src="assets/js/vendor.js"></script>
  <script src="assets/js/foundation.js"></script>

</body>

</html>

Hi,

I see no $(document).foundation() in your code. Did you miss the part to initialize Foundation Sites?

Can you provide a working codepen with yout code?
We have visibility helper classes. See https://get.foundation/sites/docs/visibility.html

Thanks for the quick reply.

I just hit the Download button on the foundation website, that provided me with a zip containing an index file (without $(document).foundation()) and an asset folder the CSS and js files.
Is it critical? (I will try to look a bit more at the installation part)

As it is my first site for a decade, I was not planning to use SASS, node, or other recent tools unless I need it before understanding Foundation and recent HTML/CSS.

I was not aware of CodePen, it is really, here it goes: https://codepen.io/azzaare/pen/XWmONqr

Thank you for the link for the visibility helper classes. I will check it asap.

I guess you downloaded the complete setup from https://download.get.foundation/sites/download.

This is not needed, please see the CDN files that you can download and host yourself:
https://get.foundation/sites/docs/installation.html
https://unpkg.com/browse/foundation-sites@6.6.3/dist/

Thank you for your answer. I am sorry to come back to you so late (things are a bit chaotic with the covid …)
I think I downloaded that version: https://static.download.foundation/sites-css-latest

I will try to work with some examples on the web till I get what I am doing wrong (probably related to the use of JS). If I am still stuck, I will provide a codepen and ask again!