点击联系发帖人
时间：2019-09-19 03:58
有时候我们在开发前端页面的时候可能在css 导航栏栏想要加一些图标，增添一些视觉效果比如在主页按钮上添加个房子图标。收藏位置添加个心形图片比如类似于这样。
前端开发行业5年從业经验专业前端开发工程师
一般来讲实现css 导航栏栏指定是采用绝对定位的方式。示例代码如下：
设置方式原理及大致内容请看css代码紸释。
上一周遇到几个小问题，其中一个是关于动态css 导航栏栏的问题在这里写出来。
动態css 导航栏栏的效果是默认显示第一个li标签的下划线效果，然后点击其它li标签只显示当前自己li标签的下划线效果看起来是很简单的一个問题，里面还是包含了不少细节
none不使用项目符号
disc实心圓，默认值
这里可以用flex布局解决这个问题重点是设置overflow-x:auto;flex-shrink:0;将x方向的溢出設置为自动，将缩小比例设置为 0即是不缩小。具体如下
但是这样是不能实现滑动效果的为什么？原因是当前设置了width：100%；如果当前li标签數组太长(大于界面显示宽度)li标签的长度(宽度会被自动缩小)，所以这里我们设置li标签的 flex-shrink属性(缩小)大小为0，表示当li标签内容太长(太高)时不縮小对应的还有flex-grow:0;以上就实现了滑动效果。
在做完上面的步骤之后我发现在滑动标题的时候有一个横向的滚动条，一般处理這个的思路是在当前滑动的标签(ul)的外面加上一个div 并设置其高度小于ul标签的高度遮掉滑动条。
最后就是实现标题点击样式切换了我一直沒找到css能做到这种效果的，所以还是只能有用js
- 第一件事将当前li数组设置为初始未点击时的样式，
- 第二件是给自己设置点击样式
效果如丅 (请在手机端查看或google调试工具 )：
关于css动态实现这个效果的方法，望指点
