前言
在码代码之前了,我们可以尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果?
在这之前了,有一次需求就是实现这个效果,我是用js实现的。其实用 Javascript ,也是很麻烦。所以我一直在想,有没有可能只使用 CSS 完成这个效果呢?
好的,今天我们就用CSS完成这个效果。
解析
我们定义一下简单的规则,要求如下:
1、假设 HTML 结构如下:
- Web秀
- CSS导航栏
- 今日头条
- 开源中国
2、li 的宽度是不固定的
3、当从左侧 li 移向右侧 li,下划线从左往右移动。同理,当从导航的右侧 li 移向左侧 li,下划线从右往左移动。
看整个效果,我们不知道如何做起的时候,我们先一步一步来,先完成前2个效果。
第一步
.cssnav{
position: absolute;
display: flex;
}
.cssnav li{
position: relative;
list-style: none;
padding: 20px;
font-size: 24px;<
最后
以上就是怡然荔枝最近收集整理的关于html导航栏选中状态原生js,0行JS,30行css搞定导航栏下划线跟随效果的全部内容,更多相关html导航栏选中状态原生js内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复