Jquery 如何使导航菜单动态化？

如何使以下导航动态化，以便在添加其他导航元素时不会中断

nav{
位置：相对位置；
高度：57px；
线高：57px；
宽度：100%；
背景色：#fff；
字号：500；
文本转换：大写；
字体大小：14px；
溢出：隐藏；
}
导航ul{
位置：相对位置；
显示：-ms flexbox；
显示：-webkit flex；
显示：-moz flex；
显示：-ms flex；
显示器：flex；
保证金：0自动；
填充：0；
列表样式：无；
-ms盒方向：水平；
-ms盒式包装：中心；
-webkit flex流：行换行；
-moz-flex-flow：行换行；
-ms flex流：行换行；
柔性流：行换行；
-webkit内容：中心；
-moz-justify-content:center；
-ms内容：中心；
证明内容：中心；
文本对齐：居中；
宽度：100%；
身高：100%；
}
李国荣{
位置：相对位置；
保证金：0；
文本对齐：居中；
-webkit-flex:1；
-moz-flex:1；
-ms-flex:1；
弹性：1；
身高：100%；
}
李导航：最后一个孩子：：之前{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
身高：8%；
内容：''；
背景色：#9c27b0；
转换：转换0.3s；
}
nav li:第一个孩子：活动~ li:最后一个孩子：：之前{
转换：translate3d（-200%，0，0）；
}
导航李：第n个子项（2）：活动~李：最后一个子项：：之前{
转换：translate3d（-100%，0，0）；
}
导航李：第n个子项（3）：活动~李：最后一个子项：：之前{
变换：translate3d（0,0,0）；
}

我不明白您想要什么，即使您原来的JSFIDLE（在Chrome中）似乎不能正常工作。这种风格的动画选项不适合维护/移植。您是否正在考虑采用jQuery动画方法？如果是这样的话，添加

velocity.js

库将使它能够在幕后使用CSS动画，但不会让人头痛。CSS动画可以用于此目的，并为较旧的浏览器提供优雅的回退。我建议你尝试一种不同的方法，因为我认为这是主要的问题-不太容易拉伸/维护。将小提琴移到一个片段。试图更直接地重申这个问题。