以为的js导航栏

安逸的假期也该结束，你的内心是否躁动起来了；是否在抱怨假期太短，还是在虚度假期？在网络丰富的时代，是否有很多新鲜的事物冲击着你的视野，在查找的时候有些缭乱；不要紧张，我们动手了解一下风琴导航，通过简单的css就可以实现，js的动态功能；向来看下简单的HTML布局吧，如下截图：
在截图中我们看到，HTML的布局是很简单的，使用了有序列表标签和无序列表标签，使用无序列表标签制作风琴导航，有序列表标签制作条状下滑导航，两个导航栏都有其相同之处，不同之处就是位移方向不同；其写法与用法都一致，其布局效果见截图：
通过transform改变位移量，实现导航栏的效果，改变位移的三写法translate（）、translateX（）、translateY（），其中离不开translate这个单词为核心的不同方向的延伸；风琴导航利用了translateX（）方向的位移量变化达到js的动态显示效果；上下滑动导航利用translateY（）的位移量的变化；有了位移量还不行，还需要执行的时间以及延迟的时间共同控制。因为导航栏的效果是动态，个人的能力不足，在这无法演示动态效果，但本人亲自演示的效果是真实的。是不是心动了？俗话说心动不如行动，赶紧动手行动起来吧！下截图为风琴导航的动态中的静态图：
下截图是实现导航动态功能的代码，使用了子选择器，给每一个li标签设定相差0.05s的延迟时间，整个运动过程为0.2s