Building off-canvas menus with Sass and JavaScript

Foundation comes with a module for off-canvas menus. Off-canvas menus are positioned outside the viewport and slide in when activated. In this recipe, you will learn how to set up an off-canvas menu for your Foundation project. Off-canvas menus require both CSS and JavaScript code.

Getting ready

For this recipe, you have to create a new Foundation project, as described in the Installing Foundation CLI recipe of this chapter. You will use the same styles as used before in the Creating semantic grids with Foundation recipe of this chapter to create an example of an off-canvas menu. The off-canvas requires JavaScript too. An explanation on JavaScript usage is beyond the scope of this book.

How to do it...

The following steps will show you how to create an off-canvas menu for your projects:

1. Copy the files of the Creating semantic grids with Foundation recipe into your project folder.
2. Now, edit and change the app.scss file to import the off-canvas...