https://my.naaccr.org/resource/1782207574000/nc__Resources/OffCanvas.js

1$(function() {
2    var htmlElement = $('html');
3    var mainCanvasElement = $('.l-canvas');
4    var offCanvasElement = $('.l-off-canvas');
5    var toggleButtonElement = $('#toggle-off-canvas-left');
6    var offCanvasActiveClass = 's-active';
7    var offCanvasActiveHtmlClass = 's-off-canvas-active';
8
9    /**
10     * @description Shows the off canvas nav.
11     */
12    function showNav() {
13        offCanvasElement.show();
14        htmlElement.addClass(offCanvasActiveHtmlClass);
15        mainCanvasElement.on('click', hideNav);
16        mainCanvasElement.css({ 'cursor': 'pointer' });
17        toggleButtonElement.addClass(offCanvasActiveClass);
18        $(window).scrollTop(0);
19    }
20
21    /**
22     * @description Hides the off canvas nav.
23     */
24    function hideNav() {
25        offCanvasElement.hide();
26        htmlElement.removeClass(offCanvasActiveHtmlClass);
27        mainCanvasElement.off('click', hideNav);
28        mainCanvasElement.css({ 'cursor': 'default' });
29        toggleButtonElement.removeClass(offCanvasActiveClass);
30    }
31
32    /**
33     * @description Initializes the off canvas nav toggle.
34     *              All the "handled" logic below prevents ghost clicks on touch devices. references:
35     *              http://ariatemplates.com/blog/2014/05/ghost-clicks-in-mobile-browsers/
36     *              http://stackoverflow.com/questions/7018919
37     */
38    toggleButtonElement.on('touchstart click', function(e) {
39        e.stopPropagation();
40        e.preventDefault();
41
42        if(e.handled !== true) {
43            if (toggleButtonElement.hasClass(offCanvasActiveClass)) {
44                hideNav();
45            } else {
46                showNav();
47            }
48
49            // Handle the event.
50            e.handled = true;
51        } else {
52            return false;
53        }
54    });
55});