Foundation CSS 厨房水槽手风琴菜单

Foundation CSS是一个免费的开源前端 CSS 框架，用于构建可在任何类型的设备上运行的美观、响应迅速的网站、应用程序和电子邮件。它是使用 HTML、CSS 和 Javascript 编写的。亚马逊、Facebook、迪士尼等许多公司都在使用它。它使用 Saas 编译器来加快开发速度，并使用 Grunt 和 Libsass 等软件包进行快速编码和控制。

Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Accordion Menu是具有某些效果的可折叠水平或垂直菜单。该菜单可以水平或垂直创建，菜单项可以水平或垂直方式排列。

基础 CSS 厨房水槽手风琴菜单类：

• menu ：此类用于创建菜单。
• vertical ：此类用于创建垂直菜单。
• Horizontal ：此类用于创建水平菜单。

句法：

  

    Menu 1/a>
    

      

        sub-item 1
      
      
sub-item 2
      
sub-item 3
    
  

示例 1：

HTML

  

    Foundation CSS Kitchen Sink Accordion Menu
    
    
    
    
    
    

  

    
        GeeksforGeeks
    
    Foundation CSS Kitchen Sink Accordion Menu
  
    
        
            Menu 1
            
                Item 1
                Item 2
                Item 3
            
        
        
            Menu 2
            
                Item A
                Item B
            
        
        Menu 3
    
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出：

Foundation CSS 厨房水槽手风琴菜单

示例 2：

HTML

  

    Foundation CSS Kitchen Sink Accordion Menu
    
    
    
    
    
    

  

    
        GeeksforGeeks
    
    Foundation CSS Kitchen Sink Accordion Menu
  
    
        
            Menu 1
            
                Item 1
  
                    
                        sub-item 1A
                        sub-item 1B
                    
                
                Item 2
                Item 3
            
        
        
            Menu 2
            
                Item A
                Item B
            
        
        Menu 3
    
  
    
        $(document).ready(function () {
            $(document).foundation();
        })
    

  

输出：

Foundation CSS 厨房水槽手风琴菜单

参考： https://get.foundation/sites/docs/kitchen-sink.html#accordion-menu