返回下划线导航跟随...登陆

下划线导航跟随

小雨2019-06-18 11:01:5171

<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>

<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>

<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>

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网