基础 CSS 画布外方向

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，可以轻松设计美观的响应式网站、应用程序和电子邮件，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 SaaS 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

画布外面板位于视口之外，并在激活时滑动。这个非画布菜单可以从左、右、上或下打开，重叠我们的内容，推送我们的内容，并且可以使用粘性元素。这些是主要针对移动屏幕的响应式移动模式。这也可以用作中型和桌面屏幕上的侧边栏。

Directions使 Off-canvas 容器需要一个定位类来确定它从左侧、右侧、顶部或底部打开的视口的哪一侧。

基础 CSS 画布外方向类：

• position-left：此类从左侧打开视口。
• position-right：此类从右侧打开视口。
• position-top：此类从顶部打开视口。
• position-bottom：此类从底部打开视口。

句法：

笔记：

1. 必须将data-off-canvas属性添加到 off-canvas 容器中。
2. 画布外的id属性是唯一的，因此它可以被按钮的点击触发器定位。
3. 必须将data-off-canvas-content属性添加到包含页面内容的 off-canvas-content 容器中。
4. 属性data-open或data-toggle被添加到任何元素以在单击它时打开一个画布外面板。
5. 属性data-open或data-toggle的值必须等于 off-canvas 容器的唯一 id。
6. data-close属性用于关闭画布外面板。
7. 画布外容器的默认值为position: fixed 。

示例 1：这是一个基本示例，说明了使用 Foundation CSS 制作的左右画布外方向类。

HTML

  

    
    
    
  
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Off-canvas Directions Classes
    
    
        
          Open Left
        
        
          Open Right
        
        
            
                
                    
                        I am inside left off-canvas
                    
                    
                        
                    
                
            
            
                
                    
                        I am inside right off-canvas
                    
                    
                        
                    
                
            
        
    
    
        $(document).foundation();
    

  

输出：

示例 2：这是一个基本示例，说明了使用 Foundation CSS 制作的顶部和底部画布外方向类。

HTML

  

    
    
    
      
    
    
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Off-canvas Directions Classes
    
    
        
          Open Top
        
        
          Open Bottom
        
        
            
                
                    
                        Top
                        
                            ×
                        
                    
                    
                        
                    
                
            
            
                
                    
                        
                            ×
                        
                        Bottom
                    
                    
                        
                    
                
            
        
    
    
        $(document).foundation();
    

  

输出：

参考： https://get.foundation/sites/docs/off-canvas.html#off-canvas-directions