侧边栏始终隐藏在 HTML5UP 序言/Skeljs 框架中

Question

我使用基于 skeljs 框架的 HTML5up Prologue。 http://html5up.net/uploads/demos/prologue/

我希望左侧的菜单导航始终像在窄视图中一样隐藏（http://getskel.com/demos/offcanvasnav.html

代码在 init.js 中 http://html5up.net/uploads/demos/prologue/js/init.js

(function($) {

skel.init({
    reset: 'full',
    breakpoints: {
        'global':   { range: '*', href: 'css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
        'wide':     { range: '961-1880', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
        'normal':   { range: '961-1620', href: 'css/style-normal.css', containers: 960, grid: { gutters: 40 } },
        'narrow':   { range: '961-1320', href: 'css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
        'narrower': { range: '-960', href: 'css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
        'mobile':   { range: '-736', href: 'css/style-mobile.css', grid: { collapse: true } }
    },
    plugins: {
        layers: {
            sidePanel: {
                hidden: true,
                breakpoints: 'narrower',
                position: 'top-left',
                side: 'left',
                animation: 'pushX',
                width: 240,
                height: '100%',
                clickToHide: true,
                html: '<div data-action="moveElement" data-args="header"></div>',
                orientation: 'vertical'
            },
            sidePanelToggle: {
                breakpoints: 'narrower',
                position: 'top-left',
                side: 'top',
                height: '4em',
                width: '5em',
                html: '<div data-action="toggleLayer" data-args="sidePanel" class="toggle"></div>'
            }
        }
    }
});

我尝试在 layer sidePanel/sidepanelToggle 定义中添加更多断点，但没有成功。您能否指出正确的方向如何在层定义中添加更多断点，或者这是错误的方式？

Answer 1

通过对您的文件进行一些修改，我设法隐藏了侧边栏。 - 在您发布的那个javascript中，我已经注释掉了sidePanel和sidePanelToggle上的断点 - 在主 html 文件中，我确保以下 div 显示在正确的位置

<div data-action="toggleLayer" data-args="sidePanel" 
   class="toggle" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer;"></div>

你可以在this link查看我的结果