Menu icon Foundation

Designer | Sebastopol, CA

My Posts


My Comments

Michael Lehman commented on Jesse Friedman's post about 5 years

I'm having the same issue today. Did you find a fix for this?

Michael Lehman commented on rohitya's post over 5 years

Hi- Here's a clip from a project I'm working on. Accordion is an awesome "off-canvas-menu" tool! Here's the gist of it... make sure the following code is inserted inside the right spot in the layout! Take a look at the main off-canvas doc's page for overall page code for the wrappers: http://foundation.zurb.com/docs/components/offcanvas.html
Paste this in once you're inside...

<aside class="left-off-canvas-menu">
  <div class="large-10 large-centered columns">
    <ul class="off-canvas-list">
      <li>
        <dl class="accordion" data-accordion="" style="">
          <dd>
            <a href="#panel1" style="font-weight:bold;">Beer Style</a>
            <div id="panel1" class="content" style="line-height:1.3;padding:0;background:#333333;">
              <ul class="off-canvas-list">
                <li><a href="blahblah.html" data-search="">Belgian Ales</a></li>
                <li><a href="blahblah.html" data-search="">American Ales</a></li>
                <li><a href="blahblah.html" data-search="">Sour Beers</a></li>
              </ul>
            </div>
          </dd>
          <dd>
             <a href="#panel2" style="font-weight:bold;">ABV&#37;</a>
             <div id="panel2" class="content" style="line-height:1.3;color:#ffffff;padding:0;">
               <ul class="off-canvas-list">
                <li><a href="blahblah.html" data-search="">under 5&#37;</a></li>
                <li><a href="blahblah.html" data-search="">5-7&#37;</a></li>
                <li><a href="blahblah.html" data-search="">8-10&#37;</a></li>
                <li><a href="blahblah.html" data-search="">over 10&#37;</a></li>
              </ul>
            </div>
          </dd>
          <dd>
            <a href="#panel3" style="font-weight:bold;">Brewery</a>
            <div id="panel3" class="content" style="line-height:1.3;color:#ffffff;padding:0;">
              <ul class="off-canvas-list">
                <li><label>USA</label></li>
                <li><a href="blahblah.html" data-search="">Pacific Northwest</a></li>
                <li><a href="blahblah.html" data-search="">Southwest</a></li>
                <li><a href="blahblah.html" data-search="">Midwest</a></li>
                <li><a href="blahblah.html" data-search="">South</a></li>
                <li><a href="blahblah.html" data-search="">East Coast</a></li>
                <li><label>Europe</label></li>
                <li><a href="blahblah.html" data-search="">Austria</a></li>
                <li><a href="blahblah.html" data-search="">Belgium</a></li>
                <li><a href="blahblah.html" data-search="">Czech Republic</a></li>
                <li><a href="blahblah.html" data-search="">Denmark</a></li>
                <li><a href="blahblah.html" data-search="">Germany</a></li>
              </ul>
            </div>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</aside>

Hope it helps!

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Jesse Friedman's post about 5 years

I'm having the same issue today. Did you find a fix for this?

You commented on rohitya's post over 5 years

Hi- Here's a clip from a project I'm working on. Accordion is an awesome "off-canvas-menu" tool! Here's the gist of it... make sure the following code is inserted inside the right spot in the layout! Take a look at the main off-canvas doc's page for overall page code for the wrappers: http://foundation.zurb.com/docs/components/offcanvas.html
Paste this in once you're inside...

<aside class="left-off-canvas-menu">
  <div class="large-10 large-centered columns">
    <ul class="off-canvas-list">
      <li>
        <dl class="accordion" data-accordion="" style="">
          <dd>
            <a href="#panel1" style="font-weight:bold;">Beer Style</a>
            <div id="panel1" class="content" style="line-height:1.3;padding:0;background:#333333;">
              <ul class="off-canvas-list">
                <li><a href="blahblah.html" data-search="">Belgian Ales</a></li>
                <li><a href="blahblah.html" data-search="">American Ales</a></li>
                <li><a href="blahblah.html" data-search="">Sour Beers</a></li>
              </ul>
            </div>
          </dd>
          <dd>
             <a href="#panel2" style="font-weight:bold;">ABV&#37;</a>
             <div id="panel2" class="content" style="line-height:1.3;color:#ffffff;padding:0;">
               <ul class="off-canvas-list">
                <li><a href="blahblah.html" data-search="">under 5&#37;</a></li>
                <li><a href="blahblah.html" data-search="">5-7&#37;</a></li>
                <li><a href="blahblah.html" data-search="">8-10&#37;</a></li>
                <li><a href="blahblah.html" data-search="">over 10&#37;</a></li>
              </ul>
            </div>
          </dd>
          <dd>
            <a href="#panel3" style="font-weight:bold;">Brewery</a>
            <div id="panel3" class="content" style="line-height:1.3;color:#ffffff;padding:0;">
              <ul class="off-canvas-list">
                <li><label>USA</label></li>
                <li><a href="blahblah.html" data-search="">Pacific Northwest</a></li>
                <li><a href="blahblah.html" data-search="">Southwest</a></li>
                <li><a href="blahblah.html" data-search="">Midwest</a></li>
                <li><a href="blahblah.html" data-search="">South</a></li>
                <li><a href="blahblah.html" data-search="">East Coast</a></li>
                <li><label>Europe</label></li>
                <li><a href="blahblah.html" data-search="">Austria</a></li>
                <li><a href="blahblah.html" data-search="">Belgium</a></li>
                <li><a href="blahblah.html" data-search="">Czech Republic</a></li>
                <li><a href="blahblah.html" data-search="">Denmark</a></li>
                <li><a href="blahblah.html" data-search="">Germany</a></li>
              </ul>
            </div>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</aside>

Hope it helps!

Posts Followed

Following

  • No Content

Followers

  • No Content