CSS3方式实现动画菜单

最新推荐文章于 2024-05-13 15:48:26 发布

XDarker

最新推荐文章于 2024-05-13 15:48:26 发布

阅读量574

点赞数

分类专栏：前端文章标签： CSS3 HTML

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

版权

前端专栏收录该内容

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>

    </script>
    <!-- 版本要求IE10 -->
    <style>
        .top-nav {
            width: 960px;
            margin: 60px auto;
            /* 边框 实线 */
            border: 1px solid #222;
            background-color: #111;
            /* 渐变 */
            background-image: linear-gradient(#444, #111);
            /* 圆角 */
            border-radius: 6px;
            /* 阴影 */
            box-shadow: 0 1px 1px #777;
            padding: 0;
            /* 去小圆点 */
            list-style: none;
        }

        /* 清除浮动 */
        .top-nav :before,
        .top-nav:after {
            content: " ";
            display: table;
        }
        .top-nav:after {
            clear: both;
        }
        /* 强制刷新框架 */
        .top-nav {
            zoom: 1;
        }


        .top-nav li {
            float: left;
            border-right: 1px solid #222;
            box-shadow: 0 1px 1px #444;
            position: relative;
        }

        /* 二级菜单 */
        .top-nav li a {
            float: left;
            padding: 12px 30px;
            color: #999;
            /* 字体 */
            font: bold 12px;
            /* 去除下划线 */
            text-decoration: none;
            /* 文本阴影 */
            text-shadow: 0 1px 0px #000;

        }

        .top-nav li a:hover {
            color: #fafafa;
        }

        .top-nav li ul {
            display: none;
            position: absolute;
            list-style: none;
            top: 38px;

            /* opacity: 0; */
            z-index: 1;
            left: 0;
            box-shadow: 0 -1 0 rgba(255, 255, 255, 0.3);
            background-image: linear-gradient(#444, #111);
            padding: 0px;
            border-radius: 3px;
            background-color: #444;
            margin: 20px 0 0 0;
            transition: all 0.2s ease-in-out;
           
        }


        .top-nav li:hover>ul {
            display: block;
            margin: 0;
        }

        .top-nav ul li {
            left: 0;
            float: none;
            display: block;
            border: 0;
            box-shadow: 0 1px #111, 0 2px 0 #666;
            margin: 0;

        }

        .top-nav ul a {
            padding: 10px;
            width: 130px;
            float: none;
            display: block;

        }

        .top-nav ul li:first-child>a {
            border-radius: 3px 3px 0 0;
        }

        .top-nav ul li:last-child>a {
            border-radius: 0 0 3px 3px;
        }

        .top-nav ul li:first-child > a:before{
            content: " ";
            position: absolute;
            left: 40px;
            top: -6px;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #444;
        }
        .top-nav ul li:first-child > a :hover:before{
            border-bottom-color: #04acec;
        }
        .top-nav ul ul {
            left:150px;
            top: 0;
            margin: 0 0 0 20px;
            box-shadow: -1px 0 0 rgba(255, 255, 255, 0.3);
            

        }
        .top-nav ul ul li:first-child > a:before{
            content: " ";
            left: -6px;
            top:40%;
            border-left: 0;
            border-top: 6px solid transparent;
            border-right: 6px solid #444;
            border-bottom: 6px solid transparent;
        }
        .top-nav ul ul li:first-child a:hover:before{
            border-right-color: #04acec;
            border-bottom-color: transparent;
        }
        .top-nav ul li:first-child a:hover:before{
            border-bottom-color: #04acec;
            
        }
        .top-nav ul li a:hover {
            background-color:  #04acec;
        }
    </style>
</head>

<body>
    <div id="top">
        <ul class="top-nav">
            <li><a href="#">首页</a></li>
            <li><a href="#">课程大厅</a></li>
            <li><a href="#">学习中心</a>
                <ul>
                    <li><a href="#">前端课程</a>
                        <ul>
                            <li><a href="#">JavaScript</a></li>
                            <li><a href="#">jQuery</a></li>
                            <li><a href="#">Angular</a></li>
                        </ul>
                    </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
点赞
踩
1

收藏

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

<!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...
复制链接

扫一扫