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实现下拉菜单

推荐阅读更多精彩内容