LATEST NEWS POST

Foundation 6 Off Canvas Menu Auto Close with Smooth Scrolling

Foundation 6 Off Canvas Menu Auto Close with Smooth Scrolling - blog post image
  • Gregg Christofferson
  • November 20, 2016
  • Comment(s) | 1
  • Posted 4 years ago

I love Foundation 6 Framework. It really is one of the most advanced frameworks in the world and it has helped us to build sleek mobile responsive sites very quickly. However, many developers have commented on problems with the off canvas menu, specifically, being able to implement smooth scrolling and auto closing with the menu. In this post, I provide the the HTML and JavaScript I used to get this functionality working on my site.

The HTML

<header id="off-canvas-1"></header> <div class="off-canvas-wrapper"> <div class="off-canvas-wrapper-inner" id="off-canvas-2" data-off-canvas-wrapper="data-off-canvas-wrapper"> <!----------- Canvas Nav -----------> <div class="off-canvas position-left" id="offCanvas-left" data-off-canvas data-position="left"> <ul class="dropdown vertical menu" data-accordion-menu="data-accordion-menu"> <li><a class="scroll-btn" href="#Link1">Link 1</a></li> <li><a class="scroll-btn" href="#Link2">Link 2</a></li> <li><a class="scroll-btn" href="#Link3">Link 3</a></li> </ul> </div> <div class="off-canvas-content" data-off-canvas-content="data-off-canvas-content"> <!--------------- Your Page Content ----------> </div> </div> </div>

The JavaScript (JQuery)

//The below code will check if the link clicked has a class of "scroll-btn". If it does and if the target // is on the same page, the page will smooth scroll to the target. If the off canvas menu is open, it will auto close. $(function() { $('a[href*="#"]:not([href="#"])').click(function() { if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); if($(this).hasClass('scroll-btn')) { if($('#off-canvas-1').hasClass('canvas-menu-open')) { $('#off-canvas-1').removeClass('canvas-menu-open'); if($('#off-canvas-2').hasClass('is-off-canvas-open')) { $('#off-canvas-2').removeClass('is-off-canvas-open'); if($('#off-canvas-2').hasClass('is-open-left')) { $('#off-canvas-2').removeClass('is-open-left'); if($('#offCanvas-left').hasClass('is-open')) { $('#offCanvas-left').removeClass('is-open'); if($('#off-canvas-3').hasClass('is-visible')) { $('#off-canvas-3').removeClass('is-visible'); } } } } } if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); return false; } } } }); });

The last piece of the puzzle is editing the foundation.min.js file. I really prefer to not have to hack this file. Hopefully one day, this functionality makes it into the Foundation framework. For now, this is the workaround I came up with. The file is hard to read because it is minified, but there is just one piece of code you'll need to add. If you open the file in your code editor, you should have some type of "find next" or "find and replace" option. Open that and search for "off-canvas-exit". There should be 3 instances found in this file. You will need to add the following line of code right after this 3rd instance as shown in the screen shot. (Click the image for expanded view)

c.setAttribute("id","off-canvas-3")
foundation.min.js file edit

You can see a working example of this auto closing off canvas menu with smooth scrolling on our Home page. The "Featured Templates", "Complete Online Business", "Our Services" and "Our Team" links are all same page anchor tags with smooth scrolling. Try this out on your website with Foundation 6 and let me know what you think in the comments below. Or, if you've found a different solution, I would love to here what you came up with!

COMMENT (1)

    • Anonymous
    • 21-Nov-2016 10:32 PM

    Thank you so much for the post! I was having this exact same problem with my off canvas menu, tried your solution and it's working perfectly now!

POST A COMMENT


SEARCH
CATEGORIES
TAGS
ARCHIVE
SOCIAL MEDIA
SUBSCRIBE TO OUR BLOG
* Required