Question

背景：我正在尝试实现一个响应式导航系统 - 一种用于移动设备的离线画布导航，可以更改为导航中的幻灯片以获得更广泛的设备上下文（差异很微妙但很重要 - 在较大的屏幕上导航重叠内容，而对于移动设备，它将内容推到一边。）

我已经关注了非常有用的guide关于画布外导航的内容。我的问题是，对于较大的设备上下文（例如桌面），我的nav-close-btn需要双击才能关闭，或者有时需要三次点击（它不应该 - 只需点击一下即可在移动设备上正常运行）。我正在使用媒体查询来触发导航更改（我的所有转换都是在css中创建的）但是javascript中有一些内容会导致更大的屏幕导航问题。

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>

我在教程中使用David Bushnell的javascript，因为我试图理解这一点：

/*!
     *
     *  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);

这很奇怪，我第一次打开菜单（桌面大小）它完全正常，但在没有页面（重新）加载的任何二次尝试中，都会发生点击问题。也许这个问题与删除和添加锚点有关（因为我正在使用：目标，在逐步增强到非画布之前）？

另一个问题是在非画布实现中隐藏了初始动画，对于大型设备，我看到了最初的“隐藏”动画。

Answer 1

我自己遇到过这个问题，在DOM准备就绪之前解析变量inner，所以如果你在头文件中包含了main.js，它将无法工作。此处还记录了https://github.com/dbushell/Responsive-Off-Canvas-Menu/issues/12

实现离线导航移动与桌面

1 个答案: