下划线跟着走的导航效果

效果图：

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>

来源：CSDN

作者：一天一天积累

链接：https://blog.csdn.net/u012011360/article/details/84336710