Menu icon Foundation
Multi-Level Off-Canvas Menu

Hello, forum.

I'm new to Foundation/SASS (coming from Bootstrap/LESS) and looking forward to any suggestions from the experts here!

What are others doing to satisfy the need for multiple levels in the off-canvas feature? I didn't see anything in the documentation. Hopefully it's on the roadmap -- or someone has a nice solution already?

Here is an example from codrops of an off-canvas menu with multiple levels:

http://tympanus.net/Development/MultiLevelPushMenu/index3.html

I was considering integrating it into my project, but was concerned with the workaround they employ for transforms-causing-aboslute-positioning colliding with Foundation and causing casualties.

Thanks for any advice!

off-canvasmenunavnavigation

Hello, forum.

I'm new to Foundation/SASS (coming from Bootstrap/LESS) and looking forward to any suggestions from the experts here!

What are others doing to satisfy the need for multiple levels in the off-canvas feature? I didn't see anything in the documentation. Hopefully it's on the roadmap -- or someone has a nice solution already?

Here is an example from codrops of an off-canvas menu with multiple levels:

http://tympanus.net/Development/MultiLevelPushMenu/index3.html

I was considering integrating it into my project, but was concerned with the workaround they employ for transforms-causing-aboslute-positioning colliding with Foundation and causing casualties.

Thanks for any advice!

This post has been closed. No new replies can be added.

Caleb Winters over 5 years ago

We have no plans to do anything like the Codrop example.

We do plan to bake the accordion into the off canvas menu though so that you can still have multiple levels of navigation.

Lea over 5 years ago

Hi Just wondering if the accordion menu has been implemented into the off canvas menu?

Rafi Benkual over 5 years ago

@Lea and @David
We have not yet added this functionality. We need some help from the community to push some of this along.

Off Canvas is definitely in its infancy at this stage, but we plan on adding and improving on it in releases to come. If you have any things that you have done and think should be part of the solution for the community, feel free to submit a PR on Github. We'd love to check it out and love getting contributions from the community. Open source is a beautiful thing :)

Thanks!

Lea over 5 years ago

@Rafi and @David

I have created a version of the accordion baked into the off-canvas menu. I haven't fully tested it yet but it is working progress. I also need to change the plus to a minus image on open state but the basic working principle is there. I have added my code.

Screenshots

Closed State Accordion in Off Canvas Menu
http://imgh.us/off_canvas_menu_accord_closed.png

Open State Accordion in Off Canvas Menu
http://imgh.us/off_canvas_menu_accord_open.png

Thanks

Lea

 <ul class="off-canvas-list">
        <li>
          <dl class="accordion" data-accordion>
            <dd>  
              <a href="#panel1" class="topics">Topics</a>      
                <div class="content" id="panel1">
                  <li class="links"><a href="#">DVD</a></li>
                  <li class="links"><a href="#">TV</a></li>
                  <li class="links"><a href="#">Blue-ray</a></li>

                </div>
            </dd>
          </dl>
        </li> 
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact Us</a></li>
        </ul>

```Bespoke CSS


ul.off-canvas-list li a{background-color:#333;border-bottom:medium none;border-top:1px solid #262626}
ul.off-canvas-list li a:hover{background-color:#0D90B3}
ul.off-canvas-list li .links a{border-top:medium none!important;font-size:.9em;margin-top:-2em;line-height:2.2em}
ul.off-canvas-list li a.topics{background-image:url(../images/plus.png);background-position:right center;background-repeat:no-repeat}
.accordion .content.active{background-color:#0D90B3;display:block}
.accordion dd.active a{background-color:#0D90B3}

Rafi Benkual over 4 years ago