jquery导航菜单-蒲公英云

jquery导航菜单

末蓝、 2022-10-02 09:54 292阅读 0赞

*{
                margin: 0;
                padding: 0;
            }
            ul{
                width: 800px;
                overflow: hidden;
                background-color: #000000;
                position: relative;
                margin: 0 auto;
            }
            li{
                position: relative;
                z-index: 100;
                list-style: none;
                float: left;
                padding: 12px 24px;
                color: white;
                font-size: 16px;
            }
            /*悬浮的背景颜色*/
            .active{
                background-color: red;
            }
            #hoveract{
                position: absolute;
                width: 80px;
                height: 45px;
                background-color: red;
            }
<body>
        <ul>
            <li class="active">首页</li>
            <li>新闻</li>
            <li>社会新闻</li>
            <li>汽车</li>
            <li>家居</li>
            <li>社会新闻</li>
            <li>汽车</li>
            <li>家居</li>
            <div id="hoveract"></div>
        </ul>
    </body>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $("li").on("mouseover",function(){
            var whid=$(this).outerWidth()
            $('#hoveract').stop();
            $('#hoveract').animate({left:$(this).position().left,width:whid},'linear')
        })
        $("ul").on("mouseout",function(){
            $('#hoveract').stop();
            $('#hoveract').animate({left:0,width:$("li").eq(0).outerWidth()},'linear')
        })
    </script>