幽灵下拉菜单
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