基础 CSS 厨房水槽顶栏

Foundation CSS是 CSS 的前端框架，用于构建可在任何设备上完美运行的响应式网站、应用程序和电子邮件。它使用 HTML、CSS 和 Javascript 编写，并被许多著名公司使用，如 Amazon、Facebook、eBay 等。它使用 Grunt 和 Libsass 等包进行快速编码和控制，并使用 Saas 编译器加快开发速度。

Kitchen Sink具有在网站和应用程序中工作的元素。 Kitchen Sink Top Bar用于在我们的网页顶部创建导航栏。

使用的类：

• top-bar：用于在屏幕顶部创建顶部栏。
• top-bar-left：用于创建顶部栏左侧的元素。
• top-bar-right：用于创建顶部栏右侧的元素。

句法：

  

    .......
  

示例 1：下面是说明使用top-bar和top-bar-left类使用 Kitchen Sink Top Bar 的示例。

HTML

  

    
  
    
    
  
    
    

  

  
      GeeksforGeeks
  
    
  Foundation CSS Kitchen Sink Top Bar
  
  
      
          
              GeeksforGeeks
              Menu1
              Menu2
              Menu3
              Menu4
          
      
  

  

输出：

左上栏

示例 2：下面是使用top-bar、top-bar-left和top-bar-right类说明使用 Kitchen Sink Top Bar 的示例。

HTML

  

    
  
    
    
  
    
    

  

    
        GeeksforGeeks
    
  
    Foundation CSS Kitchen Sink Top Bar
  
     
        
          
            GeeksforGeeks
            Menu1
            Menu2
  
            
              Dropdown
              
                Item1
                Item2
                Item3
                Item4
                Item5
              
            
  
            Menu5
            Menu6
          
        
  
        
          
            
            Search
          
        
     
  
    
      $(document).ready(function () {
          $(document).foundation();
      })
    

  

输出：

两侧顶栏

参考链接： https://get.foundation/sites/docs/kitchen-sink.html#top-bar