综合练习二级菜单(纯css之前有js的)

407指导员

于 2020-11-29 01:28:34 发布

阅读量259

点赞数 2

分类专栏： CSS3 文章标签： css3 定位

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110299005

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

综合练习二级菜单

CSS3 opacity 属性

设置元素透明度。

取值

从 0.0 （完全透明）到 1.0（完全不透明）。

之前使用js模拟过二级菜单的动画效果很是麻烦，现在css3中自带的过度模块和翻转模块很大的方便了我们。纯css写二级菜单动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻转菜单</title>
    <style>
        /**
        通过设置display属性来隐藏和显示二级菜单，会导致动画失效，
        因此采用透明度的方式
        */
        * {
            margin: 0;
            padding: 0;
        }

        .nav {
            width: 400px;
            height: 40px;
            margin: 100px auto 0;
            background-color: #353236;
        }

        /*儿子选择器，只是找到儿子，孙子中的li不设置margin-left*/
        /*开启定位，子绝父相*/
        .nav > li {
            list-style: none;
            width: 120px;
            float: left;
            height: 40px;
            margin-left: 10px;
            text-align: center;
            line-height: 40px;
            background-color: darkgray;
            position: relative;
        }

        .sub {
            /*默认不显示二级菜单*/
            /*display: none;*/
            width: 120px;
            position: absolute;
            left: 0;
            top: 40px;
        }

        /*二级菜单中的li*/
        .sub li {
            list-style: none;
            background-color: deepskyblue;
            /*默认情况下也看不到二级菜单，上来先绕Y轴翻转180度*/
            transform: rotateY(180deg);
            transition: all 1s;
            /* 将所有li默认透明度设置为0，即是二级菜单隐藏*/
            opacity: 0;
        }

        /*鼠标悬停显示二级菜单*/
        /*.nav > li:hover .sub {*/
        /*     display: block;*/
        /* }*/


        .nav > li:hover .sub li {
            /*再绕Y轴旋转180度，但是后边会重叠前边的，直接设置为none*/
            /*transform: rotateY(180deg);*/
            transform: none;
            /*完全显示，产生淡化效果*/
            opacity: 1;
        }

        /* 二级菜单展开，从上至下设置逐层过度的效果，就是设置延迟执行的时间逐渐增加*/
        .nav > li:hover .sub li:nth-child(1) {
            transition-delay: 0ms;
        }

        .nav > li:hover .sub li:nth-child(2) {
            transition-delay: 200ms;
        }

        .nav > li:hover .sub li:nth-child(3) {
            transition-delay: 400ms;
        }

        .nav > li:hover .sub li:nth-child(4) {
            transition-delay: 600ms;
        }

        .nav > li:hover .sub li:nth-child(5) {
            transition-delay: 800ms;
        }

        /*二级菜单回收，从下至上设置逐层过度效果，依次增加延迟执行时间*/
        .nav > li .sub li:nth-child(5) {
            transition-delay: 0ms;
        }

        .nav > li .sub li:nth-child(4) {
            transition-delay: 200ms;
        }

        .nav > li .sub li:nth-child(3) {
            transition-delay: 400ms;
        }

        .nav > li .sub li:nth-child(2) {
            transition-delay: 600ms;
        }

        .nav > li .sub li:nth-child(1) {
            transition-delay: 800ms;
        }
        /*下拉菜单优先级高于下边文字，定位流一定会盖住标准流*/
        div {
            width: 400px;
            height: 300px;
            background-color: #b7ccb3;
            margin: 0 auto;
            text-align: center;

            
        }
    </style>
</head>
<body>
<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
<div>
    黑五大促：海淘网站汇总！低至5折起！
    出游也要吃好的！必带速食第二件0元
    天猫国际黑五大促：年度爆款，限时5折抢！
    黑五新大陆：爆款第二件半价！
    京东商城| 黑五感恩季,国际大牌低至3折
    Burberry| 打折季低至4折
    立减135| 怡丽丝尔眼唇保湿精华霜380元
    惊爆价| 任天堂掌机游戏每99减10,到手449元
    海淘折扣季：梅西百货低至3折!!
</div>
</body>
</html>

在这里插入图片描述

注意点

1.首先整体页面，分为三个一级菜单和一个信息框，导航栏默认就是采用li标签实现，文本框就是div

2.每个一级标签下还有二级菜单，所以嵌套li标签，实现二级菜单。

3.一级菜单默认水平排版，就想起我们的浮动，左浮设置左外边距，然后依次设置每个水平和垂直居中。

4.二级菜单的ul也要设置宽度，否则二级菜单的每个li大小无法和上方对齐。

5.接着就是二级菜单动画效果，悬停一级菜单，二级菜单依次显示，离开依次回收，这就要利用transform属性的旋转，旋转180度展示，但是没有转到360度字是反的，默认情况下二级菜单是看不见的，我们可以上来就旋转180度。等悬停再旋转180度，回收时不用再旋转，直接利用覆盖将transform属性设置为none,所谓逐层显示，其实就是利用延迟显示的属性，回收时延迟属性设置数值相反即可。

6.这么多属性需要过度就可以利用简写transition语法
transition: all 1s;
7.既然二级菜单默认不显示，我们如果通过display来修改，动画效果会被取消，所以使用透明度来实现。悬停前设置二级菜单的所有li 为opacity: 0，看不见，等悬停时加入opacity: 1，上边设置了所有属性过度1s，还会产生淡化的效果，很不错。

8.最后就是我们下来菜单的显示内容优先级肯定高于下边文本框的，所以要覆盖下边内容，就采用定位流一定会覆盖标准流的方法。

9.子绝父相之前讲的，父亲是每一个一级菜单，就是第一个ul里的每个li,儿子不是二级菜单中的li，而是这整个ul，这里需要注意，top,left值需要设置，top如果为0，意味二级菜单盖住一级菜单，不想就设置一级菜单的高度。

10。都是之前学的，但是一旦综合起来，就很难，还是要多看看之前的。特效分解很重要，什么是用户看到的，什么是他们看不到但却存在的。

407指导员

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
综合练习二级菜单(纯css之前有js的)

综合练习二级菜单CSS3 opacity 属性设置元素透明度。取值从 0.0 （完全透明）到 1.0（完全不透明）。之前使用js模拟过二级菜单的动画效果很是麻烦，现在css3中自带的过度模块和翻转模块很大的方便了我们。纯css写二级菜单动画效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>翻转菜单</title>
复制链接

扫一扫