基础 CSS 手风琴菜单

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

Foundation CSS Accordion Menu用于将基本的垂直菜单转换为可扩展的手风琴菜单。要将菜单转换为手风琴菜单，则使用data-accordion-menu属性。在本文中，我们将讨论 Foundation CSS Accordion Menu。

基础 CSS 手风琴菜单类：

• 手风琴菜单：该类用于将基本菜单转换为手风琴菜单。

句法：

   ....

示例 1：以下代码演示了 Foundation CSS Accordion 菜单。

HTML

   Foundation CSS Accordion Menu 
  
  
  
  
  
  
  
  

  

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

输出：

基础 CSS 手风琴菜单

示例 2：以下代码演示了带有menu 和 sub-menus的 Foundation CSS Accordion Menu。

HTML

  

   Foundation CSS Accordion Menu 
  
  
  
  
  
  
  
  

  

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

输出：

基础 CSS 手风琴菜单

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