Primer CSS 选择菜单

简介

Primer是GitHub开发团队开发并开源的CSS框架，提供了许多便捷的UI组件和样式，可以快速开发美观而且易于维护的Web应用程序。其中选择菜单是其中一个常用的组件，用于在一组选项中进行选择。

特点

选择菜单的特点如下：

• 选项以列表的形式展示，方便查看和选择。
• 可以设置默认选项。
• 可以设置可选项的样式。
• 选项可以是标签和链接，也可以是符号和图标。
• 只需添加少量的CSS类即可对选择菜单进行自定义样式的设置。

用法

HTML结构

选择菜单的HTML结构如下：

<div class="SelectMenu">
  <button class="btn dropdown-toggle SelectMenu-trigger" type="button" aria-haspopup="true" aria-expanded="false">
    <span class="SelectMenu-label">选项</span>
    <span class="SelectMenu-caret"></span>
  </button>
  <div class="SelectMenu-modal">
    <div class="SelectMenu-header">
      <span class="SelectMenu-title">选择一个选项</span>
      <button class="SelectMenu-closeButton" type="button" aria-label="Close menu"></button>
    </div>
    <div class="SelectMenu-list">
      <a href="#" class="SelectMenu-item">选项1</a>
      <a href="#" class="SelectMenu-item">选项2</a>
      <a href="#" class="SelectMenu-item">选项3</a>
    </div>
  </div>
</div>

其中，.SelectMenu是选择菜单的基本样式类，.SelectMenu-trigger是用于触发选择菜单的按钮样式类，.SelectMenu-label是用于显示选择菜单当前选项的标签样式类，.SelectMenu-caret是用于显示选择菜单下拉箭头的样式类，.SelectMenu-modal是选择菜单的模态框样式类，.SelectMenu-header是模态框头部的样式类，.SelectMenu-title是模态框标题的样式类，.SelectMenu-closeButton是关闭模态框的按钮样式类，.SelectMenu-list是选项列表的样式类，.SelectMenu-item是选项的样式类。

CSS样式

选择菜单的CSS样式如下：

.SelectMenu-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
  min-width: 160px;
  margin: 2px 0 0;
  padding: 5px 0;
  list-style: none;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}
.SelectMenu-menu.open {
  display: block;
}
.SelectMenu-item {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.SelectMenu-item:hover,
.SelectMenu-item:focus {
  color: #fff;
  text-decoration: none;
  background-color: #0065ff;
}

其中，.SelectMenu-menu是选项菜单的样式类，.SelectMenu-item是选项的样式类。

JavaScript交互

选择菜单的JavaScript交互如下：

var selectMenuTrigger = document.querySelector('.SelectMenu-trigger');
var selectMenuModal = document.querySelector('.SelectMenu-modal');
var selectMenuList = document.querySelector('.SelectMenu-list');
var selectMenuItems = document.querySelectorAll('.SelectMenu-item');

selectMenuTrigger.addEventListener('click', function() {
  if (selectMenuModal.classList.contains('active')) {
    selectMenuModal.classList.remove('active');
  } else {
    selectMenuModal.classList.add('active');
  }
});

selectMenuList.addEventListener('click', function(event) {
  if (event.target.classList.contains('SelectMenu-item')) {
    selectMenuModal.classList.remove('active');
    selectMenuTrigger.querySelector('.SelectMenu-label').textContent = event.target.textContent;
  }
});

其中，.SelectMenu-trigger是选择菜单的触发按钮，.SelectMenu-modal是选择菜单的模态框，.SelectMenu-list是模态框中的选项列表，.SelectMenu-item是选项的样式类。JavaScript代码中，点击触发按钮，如果模态框已经打开则关闭模态框，否则打开模态框；点击选项列表中的选项，关闭模态框并更新当前选项的标签文字。

结语

Primer CSS的选择菜单是一个快速适用的UI组件，只需添加少量配置即可实现一个美观易用的选择菜单，大大提高了Web应用的开发效率和用户体验。