CSS与jQuery菜单交互-优快云博客

本文链接：https://blog.youkuaiyun.com/yeee1128/article/details/103621347


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;list-style: none}
        .wrap{
            width: 100%;
            background: #01204f;
            margin-top: 100px;
        }
        #list{
            width: 1000px;
            height: 40px;
            margin: 0 auto;
            position: relative;
        }
        #list li{
            float: left;
            color: #fff;
            font:bold 14px/40px "Microsoft YaHei";
            padding: 0 15px;
            position: relative;
        }
        #list .home{
            background: #c00;
        }
        #list div{
            width: 40px;
            height: 40px;
            background: #c00;
            position: absolute;
        }
    </style>
    <script src="../jquery.js"></script>
    <script>
        $(function () {

            $("#list li").hover(function () {
                //鼠标移入
                var left = $(this).offset().left- $("#list").offset().left;
                //移动div，运动到对应的li的位置
                $("#list div").stop().animate({"left":left,"width":$(this).innerWidth()})
            },function () {
                var left = $(".home").offset().left- $("#list").offset().left;
                $("#list div").stop().animate({"left":left,"width":40})
            })


            $("#list li").click(function () {
                $(this).addClass("home").siblings("li").removeClass("home");
            });
        })
    </script>
</head>
<body>

<div class="wrap">
    <ul id="list">
        <div></div>
        <li class="home">首页</li>
        <li>新闻</li>
        <li>社会新闻</li>
        <li>汽车</li>
        <li>家居</li>
        <li>社会新闻</li>
        <li>汽车</li>
        <li>家居</li>
    </ul>

</div>
</body>
</html>

百度导航