Flex实现下拉菜单

有这么一个导航栏：

图1 大屏幕下的导航栏

在大屏幕上，我们需要将导航栏内的所有菜单都显示出来，但是，当我们的屏幕小于某个值时，我们需要导航栏展示响应成下拉菜单如下：

图2 小屏幕下的导航栏

这个收起的导航栏，需要达到：

1. 当前项【统计】显示
2. 其他项隐藏

当我们鼠标【PC端】或者点击【手机端】统计，我们需要得到一个下拉菜单，效果如下：

图3 下拉导航栏

其实，这就是一个响应式设计，细心的朋友会发现，小屏幕下的导航栏实际上有这么个特点：

1. 当前项【统计】处于列表最顶部
2. 非当前页项，按原大屏幕的顺序依次向下排列
3.当前项【统计】并不在下拉菜单中

这个效果实际上，跟简书的编辑器中的如下是一样的：

图4 简书标题组件 图5 简书标题组件下拉

而简书的实现方式，完全是JS操作，它的HTML结构是这样的：

图6 简书标题组件HTML结构

可以看到，实际上显示的当前项和下拉的当前项，是不同的，同时，实际上，它的HTML结构，是随着当前项的不同而改变的，也就是说，ul.submenu下的li是变化的，这都是通过JS处理的。

在支持CSS3的浏览器下，我们能否只使用JS为当前项增加class的情况下，就实现这种功能呢？也就是，我们的初始化HMTL结构是这样的：

<ul>
  <li><a href="/home">首页</a>
  <li><a href="/show">展示</a></li>
  <li><a href="/statistic">统计</a></li>
  <li><a href="/setting">设置</a></li>
  <li><a href="/about">关于</a></li>
</ul>

当我们点击【统计】，为【统计】项增加class——"active"，我们的HTML结构是这样的：

<ul>
  <li><a href="/home">首页</a>
  <li><a href="/show">展示</a></li>
  <li class="active"><a href="/statistic">统计</a></li>
  <li><a href="/setting">设置</a></li>
  <li><a href="/about">关于</a></li>
</ul>

只是增加一个class，便实现图3/图5的效果。

没有HTML结构的变化，没有多余的HTML结构【图6中的第一个红色框】，使用CSS3，便能实现这样的效果。

所有的这些，只需要使用flex布局即可。

很多人都用过flex，但是，大部分人可能并没有完成使用过flex中其他功能，比如：flex-direction，order。

而要实现上述的功能，其实就是基于这两个功能。

flex-direction：适用于flex容器，取值row | row-reverse | column | column-reverse，分别表示：行方向 | 行逆方向 | 列方向 | 列逆方向，通常来说就是：从左到右 | 从右往左 | 从上到下 | 从下往上。

order：适用于flex子项和flex容器中的绝对定位子元素，用整数值来定义排列顺序，数值小的排在前面。可以为负值。

这样，事情就变得很简单了。我们只需要做两件事情：

1. 设置ul display: flex，同时，flex-direction: column
2. 对class="active"，添加一条：order: -1;

详细见demo：Flex实现下拉菜单