css 导航栏下划线跟随效果，默认第一个li为选中状态

本次主要是联系css实现导航栏下划线跟随效果

HTML：

<ul id="list"><li class="current_li"><a href="#" class="current">全部</a></li><li><a href="#">公司党委</a></li><li><a href="#">国内新闻</a></li><li><a href="#">国际新闻</a></li></ul>

js：主要是为了刷新页面，让第一个li默认有下划线和选中效果

<script type="text/javascript">$("#list li").click(function(){$("#list li").removeClass("current_li");$("#list li a").removeClass("current");})</script>

css：

  /*下划线跟随*/ul{display: flex;position: initial;}li{position: relative;padding: 1em 2em;font-size: 12px;list-style: none;white-space:nowrap;width: 25%;text-align: center;}li.current_li{list-style-type:none;border-bottom:2px solid red;padding-bottom: 2px;}a:active, a:hover, a.current {color: #ff231c;}li::after{content: '';position: absolute;bottom: 0;width: 0;height: 2px;color: #ff231c;background-color: #ff231c;transition: .5s all linear;}li:hover::after{width: 100%;}li::after{left: 100%;     /*选中项上一个下划线收回的方向，从左往右收线*/}li:hover::after{left: 0;      /*选中项下划线出线的方向，从左往右出线*/}li:hover ~ li::after {left: 0;    /*选中项下一个下划线出线的方向，从左往右收线*/}

css 导航栏下划线跟随效果，默认第一个li为选中状态相关推荐

html导航默认选中状态,css 导航栏下划线跟随效果，默认第一个li为选中状态
本次主要是联系css实现导航栏下划线跟随效果 HTML: js:主要是为了刷新页面,让第一个li默认有下划线和选中效果 css: /*下划线跟随*/ ul{ display: flex; positi ...
纯CSS导航栏下划线跟随效果
参考文章 <ul><li>111</li><li>2222</li><li>3333333</li><li&g ...
纯CSS导航栏下划线滑动效果
纯CSS导航栏下划线滑动效果问题描述面向 C 端的产品嘛,总有一些动效想要提高用户体验,以下是用纯 css 实现导航栏选中下划线滑动效果解决方案以下是实现效果: 主要代码如下: <tem ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
html导航去下划线,纯CSS实现导航栏下划线跟随的示例代码
本篇文章主要介绍了纯CSS实现导航栏下划线跟随的示例代码,分享给大家,具体如下: 效果: 代码: html: aaaa bbbbbbb cccc dddd eeee css: ul { padding ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
水平导航栏+导航栏跟随+导航栏下划线滑动效果
先放代码: HTML: <!doctype html> <html> <head> <meta charset="utf-8"> & ...
js+css制作导航栏下划线跟随动画，自适应元素尺寸变化，Vue/Uniapp
以前也写过一个差不多的,但上一个写的存在很多问题,尤其是css要使用 justify-content: space-around才能正常计算下滑宽度,导致了在很多场景都不实用,其实那一天就想到更好的解 ...
纯CSS实现导航栏下拉动画效果
实现思路导航栏的下拉效果通过在ul的li里再嵌套一个ul,再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果.老铁没毛病. 实现效果: HTML代码 <div cla ...

css 导航栏下划线跟随效果，默认第一个li为选中状态

css 导航栏下划线跟随效果，默认第一个li为选中状态相关推荐

最新文章

热门文章