基础 CSS 向下钻取菜单

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

向下钻取菜单是 Foundation CSS 的三种菜单模式之一。这会将一系列嵌套列表转换为垂直向下钻取菜单。为了制作一个向下钻取菜单，我们使用标准菜单语法，使用

、
• 和 并将“data-drilldown”类和“vertical menu Drilldown”类添加到根菜单以设置向下钻取。

  要创建子菜单，我们在 旁边放置一个

  ，然后 将打开它旁边的
  。没有子菜单的锚标签将函数普通链接。为了在主菜单中嵌套另一个菜单，我们将“菜单垂直嵌套”类用于嵌套的
  标记。

  基础 CSS 向下钻取菜单类：

  • 垂直菜单向下钻取：这些类应用于
    标记。这会将无序列表转换为向下钻取菜单。
    • 菜单垂直嵌套：这些类应用于
      标签。这会将嵌套的无序列表转换为向下钻取菜单的子菜单。

      句法：

      
          
      Title
          ...
      

      示例 1：此示例演示了使用基础 CSS 制作的向下钻取菜单。

      HTML

        
      
          Foundation CSS Drilldown Menu
        
          
          
        
          
          
          
      
        
      
          
          
              GeeksforGeeks
          
          Foundation CSS Drilldown Menu
          
          
              Tutorial
              Student
              Job
              Login
              Courses
              Programs
              Intern
              Career
            
            
                $(document).foundation();
            
      
        

      
      
      

      输出：

      

      输出

      示例 2：此示例演示了使用基础 CSS 制作的嵌套向下钻取菜单。

      HTML

        
      
          Foundation CSS Drilldown Menu
        
          
          
        
          
          
          
      
        
      
          
          
              GeeksforGeeks
          
          Foundation CSS Drilldown Menu
          
          
              Tutorial
              
                Student
                
                  Campus Ambassador Program
                  School Ambassador Program
                  Project
                  Geek of month
                  Campus Geek of month
                  Placement course
                  Internship
                  Testimonial
                
              
              Job
              Login
            
            
                $(document).foundation();
            
      
        

      输出：

      

      输出

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