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

Posted 2023-02-22

【中文标题】侧边栏始终隐藏在 HTML5UP 序言/Skeljs 框架中

【英文标题】：Sidebar always hidden on HTML5UP prologue/Skeljs framework

【发布时间】：2014-12-16 13:56:39

【问题描述】：

我使用基于 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 定义中添加更多断点，但没有成功。您能否指出正确的方向如何在层定义中添加更多断点，或者这是错误的方式？

【参考方案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查看我的结果

【讨论】：

看起来不错，在您的网站上...。由于生成的源代码，我无法将 toggleLayer DIV 放在哪里。您在结束 BODY 之前添加了 toggleLayer DIV？

您的链接工作正常，但您的切换 div 没有内容...尝试将此添加到您的 css：#sidePanelToggle .toggle:before content: '\f0c9' 您还可以添加内容直接在 Html 中到这个 div