jQuery方式实现动画菜单

最新推荐文章于 2019-10-22 00:03:47 发布

XDarker

最新推荐文章于 2019-10-22 00:03:47 发布

阅读量288

点赞数

分类专栏：前端文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_39723337/article/details/90578622

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-3.4.1.min.js"></script>
    <title>三级菜单</title>
    <script>

        $(function () {
            $(".top-nav li").mousemove(function () {
                $(this).children("ul").slideDown("1000");
            })
            $(".top-nav li").mouseleave(function () {
                $(this).children("ul").slideUp("slow");
            })
        });

    </script>
    <style>
        a {
            color: #FFFF99;
            text-decoration: none;
        }

        .top-nav {
            font-size: 16px;
            font-weight: bold;
            /* 去小圆点 */
            list-style: none;
        }

        .top-nav li {
            float: left;
            /* 每个菜单之间有1像素间距 */
            margin-right: 1px;
        }

        /* 二级菜单 */
        .top-nav li ul {
            display: none;
            /* 去圆点 */
            list-style: none;
            padding: 0px;
            position: absolute;
            float: left;

        }

        .top-nav li a {
            line-height: 34px;
            text-decoration: none;
            background: #DDDDDD;
            color: #666666;
            display: block;
            width: 80px;
            text-align: center;
        }

        .top-nav li a:hover {
            background: url("images/slide-bg.PNG") repeat-x;
        }

        .top-nav li:hover ul {
            display: block;

        }

        .note {
            display: block;
            color: #3f240e;
            background: url("images/slide-bg.PNG") repeat-x;
        }

        .corner {
            display: block;
            height: 18px;
            background: url("images/corner.PNG") 27px 0 no-repeat;

        }
    </style>
</head>

<body>
    <div id="top">
        <ul class="top-nav">
            <li><a href="#"><span class="note">首页</span></a></li>
            <li><a href="#">课程大厅</a></li>
            <li><a href="#">学习中心</a>
                <ul>
                    <span class="corner"></span>
                    <li><a href="#">前端课程</a></li>
                    <li><a href="#">后端课程</a></li>
                    <li><a href="#">移动开发</a></li>
                </ul>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
</body>

</html>

XDarker

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery方式实现动画菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
复制链接

扫一扫