菜单显示不同效果

时间：2018-04-28 14:08:22 阅读：161 评论：0 收藏：0 [点我收藏+]

菜单效果显示：

代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>菜单导航</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            li {
                list-style: none;
            }
            
            a {
                text-decoration: none;
            }
            .Nav{
                background: #00008b;
                min-width: 1000px;
                min-height: 40px;
            }
            .menu {
                width: 600px;
                margin: 0 auto;
            }
            .menu:after{
                clear: both;
                content: "";
                display: block;
            }
            .menu>li {
                float: left;
                width: 100px;
                text-align: center;
                line-height: 40px;
            }
            .menu>li>a{
                color: white;
            }
            .menu>li>a+ul>li>a{
                color: white;
            }
            /*下拉菜单*/
            .menu>li>a+.one{
                position: absolute;
                width: 100px;
                background: #00008B;
                opacity: 0.5;
                /*display: none;*/
                height: 0;
                overflow: hidden;
                transition: .5s;
            }
            .menu>li:hover .one{
                height: 130px;
            }
            /*显示隐藏*/
            .menu>li>a+.two{
                position: absolute;
                width: 100px;
                background: #00008B;
                opacity: 0.5;
                display: none;
            }
            .menu>li:hover .two{
                display: block;
            }
            /*翻转菜单*/
            .menu>li>a+.there{
                position: absolute;
                width: 100px;
                background: #00008B;
                opacity: 0.5;
                display: none;
            }
            .menu>li:hover .there{
                display: block;
                animation:MenuNav 2s;
            }
            @keyframes MenuNav{ 
                /*定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态*/
                from{
                    /*opacity: 1;*/
                    -webkit-transform:rotateY(0deg);
                    }
                to{
                    /*opacity: 0.2;*/
                    -webkit-transform:rotateY(360deg);
                    }
            }
            
        </style>
    </head>
    <body>
        <div class="Nav">
            <ul class="menu">
                <li>
                    <a href="#">首页</a>
                </li>
                <li>
                    <a href="#">联系我们</a>
                    <ul class="one">
                        <li>
                            <a href="#">版权声明</a>
                        </li>
                        <li>
                            <a href="#">在线留言</a>
                        </li>
                        <li>
                            <a href="#">技术支持</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">公司掠影</a>
                    <ul class="two">
                        <li>
                            <a href="#">版权声明</a>
                        </li>
                        <li>
                            <a href="#">在线留言</a>
                        </li>
                        <li>
                            <a href="#">技术支持</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">新闻中心</a>
                    <ul class="there">
                        <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>

菜单显示不同效果

标签：html 分享首页 oct hover anim for 定义 hid

原文地址：https://www.cnblogs.com/firstflying/p/8966743.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行