📜  幽灵下拉菜单

📅  最后修改于: 2022-05-13 01:56:30.216000             🧑  作者: Mango

幽灵下拉菜单

Spectre下拉菜单组件是交互式网站的重要组件。下拉菜单是允许用户从列表中选择值的菜单项的集合。

要添加下拉列表,您需要使用下拉列表类添加容器元素。并为按钮添加一个具有下拉切换类的可聚焦元素,并在其旁边添加一个菜单组件。您还需要添加tabindex以使按钮具有焦点。

Spectre 下拉菜单类:

  • dropdown:该类用于创建下拉组件。
  • active:此类将使您的下拉菜单处于活动模式。
  • dropdown-toggle:此类用于使下拉菜单可切换。
  • menu:此类用于创建下拉菜单可以具有的选项列表。
  • dropdown-right:此类用于防止下拉菜单出现在屏幕外。

注意: tabindex属性用于使按钮具有焦点。

句法:

示例:下面的示例说明了 Spectre下拉菜单

HTML


  

    SPECTRE Dropdown menu Class
    
    
    

  

    
        

GeeksforGeeks

        SPECTRE Dropdown menu Class     
    

    Basic Dropdown Button:                  

        Dropdown Button Group:                 


输出:

幽灵下拉菜单

幽灵下拉菜单

参考: https://picturepan2.github.io/spectre/components/menu.html