Базовый javascript не работает должным образом

У меня есть некоторые проблемы, которые устранялись всю неделю. Я попробовал это в IDE скобки и на codepen, но я не смог заставить базовую структуру работать так, как должно быть, как на этом веб-сайте.

например, это должен работать, как показано ниже: https://foundation.zurb.com/building-blocks/blocks/off-canvas-full-screen.html

<div id = "offcanvas-full-screen" class = "offcanvas-full-screen" data-off-canvas data-transition = "overlap">
  <div class = "offcanvas-full-screen-inner">
    <button class = "offcanvas-full-screen-close" aria-label = "Close menu" type = "button" data-close>
      <span aria-hidden = "true">&times;</span>
    </button>
    <ul class = "offcanvas-full-screen-menu">
      <li><a href = "#">Home</a></li>
      <li><a href = "#">About us</a></li>
      <li><a href = "#">Services</a></li>
      <li><a href = "#">Contact us</a></li>
    </ul>
  </div>
</div>
<div class = "off-canvas-content" data-off-canvas-content>
  <div class = "top-bar">
    <div class = "top-bar-title">
      <strong>Site Title</strong>
    </div>
    <div class = "top-bar-right">
      <button class = "menu-icon dark" type = "button" data-toggle = "offcanvas-full-screen"></button>
    </div>
  </div>
</div>