实施画布导航移动版与桌面版

Question

Background: I'm attempting to implement a responsive navigation system – an off canvas navigation for mobile that changes to a slide in nav for wider device context (the difference is subtle but important - on larger screen the nav overlaps the content, while for mobile it pushes the content aside).

I've followed the very useful guide about off-canvas navigation. My issue is that for larger device contexts (eg desktop) my nav-close-btn is requiring a double click to close, or sometimes triple click (it shouldn't - it functions correctly on mobile with a single click/touch). I'm using media queries to trigger the navigation change (and all my transitions are created in css) but there is something in the javascript causing an issue with the larger screen nav.

My Base html:

<div id="outer-wrap">  //Used for off-canvas nav on mobile
  <div id="inner-wrap"> //Used for off-canvas nav on mobile
    <header id="top">
      <a class="menu-toggle-primary" id="nav-open-btn" name="top-page" href="#menu">Go to Menu</a> //I use :target as the base before enhancing up to off-canvas
    </header>

    <section class="side-bar"></section>
    <section class="main-content"> </section>


    <section id="menu">
      <nav>
        <div class="block">
          <ul>
            <li></li>
          </ul>
        </div>
      </nav>
      <a class="menu-toggle-secondary" id="nav-close-btn" href="#top">Back to Content</a>
    </section>

   </div>
</div>

I'm using David Bushnell's javascript from the tutorial as I try to understand this:

/*!
     *
     *  Copyright (c) David Bushell | http://dbushell.com/
     *
     */
    (function(window, document, undefined)
    {

        // helper functions

        var trim = function(str)
        {
            return str.trim ? str.trim() : str.replace(/^\s+|\s+$/g,'');
        };

        var hasClass = function(el, cn)
        {
            return (' ' + el.className + ' ').indexOf(' ' + cn + ' ') !== -1;
        };

        var addClass = function(el, cn)
        {
            if (!hasClass(el, cn)) {
                el.className = (el.className === '') ? cn : el.className + ' ' + cn;
            }
        };

        var removeClass = function(el, cn)
        {
            el.className = trim((' ' + el.className + ' ').replace(' ' + cn + ' ', ' '));
        };

        var hasParent = function(el, id)
        {
            if (el) {
                do {
                    if (el.id === id) {
                        return true;
                    }
                    if (el.nodeType === 9) {
                        break;
                    }
                }
                while((el = el.parentNode));
            }
            return false;
        };

        // normalize vendor prefixes

        var doc = document.documentElement;

        var transform_prop = window.Modernizr.prefixed('transform'),
            transition_prop = window.Modernizr.prefixed('transition'),
            transition_end = (function() {
                var props = {
                    'WebkitTransition' : 'webkitTransitionEnd',
                    'MozTransition'    : 'transitionend',
                    'OTransition'      : 'oTransitionEnd otransitionend',
                    'msTransition'     : 'MSTransitionEnd',
                    'transition'       : 'transitionend'
                };
                return props.hasOwnProperty(transition_prop) ? props[transition_prop] : false;
            })();

        window.App = (function()
        {

            var _init = false, app = { };

            var inner = document.getElementById('inner-wrap'),

                nav_open = false,

                nav_class = 'js-nav';


            app.init = function()
            {
                if (_init) {
                    return;
                }
                _init = true;

                var closeNavEnd = function(e)
                {
                    if (e && e.target === inner) {
                        document.removeEventListener(transition_end, closeNavEnd, false);
                    }
                    nav_open = false;
                };

                app.closeNav =function()
                {
                    if (nav_open) {
                        // close navigation after transition or immediately
                        var duration = (transition_end && transition_prop) ? parseFloat(window.getComputedStyle(inner, '')[transition_prop + 'Duration']) : 0;
                        if (duration > 0) {
                            document.addEventListener(transition_end, closeNavEnd, false);
                        } else {
                            closeNavEnd(null);
                        }
                    }
                    removeClass(doc, nav_class);
                };

                app.openNav = function()
                {
                    if (nav_open) {
                        return;
                    }
                    addClass(doc, nav_class);
                    nav_open = true;
                };

                app.toggleNav = function(e)
                {
                    if (nav_open && hasClass(doc, nav_class)) {
                        app.closeNav();
                    } else {
                        app.openNav();
                    }
                    if (e) {
                        e.preventDefault();
                    }
                };

                // open nav with main "nav" button
                document.getElementById('nav-open-btn').addEventListener('click', app.toggleNav, false);

                // close nav with main "close" button
                document.getElementById('nav-close-btn').addEventListener('click', app.toggleNav, false);

                // close nav by touching the partial off-screen content
                document.addEventListener('click', function(e)
                {
                    if (nav_open && !hasParent(e.target, 'menu')) {
                        e.preventDefault();
                        app.closeNav();
                    }
                },
                true);

                addClass(doc, 'js-ready');

            };

            return app;

        })();

        if (window.addEventListener) {
            window.addEventListener('DOMContentLoaded', window.App.init, false);
        }

    })(window, window.document);

It's very odd, the first time I open the menu (for desktop size) it works perfectly fine, but on any secondary attempts without a page (re)load the click issue occurs. Maybe the issue has something to do with removing and adding anchors (as I'm using :target, before progressively enhancing to off-canvas)?

The other issue is that on the off canvas implementation the initial animation is hidden and for larger devices I see the initial "hide" animation.

Answer 1

Just came across this problem myself, the variable inner is parsed before the DOM is ready, so if you have included the main.js in the header, it will not work. Also documented here: https://github.com/dbushell/Responsive-Off-Canvas-Menu/issues/12