Question

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

我希望左侧的菜单导航始终隐藏在窄视图中（＆lt; 961pixels）。切换div始终显示。就像这里：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>'
            }
        }
    }
});

我尝试在图层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

上查看我的搜索结果

侧边栏总是隐藏在HTML5UP prologue / Skeljs框架上

1 个答案: