基础 CSS 下拉菜单

Foundation CSS是由 ZURB 于 2011 年 9 月创建的开源和响应式前端框架，可以轻松创建可在任何设备上运行的令人惊叹的响应式网站、应用程序和电子邮件。许多公司，如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼，都在使用它。该框架基于bootstrap，类似于SaaS。它更加复杂、通用且可配置。它还带有一个命令行界面，使其易于与模块捆绑器一起使用。电子邮件框架为您提供响应式 HTML 电子邮件，可以在任何设备上阅读。 Foundation for Apps 允许您构建完全响应的 Web 应用程序。

Foundation CSS Dropdown用于在我们单击元素时显示内容。我们可以将任何类型的内容放在下拉列表中，并通过单击元素来访问它。当我们单击元素或将鼠标悬停在它上面时，会显示下拉菜单。我们还可以使用下拉定位类将下拉列表定位为顶部、底部、左侧和右侧。

在本文中，我们将了解如何在 Foundation CSS 中创建下拉菜单。

基础 CSS 下拉类：

• 基础知识：我们将创建基础知识下拉菜单。
• 定位：我们将创建下拉菜单来定位下拉菜单。
• 显式定位：这用于设置框的位置和对齐方式。

句法：

   ...
 

示例 1：以下代码演示了当我们单击元素或将鼠标悬停在其上时的 Foundation CSS Dropdown。

HTML

  

     Foundation CSS Dropdown 
    
  
    
    
    
    
    

  

    
         GeeksforGeeks 
         Foundation CSS Dropdown 
  
        
            Dropdown Click
        
          
        
            GeeksforGeeks:
            A Computer Science portal for geeks.
        
  
        
            Dropdown Hover
        
  
        
  
            A Computer Science portal for geeks.
        
    
      
    
        $(document).ready(function() {
            $(document).foundation();
        })
    

  

输出：

基础 CSS 下拉基础

示例 2：以下代码演示了 Foundation CSS Dropdown 位置。

HTML

  

     Foundation CSS Dropdown 
    
  
    
    
    
    
    

  

    
         
            GeeksforGeeks 
        
          
         Foundation CSS Dropdown 
  
        
            Dropdown Left
        
          
        
            GeeksforGeeks
         
  
        
            Dropdown Right
        
  
        
            GeeksforGeeks
        
  
        
            Dropdown Bottom
        
  
        
            GeeksforGeeks
        
  
        
            Dropdown Top
        
  
        
            GeeksforGeeks
        
    
  
    
        $(document).ready(function() {
            $(document).foundation();
        })
    

  

输出：

基础 CSS 下拉位置

示例 3：以下代码演示了下拉显式位置顶部和底部。

HTML

  

     Foundation CSS Dropdown 
    
  
    
    
    
    
    

  

    
         
            GeeksforGeeks 
        
          
        Foundation CSS Dropdown
  
        
            Bottom Left
        
  
        
            GeeksforGeeks
        
  
        
            Bottom Center
        
  
        
            GeeksforGeeks
        
  
        
            Bottom Right
        
  
        
            GeeksforGeeks
        
  
        
            Top Left
        
  
        
            GeeksforGeeks
        
  
        
            Top Center
        
  
        
            GeeksforGeeks
        
  
        
            Top Right
        
  
        
            GeeksforGeeks
        
    
      
    
        $(document).ready(function() {
            $(document).foundation();
        })
    

  

输出：

下拉显式位置顶部和底部

示例 4：以下代码演示了下拉显式位置左右。

HTML

  

   Foundation CSS Dropdown 
  
          
   
  
  
  
  

  
    
  
     GeeksforGeeks 
     Foundation CSS Dropdown 
      
    
      Left Top
    
    
        GeeksforGeeks 
    
  
    
      Right Top
    
    
        GeeksforGeeks 
    
  
    
      Left Center
    
    
       GeeksforGeeks 
    
  
    
      Right Center
    
    
        GeeksforGeeks  
    
  
    
      Left Bottom
    
    
         GeeksforGeeks    
    
  
    
       Right Bottom
    
    
         GeeksforGeeks  
    
   
  
    $(document).ready(function() {
       $(document).foundation();
    })
  

输出：

下拉显式位置左右

参考： https://get.foundation/sites/docs/dropdown.html