Menu icon Foundation
Off canvas menu- Foundation 6 syntax

Hello!

This is my first post as I am just starting to learn Foundation 6.

I have just completed a lynda.com course for Foundation 5 which teaches you to make a full width menu that collapses for smaller screens. Unfortunately it doesn't work in Foundation 6.

I think it is because the classes have changed. I tried changing them but I still can't get the menu to work.

Would anyone be kind to help me convert this to Foundation 6?

Here's the code-

<div class="off-canvas-wrap" data-offcanvas>
      <div class="inner-wrap">
        <nav class="tab-bar hide-for-medium-up">
            <section class="left-small">
              <a class="left-off-canvas-toggle menu-icon"><span></span></a>
            </section>
        </nav>
            <aside class="left-off-canvas-menu">
              <ul class="off-canvas-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">Accommodations</a>
                 <ul>
                    <li><a href="#">King with Sofa Bed</a></li>
                    <li><a href="#">Two Queen Beds</a></li>
                    <li><a href="#">Pet-Friendly Suite</a></li>
                  </ul>
                </li>
                <li><a href="#">Reservations</a></li>
                <li><a href="#">Meetings &amp; Events</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </aside>
            <a class="exit-off-canvas"></a>

    <!-- top bar code -->
    <nav class="top-bar show-for-medium-up" data-topbar>
      <ul class="title-area">
        <li class="name"></li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
      </ul>
      <section class="top-bar-section">
        <ul>
          <li class="active"><a href="#">Home</a></li>
          <li class="has-dropdown"><a href="#">Accommodations</a>
           <ul class="dropdown">
              <li><a href="#">King with Sofa Bed</a></li>
              <li class="active"><a href="#">Two Queen Beds</a></li>
              <li><a href="#">Pet-Friendly Suite</a></li>
            </ul>
          </li>
          <li><a href="#">Reservations</a></li>
          <li><a href="#">Meetings &amp; Events</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </section>
    </nav>
            

         

menuoff-canvas

Hello!

This is my first post as I am just starting to learn Foundation 6.

I have just completed a lynda.com course for Foundation 5 which teaches you to make a full width menu that collapses for smaller screens. Unfortunately it doesn't work in Foundation 6.

I think it is because the classes have changed. I tried changing them but I still can't get the menu to work.

Would anyone be kind to help me convert this to Foundation 6?

Here's the code-

<div class="off-canvas-wrap" data-offcanvas>
      <div class="inner-wrap">
        <nav class="tab-bar hide-for-medium-up">
            <section class="left-small">
              <a class="left-off-canvas-toggle menu-icon"><span></span></a>
            </section>
        </nav>
            <aside class="left-off-canvas-menu">
              <ul class="off-canvas-list">
                <li><a href="#">Home</a></li>
                <li><a href="#">Accommodations</a>
                 <ul>
                    <li><a href="#">King with Sofa Bed</a></li>
                    <li><a href="#">Two Queen Beds</a></li>
                    <li><a href="#">Pet-Friendly Suite</a></li>
                  </ul>
                </li>
                <li><a href="#">Reservations</a></li>
                <li><a href="#">Meetings &amp; Events</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </aside>
            <a class="exit-off-canvas"></a>

    <!-- top bar code -->
    <nav class="top-bar show-for-medium-up" data-topbar>
      <ul class="title-area">
        <li class="name"></li>
        <li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
      </ul>
      <section class="top-bar-section">
        <ul>
          <li class="active"><a href="#">Home</a></li>
          <li class="has-dropdown"><a href="#">Accommodations</a>
           <ul class="dropdown">
              <li><a href="#">King with Sofa Bed</a></li>
              <li class="active"><a href="#">Two Queen Beds</a></li>
              <li><a href="#">Pet-Friendly Suite</a></li>
            </ul>
          </li>
          <li><a href="#">Reservations</a></li>
          <li><a href="#">Meetings &amp; Events</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </section>
    </nav>
            

         
Rafi Benkual over 3 years ago

That's pretty cool that that you took the Lynda class! I learned from the Foundation 4 version years ago.

I don't think Jen Kramer has a version 6 course out yet but the Foundation 5 is great. You can still use 5, why did you choose to use Foundation 6? There are lots of differences.

What type of menu are you trying to recreate? Can you share an example of the Foundation 5 version here: http://codepen.io/rafibomb/pen/gPGgdm so we can help you more?

Also, have you seen this? http://zurb.com/university/lessons/how-to-re-create-top-bar-with-foundation-6

Izzy over 3 years ago

Hi Rafi!

I really enjoyed the course! Foundation makes it so fast to build an outline of a website.

To be honest, I was not sure how great the differences between the verso 5 and 6 are. I wanted to try Foundation 6 as it is much lighter.

I am trying to create a top bar menu that will turn to off-canvas mobile-style menu on small screens.

The tutorial you linked to is exactly what I wanted!

Now the next part for me is to try to connect it to WordPress- I am trying to learn Foundation and how to build a custom WordPress theme at the same time.

Do you know of any tutorials that would teach me how to do that?

I am good with HTML and CSS but I do not know PHP!

Izzy over 3 years ago

This is the code from the tutorial-

<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 vertical medium-horizontal" 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>

Brian Tan over 3 years ago

Please refer to this post (2nd reply) for F6 responsive off-canvas menu structure.

http://foundation.zurb.com/forum/posts/37688-top-bar-for-medium-up-and-off-canvas-on-small

Izzy over 3 years ago

Thank you both!

Do you know any tutorials that explain how to connect Foundation menu to WordPress?

Ryan McCready over 2 years ago

Good news! Thanks to your feedback there was a push to build something better. In Foundation 6.3, released on Dec 15th, there is an all new improved off-canvas. We’d love to hear the challenges or common patterns with off-canvas are you working with. Check out the details and jump in on the conversation!

 

 

http://foundation.zurb.com/forum/posts/49868-new-improved-off-canvas-in-foundation-63