HTML水平导航栏伸缩效果

最新推荐文章于 2022-08-15 20:42:07 发布

CrazZy651314

最新推荐文章于 2022-08-15 20:42:07 发布

阅读量2.9k

点赞数

分类专栏： html+css 文章标签： html 前端

本文链接：https://blog.csdn.net/qinqigang/article/details/78355158

版权

html+css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前端知识

感觉自己前端不是很好，还要多多练习。做了一下笔记。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水平导航栏伸缩动画效果</title>
    <script src="../js/jquery.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            font-size: 14px;
        }
        ul{
            list-style: none; /*无序号*/
            height: 50px;
            padding-left: 30px;
            border-bottom: 5px solid  #f60; /*整个 ul 的底部变宽，为一条线*/

        }
        li{
            float: left;
            margin-top: 20px;
        }
        a{text-decoration: none;/* a 标签的下划线*/
            display: block;/*将 a 标签变成一个块，进而可以设置属性*/
            height: 30px;
            line-height: 30px;  /*文字居中*/
            width: 120px;
            background-color: #ccc;
            margin-bottom: 1px;
            text-align: center;

        }
        a:hover{
            color: #fff;
            background-color: #f60;
            height: 30px;
            line-height: 30px;

        }
    </style>
    <script>
        $(function () {
            $("a").hover(
                function () {
                    $(this).stop().animate({"width":"170px"},200);
                },function () {
                    $(this).stop().animate({"width":"120px"},200);
                }
            )
        });
    </script>
</head>
<body>
<ul>
    <li><a href="#">首  页</a></li>
    <li><a href="#">新闻快讯</a></li>
    <li><a href="#">产品展示</a></li>
    <li><a href="#">售后服务</a></li>
    <li><a href="#">联系我们</a></li>
</ul>
</body>
</html>