Menu icon Foundation
Off Canvas Drop Down with Foundation 6

Hello, 

I'm wondering what is the best way to create a dropdown with the Off Canvas feature using Foundation 6 with SASS. I have included the code from my index.html page.

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- offCanvas Menu -->
        <ul class="vertical menu">
          <li><a href="#">PRODUCTS</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>

      </div>

      <div class="off-canvas-content" data-off-canvas-content>

        <!-- Small Navigation -->
        <div class="title-bar show-for-small-only">
          <div class="title-bar-left">
            <span class="title-bar-title"><a href="#"><img src="../assets/img/safespan_logo_small.png"></a></span>
          </div>
          <div class="title-bar-right">
            <button class="menu-icon" type="button" data-open="offCanvas"></button>
          </div>
        </div>

        <!-- Medium-Up Navigation -->
        <nav class="top-bar hide-for-small-only" id="nav-menu">

          <div class="logo-wrapper">
            <div class="logo">
              <a href="#"><img src="../assets/img/safespan_logo.png"></a>
            </div>
          </div>

          <!-- Left Nav Section -->
          <div class="top-bar-left">
            <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
              <li class="has-submenu">
                <a href="#">PRODUCTS</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Bridge Platforms</a></li>
                  <li><a href="#">Scaffolding</a></li>
                  <li><a href="#">Mast Climbers</a></li>
                </ul>
              </li>
              <li><a href="#">NEWS</a></li>
            </ul>
          </div>

          <!-- Right Nav Section -->
          <div class="top-bar-right">
            <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
              <li><a href="#">GALLERY</a></li>
              <li class="has-submenu">
                <a href="#">CONTACT</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Locations</a></li>
                  <li><a href="#">History</a></li>
                  <li class="has-submenu"><a href="#">Careers</a>
                    <ul class="submenu menu vertical" data-submenu>
                      <li>
                        <a href="#">Apply</a>
                      </li>
                    </ul>
                  </li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </li>
            </ul>
          </div>

        </nav>
        <div>
          <br /><br /><br /><br /><br /><br /><br />
          
        </div>
      </div>
    </div>
</div>

 

Thank You

foundation 6off canvasdrop down

Hello, 

I'm wondering what is the best way to create a dropdown with the Off Canvas feature using Foundation 6 with SASS. I have included the code from my index.html page.

<div class="off-canvas-wrapper">
    <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas>

        <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
          <span aria-hidden="true">&times;</span>
        </button>

        <!-- offCanvas Menu -->
        <ul class="vertical menu">
          <li><a href="#">PRODUCTS</a></li>
          <li><a href="#">NEWS</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>

      </div>

      <div class="off-canvas-content" data-off-canvas-content>

        <!-- Small Navigation -->
        <div class="title-bar show-for-small-only">
          <div class="title-bar-left">
            <span class="title-bar-title"><a href="#"><img src="../assets/img/safespan_logo_small.png"></a></span>
          </div>
          <div class="title-bar-right">
            <button class="menu-icon" type="button" data-open="offCanvas"></button>
          </div>
        </div>

        <!-- Medium-Up Navigation -->
        <nav class="top-bar hide-for-small-only" id="nav-menu">

          <div class="logo-wrapper">
            <div class="logo">
              <a href="#"><img src="../assets/img/safespan_logo.png"></a>
            </div>
          </div>

          <!-- Left Nav Section -->
          <div class="top-bar-left">
            <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
              <li class="has-submenu">
                <a href="#">PRODUCTS</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Bridge Platforms</a></li>
                  <li><a href="#">Scaffolding</a></li>
                  <li><a href="#">Mast Climbers</a></li>
                </ul>
              </li>
              <li><a href="#">NEWS</a></li>
            </ul>
          </div>

          <!-- Right Nav Section -->
          <div class="top-bar-right">
            <ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
              <li><a href="#">GALLERY</a></li>
              <li class="has-submenu">
                <a href="#">CONTACT</a>
                <ul class="submenu menu vertical" data-submenu>
                  <li><a href="#">Locations</a></li>
                  <li><a href="#">History</a></li>
                  <li class="has-submenu"><a href="#">Careers</a>
                    <ul class="submenu menu vertical" data-submenu>
                      <li>
                        <a href="#">Apply</a>
                      </li>
                    </ul>
                  </li>
                  <li><a href="#">Contact</a></li>
                </ul>
              </li>
            </ul>
          </div>

        </nav>
        <div>
          <br /><br /><br /><br /><br /><br /><br />
          
        </div>
      </div>
    </div>
</div>

 

Thank You

Rafi Benkual over 3 years ago

It seems like you are looking to use top-bar with dropdown on medium and larger screens and off-canvas on small screens?

If so this Building Block will help http://zurb.com/building-blocks/top-bar-with-off-canvas

Brian Platter over 3 years ago

My apologies, I wasn't clearer in my original post. I have the top-bar with dropdown on medium/larger screens and off canvas menu working already. I'm having trouble adding the drop down option within the Off-Canvas menu. 

Brian Platter over 3 years ago

SOLVED

Ryan McCready almost 3 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