下划线跟着走的导航效果

川长思鸟来 2022-04-15 05:50 237阅读 0赞

效果图：

![20181122114538449.gif][]

**css部分：**

<style type="text/css">  
        .navCon\{  
            min-width: 1200px;  
            height: 43px;  
            margin: 0 auto;  
            position: relative;  
        \}  
        .navCon ul li\{  
            float: left;  
            list-style-type: none;  
            background: \#f1eeee;  
        \}  
        .navCon ul li a\{  
            display: inline-block;  
            padding: 10px 20px;  
            text-decoration: none;  
            color: red;  
        \}  
        .navCon ul li:hover\{  
            background: \#cacaca;  
        \}  
        .navCon ul li:hover a\{  
            color: \#002A80;  
        \}  
        .navCon ul li.active\{  
            background: \#cacaca;  
            border-bottom: 2px solid \#000000;  
        \}  
        .navCon ul li.active a\{  
            color: \#002A80;  
        \}  
        .bottomLine\{  
            width: 0px;  
            height: 2px;  
            background: black;  
            position: absolute;  
            bottom: 0px;  
        \}  
        .clear\{  
            clear: both;  
        \}  
    </style>

**html部分：**

<nav class="navCon">              
            <ul>  
                <li><a href="\#">导航1</a></li>  
                <li><a href="\#">导航2导航2</a></li>  
                <li><a href="\#">导航3导航3导航3</a></li>  
                <li><a href="\#">导航4导航4导航4导航4</a></li>  
                <li><a href="\#">导航5导航5导航5导航5导航5</a></li>      
                <div class="bottomLine"></div>  
            </ul>              
        </nav>

**js部分：**

<script src="js/jquery.3.3.1.js"></script>  
        <script type="text/javascript">  
            $(".navCon ul li").hover(function()\{//鼠标移入  
                var left = $(this).position().left;  
                var width = $(this).width();  
                console.info("left:"+left+"width:"+width);  
                $(".bottomLine").css(\{opacity:1\})  
                $(".bottomLine").stop().animate(\{  
                    left:left,  
                    width:width  
                \},300);  
            \},  
            function()\{//鼠标移出          
                $(".bottomLine").css(\{opacity:0\})  
            \});  
            $(".navCon ul li").click(function()\{  
                $(".navCon ul li").removeClass("active");  
                $(this).addClass("active");  
            \});  
        </script>

[20181122114538449.gif]: /images/20220415/8c1a17cef8ef476cad106f9b81f6902d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关跟着springboot的内嵌jetty走进servlet

版本：spring-boot-1.5.17.RELEASE.jar，jetty-servlet-9.4.41.v20210516.jar springboot启动刷新上下文

Love The Way You Lie/ 2024年01月20日 06:38/ 0 赞/ 4 阅读

相关元素下划线效果

通过伪类选择器实现下划线效果，使用绝对定位，将下划线占满元素宽度的100%。 tip: 1. 要注意设置background的颜色，如果颜色和父级元素的背景颜色相同的话将

男娘i/ 2023年10月02日 18:55/ 0 赞/ 3 阅读

相关 elementui+vue实现菜单导航跟main区域的tabs联动效果

elementui+vue实现菜单导航跟main区域的tabs联动效果文章目录 1.前言 2.实现效果 3.解决过程 4.具体代码 1.前

浅浅的花香味﹌/ 2022年12月18日 10:53/ 0 赞/ 367 阅读

相关导航菜单中常用的css下划线动画效果-案例

> 导航栏下划线动画在网页设计中是非常常见的交互 [在线展示][Link 1] ![20210625131926419.gif][] [代码][Link 2]

本是古典何须时尚/ 2022年10月10日 01:30/ 0 赞/ 268 阅读

相关跟着liaoxuefeng学git

初始化一个Git仓库，使用`git init`命令。添加文件到Git仓库，分两步： 1. 使用命令`git add <file>`，注意，可反复多次使用，添加多个文件；

谁践踏了优雅/ 2022年09月12日 10:48/ 0 赞/ 226 阅读

相关 android实现对导航Tab设置下划线选中效果

直接看效果。此linearLayout只有两个Button ,当选中Button1,Button1有个下划线选中效果。当选中Buton2，Button2有个下划线选中效果。

比眉伴天荒/ 2022年08月06日 08:28/ 0 赞/ 258 阅读

相关内容跟着鼠标跑

不要看只有短短的20多行代码，却包括了HTML+css+div+javascript，其核心技术是一个鼠标事件：mousemove 示例是一张图片跟着鼠标移动，代码如下：

秒速五厘米/ 2022年08月03日 14:58/ 0 赞/ 200 阅读

相关下划线跟着走的导航效果

效果图： ![20181122114538449.gif][] css部分： <style type="text/css"> .navCon\{

川长思鸟来/ 2022年04月15日 05:50/ 0 赞/ 238 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

参考文章“不可思议的纯CSS导航栏下划线跟随效果”[https://www.cnblogs.com/coco1s/p/8657192.html][https_www.cnblo

本是古典何须时尚/ 2021年09月28日 09:26/ 0 赞/ 517 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

先上张图，如何使用纯 CSS 制作如下效果？ ![20190412103519933.png][] 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一

你的名字/ 2021年09月18日 22:18/ 0 赞/ 334 阅读