<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>99-翻转菜单-综合练习</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .nav{

            width: 400px;

            height: 40px;

            margin: 0 auto;

            margin-top: 100px;

            background-color: black;

        }

        .nav>li{

            list-style: none;

            float: left;

            width: 120px;

            height: 40px;

            background-color: green;

            margin-left: 10px;

            text-align: center;

            line-height: 40px;

            /*

             li 设置为relative，.sub设置为absolute，表示定位流，这样菜单不会被div覆盖

            */

            position: relative;

        }

        .sub{

            /*不显示元素*/

            /*display: none;*/

            width: 120px;

            position: absolute;

            /*

            定位流一般要加left等

            */

            left: 0;

            top: 40px;

        }

        .sub li{

            list-style: none;

            background-color: deeppink;

            /*开始的时候文字翻转180*/

            transform: rotateY(180deg);

            transition: all 1s;

            opacity: 0;

        }

        /*

        .nav>li:hover .sub{

            display: block;

        }

        */

        .nav>li:hover .sub li{

            /*鼠标悬浮的时候，恢复默认状态，达到翻转的效果*/

            transform: none;

            opacity: 1;

        }

        /*下面对li做一个动画延迟，模拟按顺序执行动画*/

        .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: red;

            margin: 0 auto;

        }

    </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>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>

</body>

</html>

效果如下：

HTML翻转菜单练习的更多相关文章

  1. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  2. 【译】仿Taasky的3D翻转菜单动画实现

    最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...

  3. CSS3实现翻转菜单效果

    演示地址 点击打开链接 注意:菜单翻转效果在搜狗浏览器上看不出来.推荐用FireFox <!DOCTYPE   html   PUBLIC   "-//W3C//DTD XHTML 1 ...

  4. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  5. HTML连载71-翻转菜单练习

    一.翻转菜单练习​ <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. Extjs 知识体系1-dom操作

    操作dom 主要是Ext.element,主要是简单的操作 Ext.dom.CompositeElement // 操作dom集合 ps:Extjs 使用字面量{} 形式,不支持链式操作 一.获取元素 ...

  7. Ext-js使用指南（总结）

    一.获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById ...

  8. CSS3实现3d菜单翻转

    transform-style:flat | preserve-3d: 3d透视属性.针对子元素如何在3d空间相对其父元素渲染,这个属性声明在父元素上,并且他的子元素使用了transform才会有效. ...

  9. 纯CSS 3D翻转一个面（翻转导航菜单 立方体）

    在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 我的github:swarz,欢迎给老弟我++星星 ...

随机推荐

  1. Linux .vimrc 设置项

    Linux 下,.vimrc 有两个.一个是全局使用的(/etc/vimrc),另一个是个人使用的(~/.vimrc). 大部分的情况下,我们只需要设置自己目录下的.vimrc 即可. # vim ~ ...

  2. 学习笔记——SM2算法原理及实现

    RSA算法的危机在于其存在亚指数算法,对ECC算法而言一般没有亚指数攻击算法 SM2椭圆曲线公钥密码算法:我国自主知识产权的商用密码算法,是ECC(Elliptic Curve Cryptosyste ...

  3. python之路-----网络编程

    一:客户端/服务端j架构(C/S架构) 在生活中,最常见的C/S架构即是APP和网页服务器这个架构.Client和Server之间利用网络来进行通信,客户端和服务器端的程序不同,用户的程序主要在客户端 ...

  4. 【转】python 中NumPy和Pandas工具包中的函数使用笔记（方便自己查找）

    二.常用库 1.NumPy NumPy是高性能科学计算和数据分析的基础包.部分功能如下: ndarray, 具有矢量算术运算和复杂广播能力的快速且节省空间的多维数组. 用于对整组数据进行快速运算的标准 ...

  5. Forth嵌套定义的执行过程图示

    body, table{font-family: 微软雅黑} table{border-collapse: collapse; border: solid gray; border-width: 2p ...

  6. nodejs 安装失败 ，出现error 2502 和error2503

    出现error 2502 和error2503是因为win8的权限问题所导致的,具体说就是要以管理员身份进行安装就可以解决,下面详细来说一下. 1.cmd命令行点击以管理员身份运行. 2.这时候就可以 ...

  7. Android stdio 报错 error invoking main method

    打开Android stdio失败 报错:error invoking main method 想想前一天做了什么事?? 昨天把企图把Android Stdio文件包移盘,但是中途截止了,也就是说移动 ...

  8. String 类型equals方法和int == 方法效率比较

    最近写了一个递归方法,在进行比较判断的时候,因为都是integer类型,而integer类型在大于127或者小于-128时会在新建一个,这是因为integer类型的拆装箱机制, 之前没有考虑过equa ...

  9. ubuntu svn服务本地搭建使用

    安装 sudo apt-get install subversion 创建一个仓库 svnadmin create mysvn 编辑配置文件  /home/exayong/mysvn就是上面创建的目录 ...

  10. c程序的期望

    对于C语言,我认为是我们计算机专业必须掌握的,如果C语言都不能掌握好,我认为在以后的学习中也不会学的有多好,所以,我们要把C语言尽量掌握好,也是在今后的学习中打好基础,多看书,多写一些程序运行,做一些 ...